Responsive Layout – Mobile Bottom Navigation und Shell-Struktur
ID: FE-010 · Service: frontend · Status: 🟢 aktiv
Die App verwendet auf mobilen Geräten (< 768px) eine feste Bottom Navigation anstelle einer Sidebar. Die Shell-Struktur verhindert seitenweites Scrollen; nur der Content-Bereich scrollt vertikal. Ab 768px wird eine persistente linke Sidebar angezeigt und die Bottom Navigation ausgeblendet.
Typ
functional
Mobile Layout
| Feld | Wert |
|---|---|
| Shell | .shell hat height: 100dvh und overflow: hidden. Dadurch wächst das Shell-Element nie über den Viewport hinaus – die Bottom Navigation bleibt immer am unteren Bildschirmrand fixiert. Nur .view-content (flex: 1, overflow-y: auto) scrollt vertikal. |
| Topbar | Fixierter oberer Bereich mit Wordmark (linke Seite), Dark-Mode-Toggle, Bell-Icon und Avatar-Circle (rechte Seite). Wird auf Desktop ausgeblendet. |
| Bottom Navigation | .bottomnav: fester unterer Bereich (flex-shrink: 0) mit 5 Tabs: Home · Trading · Mittag · Alerts · Admin. Insets: padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) für iPhone Safe Area. Aktiver Tab erhält border-top: 2px solid var(--accent); color: var(--accent). Mittagessen-Tab nutzt var(--lunch) statt var(--accent). Auf Desktop ausgeblendet (display: none ab 768px). |
| Subnav | Horizontale Tab-Leiste (.subnav) unterhalb der Topbar für Unter-Ansichten innerhalb der Trading- und Admin-Gruppen. Horizontal scrollbar, kein sichtbarer Scrollbalken. Aktiver Tab: .subnav-tab.active mit accent-Farbe. |
| Max Width | .shell max-width: 480px, zentriert via margin: 0 auto. Verhindert übermäßige Breite auf Tablets im Hochformat. |
Desktop Layout
| Feld | Wert |
|---|---|
| Trigger | @media (min-width: 768px) |
| Shell | flex-direction: row; height: 100dvh; max-width: none. Sidebar links (220px), Main-Area rechts. |
| Sidebar | display: flex; width: 220px; position: sticky; top: 0; height: 100dvh. Enthält Wordmark, vertikale Nav-Items mit border-left-Akzent, Footer mit Avatar. |
| Topbar Bottomnav | display: none – werden auf Desktop nicht angezeigt |
| Content | .view-content erhält padding-bottom: 24px (statt 1rem auf Mobile). |
Breakpoints
| Feld | Wert |
|---|---|
| Mobile | < 768px – Bottom Nav, Topbar, Shell overflow:hidden |
| Desktop | >= 768px – Sidebar persistent, kein Topbar/BottomNav |
Abnahmekriterien
- [ ] Bottom Navigation bleibt auf mobilen Geräten immer am unteren Bildschirmrand sichtbar
- [ ] Kein seitenweites Scrollen auf Mobile – nur der Content-Bereich scrollt
- [ ] Bottom Navigation scrollt nicht mit dem Inhalt weg
- [ ] 5 Tabs in der Bottom Navigation (Home, Trading, Mittag, Alerts, Admin)
- [ ] Aktiver Tab ist visuell hervorgehoben (accent border-top + Farbe)
- [ ] {'Auf Desktop': 'Sidebar persistent sichtbar, Bottom Nav ausgeblendet'}
- [ ] Kein horizontales Scrollen in der Haupt-Content-Area
- [ ] Safe Area Insets für iPhone X+ werden berücksichtigt
Changelog
Eintrag 1
Version: 1.0
Changes: Initiale Version – Hamburger-Sidebar-Konzept für Mobile
Eintrag 2
Version: 2.0
Changes
Vollständig überarbeitet: Hamburger-Sidebar durch Bottom Navigation ersetzt. Shell-Struktur (height: 100dvh; overflow: hidden) dokumentiert, die verhindert dass die Bottom Navigation wegscrollt. Topbar-Elemente, Subnav-Tabs und Desktop-Sidebar-Layout beschrieben.