Description

Currently, the navigation bar works correctly on desktop screens (1024px+) but becomes inaccessible on mobile and tablet devices. Navigation links such as:

GitHub Dashboard
Community Highlights
Explore by Topic
Contributions

disappear completely on smaller screens because there is no responsive mobile navigation implementation.

This issue affects overall usability and accessibility, especially for mobile users.

Expected Behavior

On smaller screens:

A hamburger menu icon should appear
Clicking the icon should toggle a mobile navigation drawer/menu
All navigation links should remain accessible
The menu should close after selecting a link
The layout should remain responsive without overflow issues
Current Behavior
Navbar links are hidden on mobile/tablet screens
No hamburger menu exists
Users cannot navigate through the application on smaller devices
Suggested Tech Stack

Frontend:

React.js
Tailwind CSS
Optional: lucide-react for hamburger icons
Possible Implementation

Use responsive Tailwind classes:

hidden lg:flex
lg:hidden

Implement:

Mobile menu toggle using useState
Hamburger icon (Menu)
Close icon (X)
Conditional rendering for mobile navigation
Acceptance Criteria
Desktop navbar remains unchanged
Hamburger menu visible below 1024px
Mobile menu opens/closes correctly
Navigation links accessible on all devices
No horizontal scrolling on mobile
Accessibility attributes added (aria-label, aria-expanded)
Responsive layout tested on mobile/tablet/desktop