design: Hamburger-menu (#menu-btn + #quiz-menu) naar Routekaart-stijl #113

New issue

Closed

opened 2026-04-21 23:09:25 +02:00 by Ghost · 1 comment

Ghost commented

2026-04-21 23:09:25 +02:00

(Migrated from codeberg.org)

Het hamburger-menu in de quiz-title-bar (#menu-btn + dropdown #quiz-menu) gebruikt nog de legacy donkerblauwe styling (`#8ab4f8` icoon, dark dropdown met `#c8d8f8` tekst). Valt uit de toon tegen de nieuwe zand-bg + Luckiest Guy titel na #101.

Scope

#menu-btn icoon naar chunky ink-variant (bv. border-thin, var(--color-ink), padding 4-6px, radius-6).
#quiz-menu dropdown als mini paper-card: `--color-paper` bg, `--border-hero`, `--shadow-sm`, radius-10.
Items: `font-body` 700, color ink, hover = sky-highlight of paper-darker.
Iconen (🔄🗺️💬) behouden.

Out of scope

Functioneel gedrag (openen/sluiten / routing-acties blijven ongewijzigd).
Mobiele full-screen-variant van het menu (indien ooit gewenst — apart ticket).

Tests

`tests/navigation.spec.js` "hamburger menu > andere quiz kiezen" blijft groen (selectors ongewijzigd).

Follow-up op #101 (v2.21.0).

Het hamburger-menu in de quiz-title-bar (`#menu-btn` + dropdown `#quiz-menu`) gebruikt nog de legacy donkerblauwe styling (\`#8ab4f8\` icoon, dark dropdown met \`#c8d8f8\` tekst). Valt uit de toon tegen de nieuwe zand-bg + Luckiest Guy titel na #101. ## Scope - `#menu-btn` icoon naar chunky ink-variant (bv. border-thin, var(--color-ink), padding 4-6px, radius-6). - `#quiz-menu` dropdown als mini paper-card: \`--color-paper\` bg, \`--border-hero\`, \`--shadow-sm\`, radius-10. - Items: \`font-body\` 700, color ink, hover = sky-highlight of paper-darker. - Iconen (🔄🗺️💬) behouden. ## Out of scope - Functioneel gedrag (openen/sluiten / routing-acties blijven ongewijzigd). - Mobiele full-screen-variant van het menu (indien ooit gewenst — apart ticket). ## Tests - \`tests/navigation.spec.js\` "hamburger menu > andere quiz kiezen" blijft groen (selectors ongewijzigd). Follow-up op #101 (v2.21.0).

Ghost commented

2026-04-22 09:03:40 +02:00

(Migrated from codeberg.org)

Fixed in v2.23.0 — chunky ink-button + paper-card dropdown met sky-hover.