Close the mobile nav drawer when clicking the navbar itself
Added an onClick on <header> that closes the drawer whenever it's open — the panel is a sibling, not a descendant, so this never fires for clicks inside the open drawer, only the bar itself. The hamburger's own click now stops propagation so toggling the drawer open doesn't get immediately undone by this same handler. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -383,6 +383,16 @@ export function Navbar({ singleActiveProduct }: { singleActiveProduct: boolean }
|
||||
// header itself to be a flexible column that could grow for it — it's
|
||||
// now a fixed-position sibling instead (see that panel's own comment
|
||||
// on why), so this is back to a plain fixed-height bar.
|
||||
//
|
||||
// onClick here closes the drawer on any click that lands on the bar
|
||||
// itself (logo/cart/account/CTAs already call closeMobile() from
|
||||
// their own onClick, so this mainly covers clicking empty space in
|
||||
// the bar) — safe as a catch-all specifically because the panel is
|
||||
// a sibling, not a descendant, so a click inside the open drawer
|
||||
// never bubbles up to this handler. The hamburger's own onClick
|
||||
// stops propagation so toggling it open doesn't immediately get
|
||||
// undone by this same handler.
|
||||
onClick={() => mobileOpen && setMobileOpen(false)}
|
||||
className={`sticky top-0 z-50 w-full h-[6.25rem] transition-[background-color,backdrop-filter] duration-300 ${
|
||||
scrolled || mobileOpen
|
||||
? "bg-bg-base/80 backdrop-blur-md"
|
||||
@@ -535,7 +545,10 @@ export function Navbar({ singleActiveProduct }: { singleActiveProduct: boolean }
|
||||
aria-expanded={mobileOpen}
|
||||
aria-controls="mobile-nav-panel"
|
||||
aria-label={mobileOpen ? "Menü schließen" : "Menü öffnen"}
|
||||
onClick={() => setMobileOpen((v) => !v)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setMobileOpen((v) => !v);
|
||||
}}
|
||||
className="lg:hidden flex h-11 w-11 items-center justify-center shrink-0"
|
||||
>
|
||||
<span className="relative block h-4 w-6">
|
||||
|
||||
Reference in New Issue
Block a user