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:
Marco
2026-07-30 19:57:14 +00:00
parent 0f50ab334c
commit 275d5abd95
+14 -1
View File
@@ -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">