[FEATURE] Implement Collapsible "Hamburger" Menu

[ledsouza]

User Story

As a Mobile User,
I want the main navigation links to be collapsed into a menu icon,
So that the header does not take up the entire screen on small devices.

Behavioral Specs (GWT)

• Scenario: Mobile Viewport

  • Given I am on a viewport narrower than 768px
  • When I view the page
  • Then the main navigation links are hidden AND a "hamburger" icon is displayed.

• Scenario: Opening Menu

  • Given I click the "hamburger" icon
  • When the menu expands
  • Then the navigation links appear in a vertical list.

Task List

• Create MobileMenu component.
• Add state logic (isOpen) to the Header.
• Add aria-label="Open menu" for accessibility.

Definition of Done

• Unit tests pass for the toggle logic.
• Verified on Chrome DevTools (Device Mode: iPhone 12).