From 3b505d231a8eb658c4ab065367081ee7b8d6ca57 Mon Sep 17 00:00:00 2001 From: bernd Date: Thu, 13 Aug 2026 08:45:25 +0000 Subject: [PATCH] Restructure dashboard into sidebar navigation with grouped sections MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 20 flat scrolling sections replaced with a 10-item sidebar nav (Übersicht, Mieter, Tickets & Handwerker, Putzplan, WG-Kasse, Inventar & Übergabe, Zugang, Küche & Müll, Dokumente, Verträge & Abrechnung). One page visible at a time, collapsible off-canvas menu on mobile. No backend/API changes. --- web-dashboard/index.html | 314 +++++++++++++++++++++++++++++---------- 1 file changed, 235 insertions(+), 79 deletions(-) diff --git a/web-dashboard/index.html b/web-dashboard/index.html index 5ef28a3..bfaef75 100644 --- a/web-dashboard/index.html +++ b/web-dashboard/index.html @@ -328,6 +328,77 @@ border: 1px solid var(--border); } .inventory-thumb-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } + + /* --- App shell / sidebar navigation --- */ + .app-shell { display: flex; align-items: flex-start; min-height: 100vh; } + .sidebar { + flex: 0 0 232px; + width: 232px; + background: var(--card-bg); + border-right: 1px solid var(--border); + min-height: 100vh; + padding: 18px 12px; + position: sticky; + top: 0; + } + .sidebar-brand { padding: 6px 10px 18px; font-weight: 700; font-size: 14.5px; } + .sidebar-brand span { display: block; font-weight: 400; color: var(--text-muted); font-size: 11.5px; margin-top: 2px; } + .sidebar nav { display: flex; flex-direction: column; gap: 2px; } + .nav-item { + display: flex; + align-items: center; + gap: 10px; + width: 100%; + padding: 10px 12px; + border: none; + background: transparent; + border-radius: 8px; + font-family: inherit; + font-size: 13.5px; + color: var(--text); + text-align: left; + cursor: pointer; + } + .nav-item .nav-icon { font-size: 15px; width: 18px; text-align: center; } + .nav-item:hover { background: var(--bg); } + .nav-item.active { background: var(--green-bg); color: var(--green); font-weight: 600; } + + .content-area { flex: 1; min-width: 0; } + .page { display: none; } + .page.active { display: block; } + + .hamburger-btn { + display: none; + border: 1px solid var(--border); + background: var(--card-bg); + border-radius: 8px; + padding: 8px 11px; + font-size: 15px; + cursor: pointer; + box-shadow: var(--shadow); + } + .sidebar-overlay { display: none; } + + @media (max-width: 880px) { + .sidebar { + position: fixed; + top: 0; left: 0; bottom: 0; + z-index: 60; + transform: translateX(-100%); + transition: transform 0.2s ease; + box-shadow: 4px 0 14px rgba(0,0,0,0.12); + } + .sidebar.open { transform: translateX(0); } + .hamburger-btn { display: inline-flex; } + .sidebar-overlay { + display: none; + position: fixed; + inset: 0; + background: rgba(0,0,0,0.32); + z-index: 50; + } + .sidebar-overlay.open { display: block; } + } @@ -383,26 +454,56 @@
-
- - -
+ -
-
-

WG Nackenheim — Vermieter-Cockpit

-

170 qm · 4 Zimmer · Einzelzimmervermietung

-
-
-
–
- -
-
+
+ -
- +
+
+ + + +
-
+
+
+

WG Nackenheim — Vermieter-Cockpit

+

170 qm · 4 Zimmer · Einzelzimmervermietung

+
+
+
–
+ +
+
+ +
+ + +
+
+ +
+

Miet-Ampel je Zimmer

+
+
+
+ +
-
-

Miet-Ampel je Zimmer

-
+
+

Mieter-Bewertung

+
+ +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+
+ +
+

Schaden melden

@@ -474,6 +606,37 @@
+
+

Handwerker-Kontakte

+ +
+
+ +
+ +
+ +
+ +
+

WG-Kasse (Ausgaben-Teiler)

@@ -572,6 +739,10 @@

+
+ +
+

Inventarverwaltung

+
+ +
+

Smart-Lock-Gastcodes

@@ -649,6 +824,10 @@
+
+ +
+

Küchen-/Schrankplaner

+
+ +
+

Dokumenten-Safe & Tutorials

+
+ +
+

Kündigungsfristen

Zeigt für befristete Mietverträge, bis wann spätestens gekündigt werden muss.

@@ -741,65 +928,10 @@
-
-

Handwerker-Kontakte

- -
-
- -
-

Mieter-Bewertung

-
- -
-
- - -
-
- - -
-
- - -
- -
-
- -
-
+
+ +
+