Mobile navbar should close when clicking outside for better UX #338
Description
🎯 Problem Description
The current mobile navbar implementation only closes when:
- User clicks the hamburger menu again
- User clicks on a navigation link
However, modern web UX patterns expect mobile overlays/dropdowns to close when users click outside the component area.
🔍 Current Behavior
- Open mobile view (< 992px width)
- Click hamburger menu (☰) to open navbar
- Click anywhere outside the navbar
- Expected: Navbar closes
- Actual: Navbar remains open
💡 User Experience Impact
- Frustrating for users who expect standard behavior
- Accessibility issue for users with motor difficulties
- Inconsistent with modern web app patterns
- Poor mobile UX compared to competitors
🎨 Proposed Solution
Add click-outside event listener that:
- Detects clicks outside the navbar area
- Only activates in mobile/responsive view
- Maintains existing nav-link closing behavior
- Follows modern UI/UX patterns
📱 Benefits
- Improved mobile user experience
- Better accessibility compliance
- Follows modern web standards
- Enhanced touch device usability
🔗 Related
This addresses a common UX pattern found in Bootstrap modals, dropdowns, and mobile navigation across the web.