94 lines
5.1 KiB
Markdown
94 lines
5.1 KiB
Markdown
## ADDED 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
|