Navbar Redesign with Dropdowns & Responsive Layout

Related Issue

Closes #49 (closed)

🧾 Summary

This MR redesigns the existing navbar to improve usability, structure, and visual hierarchy.

The previous navbar had too many items in a single row, making it cluttered and hard to navigate. This update introduces grouped dropdown menus, better spacing, and full responsiveness.

🚀 Changes Implemented 🔹 Navigation Restructuring Grouped related items into dropdown menus: About Overview Structure Collaborations Roadmap

Work / Projects Projects

Community / Updates In the News Events AI Hackdays Programs Summer of AI Contact remains a standalone item 🎨 UI Improvements Added dropdown menus (hover for desktop, click for mobile) Improved spacing between navbar items Introduced font hierarchy (bold main items) Added hover effects (underline / color transition) Added subtle shadow/border to navbar Cleaned up overall layout for minimal design 📱 Responsiveness Implemented hamburger menu for mobile view Dropdowns converted to collapsible sections on smaller screens Fixed overflow and wrapping issues ⚡ Enhancements Sticky navbar on scroll Smooth dropdown animations Active link highlighting for current page Created reusable dropdown component ✅ Acceptance Criteria Navbar is clean and not crowded Items are logically grouped into dropdowns Fully responsive (desktop + mobile) Smooth dropdown interactions No breaking changes in navigation Matches existing design system 🛠️ Technical Notes Updated only navbar-related components Followed existing styling system (Tailwind / CSS modules) Introduced reusable dropdown component for scalability 📸 Screenshots (Before / After)

Add screenshots or screen recordings here