From 275d5abd95c77463bd95b55976f26369bcde5ca6 Mon Sep 17 00:00:00 2001 From: Marco Date: Thu, 30 Jul 2026 19:57:14 +0000 Subject: [PATCH] Close the mobile nav drawer when clicking the navbar itself MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added an onClick on
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 --- app/components/Navbar.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx index b39f219..65762f0 100644 --- a/app/components/Navbar.tsx +++ b/app/components/Navbar.tsx @@ -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" >