Discoverable menu button and visible page titles #290

Merged

robbertbos merged 1 commit from menu-and-headers into main 2026-08-12 19:28:51 +00:00

Conversation 0 Commits 1 Files changed 30 +937 -524

robbertbos commented 2026-08-10 21:25:05 +00:00

Owner

Copy link

What

• The menu sits behind a labeled "Menu" button (nldd-button, popup slot, no chevron): fixed top right on a wide screen - below any status banner, level with the wordmark until that scrolls away - and beside the wordmark on a phone, where it scrolls off with the page. NLDD owns the anchoring, toggling and ARIA.
• Menu navigation items are real links: plain click stays in the SPA, cmd/ctrl-click opens a new tab, Space activates like Enter. The overview pages sit under an "Overzichten" group label. The menu is its own component (AppMenu) because two triggers can carry it.
• The wordmark is a plain link to the Inbox above the page (accessible name "Waggle, naar de inbox"), centred on a wide screen and left below 641px, on the same responsive type scale as the page title so the two never drift apart.
• Inbox, Leeslijst and Instellingen get a visible h1 (nldd-title size 3 app-wide; section h2s stay 4), and document.title follows the route ("Inbox - Waggle"). AccountVerwijderd drops its hand-rolled title.
• One page column, defined once in base.css and expressed in NLDD's own page-section gutter tokens on NLDD's breakpoints: the header row, page titles, search row, card list and retention banner all consume it instead of each repeating the same rule.
• The inbox tour starts at the sections step and its steps are numbered 1-7 again; a button that says "Menu" needs no coach-mark.
• Dev builds only: the user switcher leaves the header for a fixed corner button bottom-right (it covered the brand on narrow screens); users become radio items in an NLDD menu, with "Onboarding opnieuw" below them.
• Fixed along the way: a card moved with the keyboard could stop half under the fold, because scrollIntoView({block: "nearest"}) does nothing once any part of the element is on screen. The section now aligns the clipped edge and cards carry scroll-margin.
• E2e: a header spec (SPA marker, new-tab modifier click, headings, tab titles), a spec for the scrolling wordmark and the fixed button that clears the banner, and the landmarks scan now enforces page-has-heading-one on all nine routes.

Why

Direct user feedback: nobody recognized the centered wordmark as the menu - the coach-mark explaining it was the symptom, not the fix - and persistent chrome over the reading column costs the most on a phone. The design follows NN/g findings (centered logos, hidden desktop navigation, labeled menu buttons) and NLDD's own idioms: the menu affordance is literally the word "Menu" with the menu icon, the gutters are NLDD's page-section tokens, and the brand type rides NLDD's display scale.

Verification

• vue-tsc clean, 1089 unit tests, eslint 0 errors, production build ok
• Full Playwright e2e green (95 passed, 3 pre-existing skips)
• Visual pass on a hash-verified preview build at 390/640/760/1200 widths: menu button placement against the banner, gutter alignment, header baselines and brand proportions measured, not eyeballed; dev user switching exercised end-to-end

Follow-ups

• Focus move to the h1 on route change (deliberately out of scope)
• Onboarding coach-marks jump while async layers load: #289

Closes #230.

## What - The menu sits behind a labeled "Menu" button (nldd-button, popup slot, no chevron): fixed top right on a wide screen - below any status banner, level with the wordmark until that scrolls away - and beside the wordmark on a phone, where it scrolls off with the page. NLDD owns the anchoring, toggling and ARIA. - Menu navigation items are real links: plain click stays in the SPA, cmd/ctrl-click opens a new tab, Space activates like Enter. The overview pages sit under an "Overzichten" group label. The menu is its own component (AppMenu) because two triggers can carry it. - The wordmark is a plain link to the Inbox above the page (accessible name "Waggle, naar de inbox"), centred on a wide screen and left below 641px, on the same responsive type scale as the page title so the two never drift apart. - Inbox, Leeslijst and Instellingen get a visible h1 (nldd-title size 3 app-wide; section h2s stay 4), and document.title follows the route ("Inbox - Waggle"). AccountVerwijderd drops its hand-rolled title. - One page column, defined once in base.css and expressed in NLDD's own page-section gutter tokens on NLDD's breakpoints: the header row, page titles, search row, card list and retention banner all consume it instead of each repeating the same rule. - The inbox tour starts at the sections step and its steps are numbered 1-7 again; a button that says "Menu" needs no coach-mark. - Dev builds only: the user switcher leaves the header for a fixed corner button bottom-right (it covered the brand on narrow screens); users become radio items in an NLDD menu, with "Onboarding opnieuw" below them. - Fixed along the way: a card moved with the keyboard could stop half under the fold, because `scrollIntoView({block: "nearest"})` does nothing once any part of the element is on screen. The section now aligns the clipped edge and cards carry `scroll-margin`. - E2e: a header spec (SPA marker, new-tab modifier click, headings, tab titles), a spec for the scrolling wordmark and the fixed button that clears the banner, and the landmarks scan now enforces page-has-heading-one on all nine routes. ## Why Direct user feedback: nobody recognized the centered wordmark as the menu - the coach-mark explaining it was the symptom, not the fix - and persistent chrome over the reading column costs the most on a phone. The design follows NN/g findings (centered logos, hidden desktop navigation, labeled menu buttons) and NLDD's own idioms: the menu affordance is literally the word "Menu" with the `menu` icon, the gutters are NLDD's page-section tokens, and the brand type rides NLDD's display scale. ## Verification - vue-tsc clean, 1089 unit tests, eslint 0 errors, production build ok - Full Playwright e2e green (95 passed, 3 pre-existing skips) - Visual pass on a hash-verified preview build at 390/640/760/1200 widths: menu button placement against the banner, gutter alignment, header baselines and brand proportions measured, not eyeballed; dev user switching exercised end-to-end ## Follow-ups - Focus move to the h1 on route change (deliberately out of scope) - Onboarding coach-marks jump while async layers load: #289 Closes #230.

