Header: Inactive Mobile Menu

[kOaDT]

Objective

Make the mobile navigation usable by wiring the hamburger control to a slide-in or dropdown menu.

Current State

• File: app/components/Header.tsx
• The hamburger button is rendered only on viewports below md (md:hidden).
• The button has no onClick handler; it is non-interactive.
• The main nav links (Home, About, Contact, search, wishlist, order search, profile) are in a container with hidden md:flex, so they are not visible on mobile.
• On mobile, users cannot access navigation beyond the cart and auth controls in the header.

Target State

• The hamburger button toggles a mobile-only menu (dropdown or slide-in).
• Menu open/closed is driven by component state.
• The button exposes aria-expanded reflecting that state.
• The menu closes when:
  • The user clicks outside the menu (e.g. overlay or document), or
  • The user activates a menu link (navigation).

Scope

• Component: app/components/Header.tsx
• Behavior: Mobile viewports only; desktop layout unchanged.

Acceptance Criteria

1. Hamburger button toggles visibility of the mobile menu.
2. Button has aria-expanded set from the same state that controls menu visibility.
3. Menu closes on outside click (click-away) or when a menu link is used.
4. Mobile menu contains the same navigation entries as the desktop nav (Home, About, Contact, search, wishlist, order search, profile) or equivalent entry points.

Notes

• No change to desktop navigation layout or behavior.