From 95e04b521ba79bbd102b2a04436191bdf345c63d Mon Sep 17 00:00:00 2001
From: patrick <patrick@perlbach24.de>
Date: Sat, 5 Sep 2026 15:10:45 +0200
Subject: [PATCH] style: Sidebar-Layout statt Topbar (Vorbild
 OpenFleet-Dashboard-Screenshot)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 frontend/src/styles/global.css | 55 +++++++++++++++++++++++++---------
 1 file changed, 41 insertions(+), 14 deletions(-)

diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index c08fc4e..2ae89bc 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -84,46 +84,56 @@ a {
 
 /* -- 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 {
   min-height: 100%;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
 }
 
 .topbar {
   background: var(--color-surface);
-  border-bottom: 1px solid var(--color-border);
-  padding: 0.7rem 1.5rem;
+  border-right: 1px solid var(--color-border);
+  padding: 1.25rem 1rem;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 1.5rem;
+  width: 230px;
+  flex: 0 0 230px;
   position: sticky;
   top: 0;
-  z-index: 10;
-  box-shadow: var(--shadow-sm);
+  height: 100vh;
+  overflow-y: auto;
 }
 
 .topbar-brand {
   font-weight: 800;
-  font-size: 1.2rem;
+  font-size: 1.15rem;
   letter-spacing: -0.02em;
   color: var(--color-primary);
   text-decoration: none;
+  padding: 0 0.5rem;
 }
 
 .topbar-nav {
   display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.15rem;
 }
 
 .topbar-nav a {
   color: var(--color-text-muted);
   text-decoration: none;
-  padding: 0.45rem 0.8rem;
-  border-radius: 999px;
+  padding: 0.55rem 0.75rem;
+  border-radius: var(--radius-sm);
   font-size: 0.92rem;
   font-weight: 600;
   transition: background-color 0.15s ease, color 0.15s ease;
@@ -505,12 +515,29 @@ select.input:focus {
     padding: 1.25rem 1rem 2rem;
   }
 
+  /* Sidebar -> horizontale Topbar zurückklappen (Mobile-Durchgang) */
+  .app-shell {
+    flex-direction: column;
+  }
+
   .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;
+    border-right: none;
+    border-bottom: 1px solid var(--color-border);
     flex-wrap: wrap;
+    gap: 0.75rem;
   }
 
   .topbar-nav {
+    flex-direction: row;
+    flex-wrap: wrap;
     gap: 0.15rem;
   }