scripte/MABEA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Sidebar-Layout statt Topbar (Vorbild OpenFleet-Dashboard-Screenshot)
CI / backend-tests (push) Failing after 1m53s
Details
CI / frontend-build (push) Successful in 17s
Details

Browse Source 
Nutzer hat Screenshot von openfleet's Dashboard geschickt: linke Sidebar-Nav
statt Topbar, KPI-Kacheln mit Icon-Box/großer Zahl, sehr flach. Layout-Wechsel
komplett über CSS (.app-shell Reihe statt Spalte, .topbar wird zur
vertikalen 230px-Sidebar) - AppShell.tsx unverändert, kein JSX-Umbau nötig.

Unter 768px klappt es zurück auf die bisherige horizontale Topbar (Mobile-
Durchgang bleibt gültig, nur die Desktop-Optik ändert sich).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KC8HYvv6UkCVYheYiTw9DD
This commit is contained in:
patrick
2026-09-05 15:10:45 +02:00
co-authored by Claude Sonnet 5
parent 024576cdc1
commit 95e04b521b
1 changed files with 41 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/global.css
+41 -14
View File
@@ -84,46 +84,56 @@ a {
/* -- Layout ------------------------------------------------------------- */ /* -- Layout ------------------------------------------------------------- */
/* Sidebar-Layout (Redesign 3. Durchgang, Vorbild OpenFleet-Screenshot):
.app-shell steht ab Desktop-Breite als Reihe (Sidebar links, Seite rechts),
.topbar ist trotz Klassennamen die Sidebar selbst - kein JSX-Umbau nötig,
AppShell.tsx bleibt unverändert, nur die Werte hier drehen das Layout.
Unter 768px kippt es zurück auf die bisherige horizontale Topbar-Leiste
(siehe Media-Query unten), da der Mobile-Durchgang das schon gut löste. */
.app-shell { .app-shell {
min-height: 100%; min-height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: row;
} }
.topbar { .topbar {
background: var(--color-surface); background: var(--color-surface);
border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
padding: 0.7rem 1.5rem; padding: 1.25rem 1rem;
display: flex; display: flex;
align-items: center; flex-direction: column;
justify-content: space-between; align-items: stretch;
gap: 1rem; gap: 1.5rem;
width: 230px;
flex: 0 0 230px;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 10; height: 100vh;
box-shadow: var(--shadow-sm); overflow-y: auto;
} }
.topbar-brand { .topbar-brand {
font-weight: 800; font-weight: 800;
font-size: 1.2rem; font-size: 1.15rem;
letter-spacing: -0.02em; letter-spacing: -0.02em;
color: var(--color-primary); color: var(--color-primary);
text-decoration: none; text-decoration: none;
padding: 0 0.5rem;
} }
.topbar-nav { .topbar-nav {
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 0.25rem; align-items: stretch;
flex-wrap: wrap; gap: 0.15rem;
} }
.topbar-nav a { .topbar-nav a {
color: var(--color-text-muted); color: var(--color-text-muted);
text-decoration: none; text-decoration: none;
padding: 0.45rem 0.8rem; padding: 0.55rem 0.75rem;
border-radius: 999px; border-radius: var(--radius-sm);
font-size: 0.92rem; font-size: 0.92rem;
font-weight: 600; font-weight: 600;
transition: background-color 0.15s ease, color 0.15s ease; transition: background-color 0.15s ease, color 0.15s ease;
@@ -505,12 +515,29 @@ select.input:focus {
padding: 1.25rem 1rem 2rem; padding: 1.25rem 1rem 2rem;
} }
/* Sidebar -> horizontale Topbar zurückklappen (Mobile-Durchgang) */
.app-shell {
flex-direction: column;
}
.topbar { .topbar {
flex-direction: row;
align-items: center;
justify-content: space-between;
width: auto;
flex: 0 0 auto;
height: auto;
position: sticky;
padding: 0.6rem 0.9rem; padding: 0.6rem 0.9rem;
border-right: none;
border-bottom: 1px solid var(--color-border);
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem;
} }
.topbar-nav { .topbar-nav {
flex-direction: row;
flex-wrap: wrap;
gap: 0.15rem; gap: 0.15rem;
} }