App-Shell

Status: Entwurf · Referenz: clickdummy/src/components/AppShell.tsx

Grundlayout der Workbench. Drei Spalten: Sidebar, Main, optional rechte TOC.

Aufbau

• Sidebar: 232 px breit, sticky, vollhöhe. Logo + Workspace-Switch, Navigations-Items, Footer mit Avatar.
• Topbar: 56 px hoch, sticky, halbtransparent mit Backdrop-Blur. Breadcrumbs links, Search/Help rechts.
• Content: nutzt die volle Restbreite (kein Max-Width). Padding 28 px oben, 32 px seitlich.

Navigations-Gruppen

1. Workspace — Dashboard, Liegenschaften, Cases.
2. Konfiguration — Stammdaten, Modelle.
3. Demo — Reset-Aktion (nur im Klickdummy).

Die User-Rolle entscheidet, welche Gruppen sichtbar sind. Modellierer sehen Konfiguration, Auditor nur Read-only-Sichten.

Verhalten

• Hash-Routing reicht im Klickdummy. Im Produktiv-System normales Routing.
• Beim Wechsel zwischen Top-Level-Bereichen behält die Sidebar Scroll-Position (Sidebar ist eigenständig scrollbar).
• Keine Begrüßungs-Hero, keine Marketing-Decken — direkt in die Arbeit.

Verwandte Dokumente

• 02-dashboard.md
• ../10-design-system/02-components.md