robbertbos added 1 commit 2026-08-10 21:25:05 +00:00

Move the menu behind a labeled button and give pages visible titles ... 85a8f7f03d

The centered wordmark was the only menu trigger and nobody recognized
it as one - a coach-mark existed just to explain it.

- The wordmark sits left as a home link ("Waggle, naar de inbox");
  next to it a labeled Menu button (nldd-button lg, popup slot, no
  chevron) owns the dropdown: anchoring, toggling and ARIA come from
  NLDD instead of hand-written wiring.
- Menu navigation items are real links: plain click routes through the
  SPA, cmd/ctrl-click opens a new tab, Space activates like Enter. The
  overview pages sit under an "Overzichten" group label.
- Inbox, Leeslijst and Instellingen get a visible h1. Page titles are
  nldd-title size 3 app-wide (section h2s stay 4), aligned to their
  content columns across breakpoints; Settings mirrors the section
  padding via a container query.
- document.title follows the route ("Inbox - Waggle") via route meta
  and one afterEach; AccountVerwijderd drops its hand-rolled title.
- The inbox tour starts at the sections step: a button that says
  "Menu" needs no coach-mark.
- E2e: a header spec (SPA marker, new-tab modifier click, headings,
  tab titles) and the landmarks scan now enforces page-has-heading-one
  on all nine routes.

Closes #230.

robbertbos force-pushed menu-and-headers from 85a8f7f03d to 7d89ca4acb 2026-08-10 21:39:24 +00:00 Compare

robbertbos force-pushed menu-and-headers from 7d89ca4acb to a8f3c2a88c 2026-08-11 13:45:56 +00:00 Compare

robbertbos force-pushed menu-and-headers from a8f3c2a88c to 43e3beb625 2026-08-11 14:07:57 +00:00 Compare

robbertbos force-pushed menu-and-headers from 43e3beb625 to 225d337be5 2026-08-11 14:27:37 +00:00 Compare

robbertbos force-pushed menu-and-headers from 225d337be5 to 24c29c1bfa 2026-08-11 14:39:00 +00:00 Compare

robbertbos force-pushed menu-and-headers from 24c29c1bfa to 50b86968a1 2026-08-11 15:08:04 +00:00 Compare

robbertbos force-pushed menu-and-headers from 50b86968a1 to 578900f0f5 2026-08-11 15:38:19 +00:00 Compare

robbertbos force-pushed menu-and-headers from 578900f0f5 to b85dd69855 2026-08-11 15:56:00 +00:00 Compare

robbertbos force-pushed menu-and-headers from b85dd69855 to 4a6912d288 2026-08-11 17:04:16 +00:00 Compare

robbertbos force-pushed menu-and-headers from 4a6912d288 to 9051ef58ce 2026-08-11 17:25:30 +00:00 Compare

robbertbos force-pushed menu-and-headers from 9051ef58ce to 9b2cbd2f54 2026-08-11 17:46:02 +00:00 Compare

robbertbos force-pushed menu-and-headers from 9b2cbd2f54 to d52076bad2 2026-08-11 21:05:23 +00:00 Compare

robbertbos force-pushed menu-and-headers from d52076bad2 to f45f7f6bd0 2026-08-11 21:30:02 +00:00 Compare

robbertbos merged commit f45f7f6bd0 into main 2026-08-12 19:28:51 +00:00

robbertbos deleted branch menu-and-headers 2026-08-12 19:28:51 +00:00

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

bug

Something is not working

  

duplicate

This issue or pull request already exists

  

enhancement

New feature

  

help wanted

Need some help

  

invalid

Something is wrong

  

nldd ds

  

question

More information is needed

  

wontfix

This won't be fixed

No labels

bug

duplicate

enhancement

help wanted

invalid

nldd ds

question

wontfix

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

robbertbos/waggle!290

No description provided.