Navigation is usable on mobile

A horizontal navigation bar with seven items needs roughly 700-900px of horizontal space. On a 375px phone, those items either overflow the viewport, shrink until labels overlap, or get truncated with ellipses. Navigation is the spine of a site — if users can't reach secondary pages, they bounce. A hamburger menu or bottom nav bar is the standard mobile pattern; both require a toggle state and a responsive breakpoint that swaps layouts.

Hide the desktop nav with hidden md:flex and show a hamburger button below md. Wire the button to a state variable that toggles the mobile nav panel. Put this in src/components/navigation/header.tsx or equivalent.

<ul className="hidden md:flex gap-6">{/* desktop */}</ul>
<button className="md:hidden" onClick={() => setOpen(!open)} aria-label="Toggle navigation">
  <MenuIcon />
</button>
{open && <ul className="md:hidden flex flex-col">{/* mobile */}</ul>}