Fix navigation bar mobile functionality and implement consistent navigation across pages

[Copilot]

This PR addresses the navigation bar issues identified in the frontend application, specifically fixing the mobile navigation menu functionality and ensuring consistent navigation across all pages.

Issues Fixed

1. Mobile Navigation Menu: The hamburger menu button was present but non-functional - clicking it had no effect and no mobile menu appeared.

2. Inconsistent Navigation: The Insights page used a completely custom header instead of the standard navigation component, making it inconsistent with other pages and lacking proper navigation options.

Changes Made

Enhanced Header Component (src/components/Header.tsx)

• Added React state management to handle mobile menu toggle functionality
• Implemented a fully functional mobile navigation menu that slides down when the hamburger button is clicked
• Added proper icon toggling between Menu and X icons for better user experience
• Included accessibility improvements with aria-label attributes
• Mobile menu automatically closes when users navigate to different pages
• Mobile menu displays all navigation links (Home, Explore Data, Login, Sign Up) in a clean vertical layout

Fixed Insights Page Navigation (src/pages/landing/Insights.tsx)

• Replaced the custom header implementation with the standard Header component
• Added the Footer component for consistency with other pages
• Maintained the dashboard-specific content (year selector, export button) in a separate section below the main navigation
• Removed redundant navigation elements that are now handled by the standard header

Testing Results

• ✅ Mobile menu opens and closes properly on all pages
• ✅ Navigation links work correctly on both desktop and mobile viewports
• ✅ Menu automatically closes when navigating between pages
• ✅ Consistent navigation experience across all landing pages
• ✅ Insights page maintains its functionality while using standard navigation
• ✅ Build passes successfully with no new linting issues

Screenshots

Before - Mobile navigation was broken:

After - Mobile navigation working:

Desktop view with consistent navigation:

The mobile navigation now provides a seamless experience across all devices and screen sizes, while maintaining the existing design aesthetic and functionality.

Fixes #6.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
cphorm	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 30, 2025 0:52am

[oovaa]

Looks good