37 lines
3.2 KiB
Markdown
37 lines
3.2 KiB
Markdown
## 1. Content strings
|
|
|
|
- [x] 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" }`
|
|
- [x] 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
|
|
|
|
- [x] 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
|
|
- [x] 2.2 Add locale detection from `Astro.url.pathname`: `const isNl = Astro.url.pathname.startsWith('/nl')` and derive `locale` and `alternatePath`
|
|
- [x] 2.3 Call `getContent(locale)` and destructure `nav` strings for use in the template
|
|
- [x] 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>`
|
|
- [x] 2.5 Render the three nav links from `nav.links` in the desktop layout (hidden on mobile via `hidden md:flex`)
|
|
- [x] 2.6 Render the language switcher: show current locale as plain text, alternate as `<a href={alternatePath}>` — both using `nav.langSwitch` labels
|
|
- [x] 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
|
|
|
|
- [x] 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"`
|
|
- [x] 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
|
|
- [x] 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
|
|
|
|
- [x] 4.1 Add `<script>` tag for scroll behavior: listen to `window.scroll` (passive), toggle `data-scrolled` attribute on `#main-nav` when `scrollY > 20`
|
|
- [x] 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`
|
|
- [x] 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
|
|
|
|
- [x] 5.1 Run `cd website && npm run build` — build must succeed with no TypeScript errors
|
|
- [x] 5.2 Run `npm run dev` and open the smoke-test page — confirm logo renders in Snow on Midnight background
|
|
- [x] 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
|
|
- [x] 5.5 Resize browser to mobile width — confirm hamburger appears, desktop links hidden
|
|
- [x] 5.6 Click hamburger — confirm mobile menu slides in with all nav items
|
|
- [x] 5.7 Verify language switcher: on `/`, NL link points to `/nl`; on a future `/nl/about`, EN link would point to `/about`
|