Skip to main content

Feature: Navigation Header

Purpose​

  • Feature name: Navigation header
  • Why this feature exists: Provide consistent access to core routes and evidence links across the site.

Scope​

In scope​

  • sticky header behavior on scroll
  • raised control-strip materiality
  • stacked persistent brand nameplate
  • desktop navigation controls
  • no hamburger/menu control in the desktop nav

Out of scope​

  • theme toggle behavior (covered in theming group)
  • page-specific CTAs (covered in core pages)

Prereqs / Inputs​

  • docs base URL configured for evidence link
  • optional NEXT_PUBLIC_GITHUB_BASE_URL for GitHub profile link

Procedure / Content​

Feature summary​

  • Feature name: Navigation header
  • Feature group: Navigation and UX polish
  • Technical summary: Client-side navigation component renders a full-bleed raised control strip with compact control links, stacked branding, sticky-on-scroll shadow state, and an inline cockpit-style theme rocker.
  • Low-tech summary: The header now reads like a control console while keeping routes easy to reach, without a hamburger menu.

Feature in action​

  • Where to see it working: Header on any route, such as / or /projects.

Confirmation Process​

Manual​

  • Steps: Open any page, scroll to trigger sticky shadow, verify stacked brand text, and confirm the inline controls route correctly.
  • What to look for: Header stays visible, the full-bleed control strip persists across routes, no stray menu button appears, and links route correctly.
  • Artifacts or reports to inspect: Optional route coverage in CI.

Tests​

Potential behavior if broken or misconfigured​

  • Navigation links route to the wrong pages.
  • Sticky styling does not engage when scrolling.
  • Stacked brand regresses to outdated naming.

Long-term maintenance notes​

  • Keep navigation entries aligned with core routes.
  • Update evidence link if docs base URL changes.
  • Keep link labels and control treatment consistent with ControlButton contracts.

Dependencies, libraries, tools​

  • Next.js App Router
  • React
  • Tailwind CSS

Source code references (GitHub URLs)​

ADRs​

  • None.

Runbooks​

  • None.

Additional internal references​

Validation / Expected outcomes​

  • Navigation is consistent across routes and breakpoints.
  • Evidence link routes to the configured docs base URL and opens in a new tab.

Failure modes / Troubleshooting​

  • Broken links: verify route paths and redeploy.
  • Stray menu button appears: confirm the nav only renders brand, links, and the theme rocker.

References​

  • None.