qumo-website/openspec/changes/step-003-navigation-bar/tasks.md

1. Content strings

• 1.1 Add nav key to website/src/content/en.json with links array (Services/AI Launchpad/About with hrefs), cta: "Connect", ctaHref: "/contact", and langSwitch: { en: "EN", nl: "NL" }
• 1.2 Add nav key to website/src/content/nl.json with Dutch labels (Diensten/AI Launchpad/Over Ons), NL hrefs, cta: "Verbind", ctaHref: "/nl/contact"

2. Nav component — structure and content

• 2.1 Replace the stub in website/src/components/Nav.astro with a <nav id="main-nav"> element: fixed position, full width, high z-index, with data-scrolled="false" attribute
• 2.2 Add locale detection from Astro.url.pathname: const isNl = Astro.url.pathname.startsWith('/nl') and derive locale and alternatePath
• 2.3 Call getContent(locale) and destructure nav strings for use in the template
• 2.4 Inline logo-wide.svg on the left side: change all fill="#161616" attributes to fill="currentColor", wrap in <a> linking to locale homepage (/ or /nl), add class="text-snow" to the <svg>
• 2.5 Render the three nav links from nav.links in the desktop layout (hidden on mobile via hidden md:flex)
• 2.6 Render the language switcher: show current locale as plain text, alternate as <a href={alternatePath}> — both using nav.langSwitch labels
• 2.7 Render the Connect CTA button: <a href={nav.ctaHref}> with label {nav.cta} and inlined wum-arrow.svg icon, styled with border/Snow treatment

3. Nav component — mobile menu

• 3.1 Add hamburger button (3-line SVG icon) visible only on mobile (md:hidden), with id="menu-toggle", aria-expanded="false", aria-controls="mobile-menu"
• 3.2 Add mobile menu panel <div id="mobile-menu"> with slide-in transition classes: starts translated off-screen, transitions to visible when data-open attribute is set
• 3.3 Populate mobile menu with the same nav links, language switcher, and Connect CTA (can share content strings already destructured)

4. Nav component — JavaScript behaviors

• 4.1 Add <script> tag for scroll behavior: listen to window.scroll (passive), toggle data-scrolled attribute on #main-nav when scrollY > 20
• 4.2 Add CSS to global.css (or scoped <style> in Nav) for scroll state: nav[data-scrolled="true"] { background-color: var(--color-midnight); } with transition: background-color 300ms ease
• 4.3 Add <script> tag for mobile menu toggle: clicking #menu-toggle toggles data-open on #mobile-menu and flips aria-expanded on the button

5. Verification

• 5.1 Run cd website && npm run build — build must succeed with no TypeScript errors
• 5.2 Run npm run dev and open the smoke-test page — confirm logo renders in Snow on Midnight background
• 5.3 Verify desktop layout: logo left, three links center, EN/NL + Connect right
• 5.4 Verify scroll behavior: nav transparent at top, Midnight background after scrolling 20px
• 5.5 Resize browser to mobile width — confirm hamburger appears, desktop links hidden
• 5.6 Click hamburger — confirm mobile menu slides in with all nav items
• 5.7 Verify language switcher: on /, NL link points to /nl; on a future /nl/about, EN link would point to /about