🎯 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

1. Open mobile view (< 992px width)
2. Click hamburger menu (☰) to open navbar
3. Click anywhere outside the navbar
4. Expected: Navbar closes
5. 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.