AI_Assistant/pcbjam
Watch
1
0
Fork
You've already forked pcbjam
 0
Code Issues Pull requests Projects Releases 4 Packages Wiki Activity Actions 2

fix(site): close mobile menu when a nav item is tapped

Browse source 
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>
This commit is contained in:
Viktor Vaczi 2026-06-08 14:32:57 +02:00
commit c8c09cc3d7
1 changed files with 18 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

24
site/src/components/Header.astro
View file

@ -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>