Skip to content

feat(nav): add mobile nav toggle#3

Merged
Don-Damiano merged 1 commit intomainfrom
work/update-header-for-mobile-navigation
Jan 23, 2026
Merged

feat(nav): add mobile nav toggle#3
Don-Damiano merged 1 commit intomainfrom
work/update-header-for-mobile-navigation

Conversation

@Don-Damiano
Copy link
Member

Motivation

  • Improve mobile navigation by adding a toggleable menu and make the nav keyboard-accessible and ARIA-friendly.

Description

  • Add a hamburger-style toggle button (button.nav-toggle) with aria-controls and aria-expanded and wrap links in div.navlinks with id="primary-nav" and data-open state in src/components/Header.astro.
  • Include an inline script that updates aria-expanded and the data-open attribute on click to drive the visual state.
  • Update src/styles/global.css with .nav-header, .nav-toggle, :focus-visible styles, and a @media (max-width: 768px) rule that switches .nav to a column layout, hides .navlinks by default, and shows it when data-open="true".

Testing

  • Launched the dev server with npm run dev and the Astro server started successfully (served at http://localhost:4321/).
  • Captured a mobile viewport screenshot via a Playwright script to verify the collapsed menu and toggle behavior, which completed successfully and produced an artifact.

Codex Task

@Don-Damiano Don-Damiano merged commit d3b71fe into main Jan 23, 2026
@Don-Damiano Don-Damiano deleted the work/update-header-for-mobile-navigation branch January 23, 2026 13:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant