qumo-website/openspec/specs/navigation/spec.md

Purpose

Defines the navigation bar component (Nav.astro) present on every page of the Qumo website. Covers logo, page links, language switcher, Connect CTA, scroll behavior, and mobile hamburger menu.

Requirements

Requirement: Nav renders logo linking to homepage

The navigation bar SHALL display the Qumo wordmark logo (logo-wide.svg inlined as SVG) on the left side, wrapped in an <a> tag linking to the locale-appropriate homepage (/ for EN, /nl for NL). The logo fill SHALL use currentColor so it inherits the Snow text color on the Midnight nav background.

Scenario: Logo is visible on dark background

• WHEN the page renders with Nav.astro included
• THEN the logo SVG SHALL have class="text-snow" (or equivalent) so its paths render as Snow (#F3F3F3) on the Midnight background

Scenario: Logo links to locale homepage

• WHEN the user is on an English page and clicks the logo
• THEN the browser SHALL navigate to /

Scenario: Logo links to NL homepage on Dutch pages

• WHEN the user is on a Dutch page (/nl/...) and clicks the logo
• THEN the browser SHALL navigate to /nl

Requirement: Nav renders three page links

The navigation bar SHALL render three links: Services (→ /#services), AI Launchpad (→ /ai-launchpad), About (→ /about). Label text SHALL come from the nav.links array in the locale content JSON. On Dutch pages, links SHALL point to /nl#services, /nl/ai-launchpad, /nl/about.

Scenario: EN nav links render with correct hrefs

• WHEN the page locale is en
• THEN the three links SHALL have href values /#services, /ai-launchpad, /about with labels "Services", "AI Launchpad", "About"

Scenario: NL nav links render with correct hrefs

• WHEN the page locale is nl
• THEN the three links SHALL have href values /nl#services, /nl/ai-launchpad, /nl/about with labels "Diensten", "AI Launchpad", "Over Ons"

Requirement: Nav renders Connect CTA button

The navigation bar SHALL render a "Connect" CTA button on the right side linking to /contact (EN) or /nl/contact (NL), with the wum-arrow.svg chevron icon inline. The button SHALL be styled distinctly from nav links (border or background treatment matching the staging site).

Scenario: Connect button links to contact page

• WHEN the page locale is en
• THEN a button or link with label "Connect" and href="/contact" SHALL be present in the nav

Scenario: NL Connect button uses Dutch label and NL href

• WHEN the page locale is nl
• THEN the CTA SHALL display "Verbind" and link to /nl/contact

Requirement: Nav renders language switcher

The navigation bar SHALL render a language switcher that links to the alternate locale version of the current page. The current locale SHALL be shown as active/non-linked; the alternate SHALL be a clickable link.

Scenario: EN page shows NL as switchable link

• WHEN the current page is /about
• THEN the language switcher SHALL show "EN" (active, non-linked) and "NL" linking to /nl/about

Scenario: NL page shows EN as switchable link

• WHEN the current page is /nl/ai-launchpad
• THEN the language switcher SHALL show "NL" (active, non-linked) and "EN" linking to /ai-launchpad

Requirement: Nav is fixed and transitions background on scroll

The <nav> element SHALL be position: fixed at the top of the viewport with z-index above page content. On page load it SHALL have a transparent background. After the user scrolls more than 20px, it SHALL transition to a solid Midnight (#102022) background. The transition SHALL be smooth (CSS transition-colors).

Scenario: Nav is transparent on page load

• WHEN a page loads and window.scrollY is 0
• THEN the nav background SHALL be transparent

Scenario: Nav becomes solid after scrolling

• WHEN the user scrolls more than 20px down the page
• THEN the nav background SHALL be bg-midnight (solid #102022)

Scenario: Nav returns to transparent when scrolled back to top

• WHEN the user scrolls back to within 20px of the top
• THEN the nav background SHALL return to transparent

Requirement: Nav collapses to hamburger menu on mobile

On viewports below md breakpoint (768px), the three nav links, language switcher, and Connect CTA SHALL be hidden. A hamburger button SHALL be shown. Clicking the hamburger SHALL reveal a full-width slide-in mobile menu containing all nav links, the language switcher, and the Connect CTA.

Scenario: Desktop nav links are hidden on mobile

• WHEN viewport width is below 768px
• THEN the desktop nav links SHALL have class including hidden (or equivalent responsive class)

Scenario: Hamburger button opens mobile menu

• WHEN the hamburger button is clicked
• THEN the mobile menu panel SHALL become visible and aria-expanded="true" SHALL be set on the button

Scenario: Hamburger button closes mobile menu

• WHEN the mobile menu is open and the hamburger button is clicked again
• THEN the mobile menu SHALL close and aria-expanded="false" SHALL be set on the button

Scenario: Mobile menu contains all nav items

• WHEN the mobile menu is open
• THEN it SHALL contain all three page links, the language switcher, and the Connect CTA