[UI/UX Design] Add responsive mobile navigation drawer to Layout header

[1nonlypiece]

[UI/UX Design] Add responsive mobile navigation drawer to Layout header

Description

src/components/Layout.tsx's header lays out nav links in a fixed flex row that crowds on small screens, and breakpoints.md assumes a mobile nav drawer that does not yet exist. This issue adds a hamburger-triggered drawer for navigation below md.

Requirements and context

• Must be secure, tested, and documented
• Should be efficient and easy to review
• Show full nav at lg+ and collapse to a drawer below md per breakpoints.md
• Implement an accessible disclosure (aria-expanded, focus trap when open)
• Keep WalletConnectButton and theme toggle reachable on mobile
• Use sm/md/lg tokens and 44px tap targets

Suggested execution

• Fork the repo and create a branch
• git checkout -b feature/mobile-nav-drawer
• Implement changes
  • Add src/components/MobileNav.tsx and integrate into Layout.tsx
  • Write src/components/__tests__/MobileNav.test.tsx
  • Update breakpoints.md mobile header diagram
  • Verify focus trap, Escape close, and reduced-motion slide-in
• Test and commit
  • Run tests, cover edge cases
  • Include test output and notes

Example commit message

feat: responsive mobile navigation drawer

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours