Scarriffle/Vorrania
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seitenleiste: "Listen" ist ein Eintrag wie jeder andere

Browse Source 
Die Gruppe sah aus wie eine Abschnittsueberschrift - klein, versal,
gedaempft - und stand damit optisch neben der Leiste statt darin. Jetzt
traegt sie die Klasse .nav-link wie alle anderen Eintraege und misst sich
genauso; nur das Verhalten ist anders, sie klappt auf statt zu navigieren.

In der CSS bleiben deshalb nur die Eigenheiten, die ein <button> braucht.
Alles Sichtbare kommt von .nav-link, damit die Hoehe nicht auseinanderlaeuft,
sobald dort jemand etwas aendert.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-10-02 12:49:37 +02:00
co-authored by Claude Opus 5
parent c66bd0b09e
commit 37ab1ba47d
2 changed files with 8 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/App.jsx
+3 -3
View File
@@ -113,11 +113,11 @@ function Sidebar() {
{/* Auf schmalen Bildschirmen wird die Leiste waagerecht; dort gibt es {/* Auf schmalen Bildschirmen wird die Leiste waagerecht; dort gibt es
keine Abschnitte (styles.css) und die Eintraege stehen flach keine Abschnitte (styles.css) und die Eintraege stehen flach
nebeneinander – zuklappen loest dort kein Platzproblem. */} nebeneinander – zuklappen loest dort kein Platzproblem. */}
<button type="button" className="nav-group" onClick={klappeListen} <button type="button" className="nav-link nav-group" onClick={klappeListen}
aria-expanded={listenOffen || aufEinerListe}> aria-expanded={listenOffen || aufEinerListe}>
<Icon name="chevron" size={14} <Icon name="chevron" size={17}
className={listenOffen || aufEinerListe ? "" : "rot-90"} /> className={listenOffen || aufEinerListe ? "" : "rot-90"} />
<span>Listen</span> <span className="label">Listen</span>
</button> </button>
{LISTEN.map((e) => ( {LISTEN.map((e) => (
<NavLink key={e.to} to={e.to} <NavLink key={e.to} to={e.to}
web/src/styles.css
+5 -8
View File
@@ -1097,17 +1097,14 @@ select.zeitraum:hover { color: var(--text); }
} }
.nav-link.sub.active { font-weight: 600; } .nav-link.sub.active { font-weight: 600; }
/* Zuklappbare Gruppe in der Seitenleiste: sieht aus wie eine /* Zuklappbare Gruppe: sieht aus und misst sich wie jeder andere Eintrag
Abschnittsueberschrift, ist aber ein Knopf. */ (.nav-link), ist aber ein Knopf. Hier stehen deshalb nur die Eigenheiten,
die ein <button> braucht – alles Sichtbare kommt von .nav-link, damit die
Hoehe nicht auseinanderlaeuft, sobald dort jemand etwas aendert. */
.nav-group { .nav-group {
display: flex; align-items: center; gap: var(--sp-2);
width: 100%; background: none; border: none; cursor: pointer; width: 100%; background: none; border: none; cursor: pointer;
padding: var(--sp-4) var(--sp-3) var(--sp-1); font: inherit; text-align: left;
font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--muted); opacity: 0.7;
font-family: inherit; text-align: left;
} }
.nav-group:hover { opacity: 1; }
/* Eingerueckt wie die Dashboard-Unterpunkte, aber mit Platz fuers Symbol. */ /* Eingerueckt wie die Dashboard-Unterpunkte, aber mit Platz fuers Symbol. */
.nav-link.nav-child { padding-left: 26px; font-size: 0.86rem; } .nav-link.nav-child { padding-left: 26px; font-size: 0.86rem; }
.nav-link.nav-zu { display: none; } .nav-link.nav-zu { display: none; }