max.olchov/HifiPlanet-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Align the fullscreen menu's left edge with the hamburger icon

Browse source 
The menu content is now wrapped in the same max-w-6xl mx-auto
container the header uses, so its left inset matches the hamburger
icon's position exactly at every viewport width - previously they only
lined up on narrow screens, since the header's centered container adds
extra outer margin on wide viewports that the overlay wasn't accounting
for.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Maaxxs 2026-07-06 17:54:05 +02:00
parent b8af58d8d0
commit 17333f5988
1 changed files with 15 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
hifi-src/src/components/Navbar.jsx
View file

@ -120,21 +120,22 @@ export default function Navbar() {
{mounted && {mounted &&
createPortal( createPortal(
<div <div
className="fixed inset-0 z-[100] flex flex-col items-start justify-center gap-5 overflow-y-auto px-8 py-24 text-left backdrop-blur-xl" className="fixed inset-0 z-[100] overflow-y-auto text-left backdrop-blur-xl"
style={{ background: 'linear-gradient(135deg, #f1f5f9 0%, #e3f0cf 50%, #f8fafc 100%)' }} style={{ background: 'linear-gradient(135deg, #f1f5f9 0%, #e3f0cf 50%, #f8fafc 100%)' }}
> >
<button <div className="relative mx-auto flex min-h-full max-w-6xl flex-col items-start justify-center gap-5 py-24 pl-6 pr-8 sm:pl-8">
onClick={() => setOpen(false)} <button
aria-label="Menü schließen" onClick={() => setOpen(false)}
className="absolute left-6 top-6 flex items-center gap-2 text-neutral-600 hover:text-brand-600" aria-label="Menü schließen"
> className="absolute left-6 top-6 flex items-center gap-2 text-neutral-600 hover:text-brand-600 sm:left-8"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-6 w-6"> >
<path strokeLinecap="round" strokeLinejoin="round" d="M6 6l12 12M18 6 6 18" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="h-6 w-6">
</svg> <path strokeLinecap="round" strokeLinejoin="round" d="M6 6l12 12M18 6 6 18" />
<span className="text-xs font-semibold uppercase tracking-wide">Schließen</span> </svg>
</button> <span className="text-xs font-semibold uppercase tracking-wide">Schließen</span>
</button>
<Link to="/fahrzeuge" onClick={() => setOpen(false)} className={`text-3xl font-extrabold tracking-tight text-neutral-900 hover:text-brand-600 ${flyIn()}`} style={flyInStyle(0)}> <Link to="/fahrzeuge" onClick={() => setOpen(false)} className={`text-3xl font-extrabold tracking-tight text-neutral-900 hover:text-brand-600 ${flyIn()}`} style={flyInStyle(0)}>
Fahrzeuge Fahrzeuge
</Link> </Link>
<Link to="/leistungen" onClick={() => setOpen(false)} className={`text-3xl font-extrabold tracking-tight text-neutral-900 hover:text-brand-600 ${flyIn()}`} style={flyInStyle(1)}> <Link to="/leistungen" onClick={() => setOpen(false)} className={`text-3xl font-extrabold tracking-tight text-neutral-900 hover:text-brand-600 ${flyIn()}`} style={flyInStyle(1)}>
@ -176,7 +177,8 @@ export default function Navbar() {
> >
<DynamicIcon name="shopping-bag" className="h-4 w-4" /> <DynamicIcon name="shopping-bag" className="h-4 w-4" />
Zum Shop Zum Shop
</a> </a>
</div>
</div>, </div>,
document.body document.body
)} )}