Implement Mobile-First Responsive Navigation Drawer

[Lakes41]

Background

The current top navigation bar simply scales down on mobile devices, squeezing links together and pushing wallet connection buttons off-screen.

Problem

The application is nearly unusable on mobile viewports due to poor touch target sizes and broken CSS flexbox layouts in the header.

Expected Outcome

A dedicated, slide-out hamburger navigation menu for viewports under 768px, ensuring high accessibility, large touch targets, and a clean mobile UI.

Suggested Implementation

• Utilize CSS media queries or Tailwind CSS md: breakpoints to hide the horizontal link list on small screens.
• Implement a fixed hamburger menu icon that triggers a modal/drawer overlay.
• Move tertiary links (Docs, Discord, Settings) into a bottom-anchored section of the mobile drawer.
• Ensure the drawer traps focus and disables body scrolling when active.

Acceptance Criteria

• Horizontal navigation is entirely replaced by a hamburger menu on screens < 768px.
• Drawer animates smoothly in from the right or left edge.
• Tapping outside the drawer or pressing Escape closes the menu.

Likely Affected Files

• src/components/Header/Navbar.tsx
• src/components/Header/MobileMenu.tsx
• src/styles/components/drawer.css

Requirements

• Must achieve a 100% pass rate on Google Lighthouse Mobile UX audits.

[Lspnjr1]

Hello maintainers,
I’m Lspnjr1
I would like to be assigned to this issue. After reviewing the requirements, I’m confident that I understand the scope of the task and the project’s contribution criteria. I believe I can deliver a clean, maintainable implementation that aligns with the project’s standards.