Problem
When the mobile hamburger menu is open, tapping on the page content area below the dropdown does NOT close the nav. Users expect the menu to dismiss when interacting with the page.
Note: Nav links already have onClick={() => setMobileOpen(false)} and work correctly. This is about tapping outside the dropdown.
Fix
Add a transparent overlay behind the dropdown that closes the menu on click. In NavBar.tsx, when mobileOpen is true, render a fixed backdrop div before the dropdown:
```tsx
{mobileOpen && (
<>
<div
className="fixed inset-0 top-11 z-40 md:hidden"
onClick={() => setMobileOpen(false)}
/>
{/* existing dropdown content */}
</>
)}
```
The overlay sits below the dropdown (z-40 vs z-50) and captures taps on the page area.
Branch
task/764-nav-close-outside
Problem
When the mobile hamburger menu is open, tapping on the page content area below the dropdown does NOT close the nav. Users expect the menu to dismiss when interacting with the page.
Note: Nav links already have
onClick={() => setMobileOpen(false)}and work correctly. This is about tapping outside the dropdown.Fix
Add a transparent overlay behind the dropdown that closes the menu on click. In
NavBar.tsx, whenmobileOpenis true, render a fixed backdrop div before the dropdown:```tsx
{mobileOpen && (
<>
<div
className="fixed inset-0 top-11 z-40 md:hidden"
onClick={() => setMobileOpen(false)}
/>
{/* existing dropdown content */}
</>
)}
```
The overlay sits below the dropdown (z-40 vs z-50) and captures taps on the page area.
Branch
task/764-nav-close-outside