Kategorie-Dropdowns aufgehübscht (waren schlichte graue Kästen)

Gleicher gläserner Dropdown-Stil wie beim Sprachschalter, aber im
Farbton der jeweiligen Kategorie statt neutral: dunkle Karte mit
farbigem Schein (--brand-1/--brand-2, jetzt am .nav-group statt am
Button gesetzt, damit Button-Aurora UND Dropdown denselben Farbklang
teilen), Einträge mit farbigem linkem Rand + leichtem Rutsch-Effekt bei
Hover statt der vorherigen einfachen grauen Hervorhebung.
This commit is contained in:
2026-08-02 16:39:26 +02:00
parent 05e3528430
commit 9d3efeae70
2 changed files with 31 additions and 11 deletions
+6 -2
View File
@@ -258,9 +258,13 @@
return `<a class="nav-flat${farbklasse}${isActive(item.href) ? " active" : ""}" href="${item.href}">${t(item.key)}</a>`;
}
const activeChild = item.children.some((c) => isActive(c.href));
// Farbklasse sitzt am äußeren .nav-group, nicht am Button — so
// erben Button-Aurora UND Dropdown (beides Kinder von .nav-group)
// dieselben --brand-1/--brand-2-Variablen für einen einheitlichen
// Farbklang zwischen Kategorie-Knopf und aufgeklapptem Menü.
return `
<div class="nav-group${activeChild ? " open-hint" : ""}">
<button type="button" class="${farbklasse.trim()}" aria-expanded="false">${t(item.key)} <span aria-hidden="true">▾</span></button>
<div class="nav-group${farbklasse}${activeChild ? " open-hint" : ""}">
<button type="button" aria-expanded="false">${t(item.key)} <span aria-hidden="true">▾</span></button>
<div class="nav-dropdown">
${item.children
.map(