[BUG]: Mobile Menu Remains Open After Navigation #33
Description
Current Behavior
The mobile navigation menu stays open after clicking a link, blocking content on the new page. Users must manually close the menu using the X button.
Steps to Reproduce
- Open the site on mobile (or resize browser to <1024px)
- Click the hamburger menu to open navigation
- Click any link (e.g., "Protocols" or "Research")
- Observe the menu remains open on the new page
Expected Behavior
The mobile menu should automatically close when navigating to a new page, matching standard mobile UX patterns.
Root Cause
The isOpen state in components/header.tsx persists across client-side route changes because Next.js doesn't unmount the Header component during navigation. The component needs to listen to route changes via the usePathname() hook (already imported) to reset the menu state.
Impact
- Poor mobile user experience
- Navigation requires two taps instead of one
- Content is hidden behind the menu overlay
Proposed Solution
Add a useEffect hook that listens to pathname changes and automatically closes the menu. This follows React best practices for syncing component state with external changes.
Files Affected
components/header.tsx
@Zahnentferner could you please assign this issue to me??