From c8c09cc3d78592d4dfe77c8ce6c9bc7287db8e11 Mon Sep 17 00:00:00 2001
From: Viktor Vaczi <viktor.vaczi@emergence-engineering.com>
Date: Mon, 8 Jun 2026 14:32:57 +0200
Subject: [PATCH] fix(site): close mobile menu when a nav item is tapped
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The CSS-only hamburger (checkbox toggle) only reset on astro:page-load, which fires for real navigations (Blog) but not for same-page anchor links (How it works / Open & yours / Join the waitlist) that scroll without navigating — so the menu stayed open after tapping them. Add a one-time delegated click handler on the nav that unchecks the toggle on any link tap. Items stay identical to desktop; scrolling unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 site/src/components/Header.astro | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/site/src/components/Header.astro b/site/src/components/Header.astro
index d4e7c45..1daeab5 100644
--- a/site/src/components/Header.astro
+++ b/site/src/components/Header.astro
@@ -155,11 +155,23 @@ const isActive = (href: string, external?: boolean) =>
 </style>
 
 <script>
-  // ClientRouter persists the header (transition:persist), so reset the mobile
-  // menu toggle after every navigation to avoid it staying open.
-  function resetNav() {
-    const t = document.getElementById('nav-toggle') as HTMLInputElement | null;
-    if (t) t.checked = false;
+  // ClientRouter persists the header (transition:persist). Two jobs:
+  //  1. Reset the mobile menu toggle after every navigation (was already here).
+  //  2. Close the menu when ANY nav link is tapped — including same-page anchor
+  //     links (How it works / Open & yours / Join the waitlist) that scroll but
+  //     don't navigate, so astro:page-load never fires for them and the CSS-only
+  //     checkbox would otherwise stay checked (menu stuck open).
+  function initMobileNav() {
+    const toggle = document.getElementById('nav-toggle') as HTMLInputElement | null;
+    if (!toggle) return;
+    toggle.checked = false;
+
+    const nav = document.querySelector<HTMLElement>('.nav');
+    if (!nav || nav.dataset.bound === '1') return; // header persists — bind once
+    nav.dataset.bound = '1';
+    nav.addEventListener('click', (e) => {
+      if ((e.target as HTMLElement).closest('a')) toggle.checked = false;
+    });
   }
-  document.addEventListener('astro:page-load', resetNav);
+  document.addEventListener('astro:page-load', initMobileNav);
 </script>