Add a mobile-friendly collapsible navigation menu to the header

[mikewheeleer]

Implement a responsive collapsible menu in the header

Description

src/components/Header.tsx renders its nav links in a single horizontal row with no responsive behaviour, so on narrow viewports the links wrap or overflow and there is no hamburger/menu affordance. This issue adds an accessible disclosure menu for small screens while keeping the inline layout on wide screens.

Requirements and context

• Repository scope: Agentpay-Org/Agentpay-frontend only.
• Add a menu toggle button shown only below a breakpoint, with aria-expanded, aria-controls, and a real <button> (not a div).
• The expanded menu must be keyboard operable (Tab order, Escape to close, focus returns to the toggle) and close on route change.
• Keep the existing Main navigation aria-label, the logo link, and the focus-visible rings.
• Do not regress the existing Header test; extend it for the responsive behaviour.

Suggested execution

• Fork the repo and create a branch
• git checkout -b feature/navigation-responsive-menu
• Implement changes
  • Write code in: src/components/Header.tsx (becomes a client component if not already).
  • Write comprehensive tests in: extend src/components/__tests__/Header.test.tsx — assert toggle opens/closes, aria-expanded flips, Escape closes, and links remain reachable.
  • Add documentation: note the responsive nav in README.md.
  • Validate against keyboard-only operation and focus management.
• Test and commit

Test and commit

• Run npm run lint, npm run typecheck, npm test, and npm run build.
• Cover edge cases: open then navigate (auto-close), Escape while open, and wide-viewport inline layout unaffected.
• Include the npm test output and a note on the breakpoint chosen.

Example commit message

feat(navigation): add accessible responsive menu to the header

Guidelines

• Minimum 95 percent test coverage for the Header component.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the AgentPay community on Discord for questions, reviews, and faster merges: https://discord.gg/eXvRKkgcv
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.

[ekwe7]

I would love to work on this issue. I have experience building production ready applications and collaborating through GitHub workflows. I'll carefully analyze the current implementation, propose a reliable solution, and submit a well-tested PR. My focus is on clean code, maintainability, and timely delivery

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@ekwe7's PR #185 was approved and merged by @mikewheeleer.

🏆 @ekwe7: You earned 40 FoxPoints for this contribution! Your current tier: Builder (2,311 total points). Track your full progress on GrantFox.

👏 Great work, @ekwe7! Keep contributing to Agentpay-Org.