mitai-jinkendo/.claude/docs/functional/RESPONSIVE_UI.md

Fachliche Anforderungen: Responsive UI

Modul: parallel zu Features (kein festes Versions-Label)
Status: Fachlich freigegeben, technische Implementierung ausstehend
Letzte Aktualisierung: März 2026

---

1. Überblick

Die App soll vollständig responsive sein und auf allen Bildschirmgrößen optimal funktionieren – vom iPhone über iPad bis zum Desktop-Browser. Die PWA-Funktionalität auf dem iPhone bleibt vollständig erhalten.

---

2. Breakpoints

Bereich	Breite	Layout
Mobile	< 1024px	Bottom Navigation (wie jetzt)
Desktop	≥ 1024px	Sidebar Navigation links, Content rechts

Ein separates Tablet-Layout (768px) wird nicht eingeführt – unterhalb 1024px verhält sich alles wie Mobile.

---

3. Mobile Layout (< 1024px) – unverändert

Das bestehende Mobile-Layout bleibt exakt so wie es ist:

• Bottom Navigation mit Icons + Labels
• Volle Breite, 16px seitliches Padding
• 80px Bottom-Padding für Navigation
• PWA auf iPhone funktioniert wie bisher

---

4. Desktop Layout (≥ 1024px)

4.1 Grundstruktur

┌─────────────────────────────────────────────┐
│  Sidebar (220px)  │  Content (flex 1)        │
│                   │                          │
│  [Logo]           │  Seiteninhalt            │
│                   │  (max-width: 1200px,     │
│  Dashboard        │   zentriert)             │
│  Erfassung        │                          │
│  Verlauf          │                          │
│  Analyse          │                          │
│  Einstellungen    │                          │
│  Admin            │                          │
│                   │                          │
│  [Avatar + Name]  │                          │
└─────────────────────────────────────────────┘

4.2 Sidebar

Position: Fixed links, volle Höhe (100vh)
Breite: 220px
Farben: var(--surface) Hintergrund, var(--border) rechte Trennlinie

Inhalt von oben nach unten:

┌──────────────────┐
│  [Ensō-Logo]     │  ← Icon (40px) + "Mitai Jinkendo" Text
│  Mitai Jinkendo  │
├──────────────────┤
│                  │
│  🏠 Dashboard    │  ← Icons + Text (gleiche Nav-Items wie Bottom Nav)
│  ✏️ Erfassung    │  ← Aktive Seite: var(--accent) Hintergrund (leicht)
│  📊 Verlauf      │     + var(--accent) Text + linke Akzent-Linie (3px)
│  🧠 Analyse      │
│  ⚙️ Einstellungen│
│  👑 Admin        │  ← nur sichtbar wenn role='admin'
│                  │
├──────────────────┤
│  [Avatar]        │  ← Nutzer-Avatar (32px) + Name + Tier-Badge
│  Lars            │
│  selfhosted      │
└──────────────────┘

Aktive Seite hervorheben:

/* Aktiver Nav-Item Desktop */
background: var(--accent-light);   /* #E1F5EE leicht grüner Hintergrund */
color: var(--accent);              /* #1D9E75 grüner Text */
border-left: 3px solid var(--accent);  /* linke Akzent-Linie */
border-radius: 0 8px 8px 0;

4.3 Content-Bereich

• margin-left: 220px (Sidebar-Breite)
• padding: 24px 32px
• max-width: 1200px (zentriert innerhalb des verfügbaren Raums)
• Kein Bottom-Padding für Navigation (Sidebar ersetzt Bottom Nav)

---

5. Seiten-spezifische Desktop-Layouts

5.1 Dashboard

Mobile: Alle Karten untereinander
Desktop: 2-spaltig oder 4-spaltig je nach Kartentyp

┌──────────────────────────────────────────────┐
│  Hallo Lars 👋              Mo, 20. März 2026 │
├──────────┬──────────┬──────────┬─────────────┤
│ Gewicht  │ KF       │ Mager-   │ Kalorien    │
│ 86,1 kg  │ 19,9%    │ masse    │ 1.447 kcal  │
├──────────┴──────────┴──────────┴─────────────┤
│  Ziele                    [Details →]         │
│  ████████░░  Gewicht: 27%  ████░░░░  KF: 45% │
├──────────────────────────────────────────────┤
│  Kalorien + Gewicht (Chart – volle Breite)   │
└──────────────────────────────────────────────┘

5.2 Verlauf

Mobile: Tabs oben, Chart/Tabelle darunter
Desktop: Tabs links als vertikale Liste, Chart/Tabelle rechts

┌────────────┬─────────────────────────────────┐
│ Gewicht ←  │  Chart + Tabelle                │
│ Körperfett │  (nimmt volle rechte Breite)    │
│ Umfänge    │                                 │
│ Ernährung  │                                 │
│ Aktivität  │                                 │
└────────────┴─────────────────────────────────┘

5.3 Analyse

Mobile: Prompt-Liste, dann Ergebnis darunter
Desktop: Prompt-Liste links (300px), Ergebnis rechts

┌──────────────────┬──────────────────────────┐
│  Prompts         │  Ergebnis / Verlauf       │
│  ─────────────   │                          │
│  🔍 Gesamt       │  [Letzte Analyse]        │
│  🫧 Körper  ←    │  [Text der Analyse...]   │
│  🍽️ Ernährung   │                          │
│  🏋️ Training    │  [Ältere Analysen]       │
│  ─────────────   │                          │
│  Pipeline ▶      │                          │
└──────────────────┴──────────────────────────┘

5.4 Erfassung

Mobile: Formular volle Breite
Desktop: Formular zentriert, max-width 600px

┌──────────────────────────────────────────────┐
│           Gewicht erfassen                   │
│                                              │
│     ┌─────────────────────────────┐          │
│     │  Datum    [20.03.2026]      │          │
│     │  Gewicht  [86,1    ] kg     │          │
│     │  Notiz    [         ]       │          │
│     │                             │          │
│     │  [Speichern]                │          │
│     └─────────────────────────────┘          │
└──────────────────────────────────────────────┘

5.5 Admin-Panel

Mobile: Tabellen horizontal scrollbar
Desktop: Tabellen nutzen volle Breite, mehr Spalten sichtbar

---

6. Übergangsverhalten

Fenster-Resize

• Beim Verkleinern unter 1024px: Sidebar verschwindet, Bottom Nav erscheint
• Beim Vergrößern über 1024px: Bottom Nav verschwindet, Sidebar erscheint
• Kein Flackern – CSS media queries, kein JavaScript-Resize-Listener nötig

Aktiver Zustand synchronisiert

• Aktive Seite wird in Sidebar UND Bottom Nav korrekt hervorgehoben
• (Technisch: gleiche State-Variable, unterschiedliches Rendering)

---

7. Was sich nicht ändert

• Farben, CSS-Variablen, Design-Tokens bleiben identisch
• Alle Funktionen bleiben auf Desktop verfügbar
• PWA auf iPhone bleibt vollständig funktionsfähig
• Keine externen CSS-Frameworks (kein Tailwind, kein Bootstrap)
• Inline-Styles + CSS-Variablen-Ansatz bleibt erhalten

---

8. Abgrenzung & offene Fragen

In diesem Modul enthalten:

• Sidebar Navigation Desktop
• Content-Bereich mit max-width
• Dashboard 4-spaltig
• Verlauf 2-spaltig (Tabs + Chart)
• Analyse 2-spaltig (Prompts + Ergebnis)
• Erfassung zentriert schmal
• Admin-Panel breite Tabellen

Nicht in diesem Modul:

• Dark Mode – separates Feature
• Animationen / Transitions – optional später
• Collapsed Sidebar (Icon-only Modus) – optional später

Offene Fragen für technische Planung:

1. Wird AppLayout als neue Wrapper-Komponente eingeführt oder App.jsx direkt angepasst?
2. CSS Media Queries in app.css oder CSS-in-JS (Inline-Style mit window.innerWidth)?
3. Wie wird der aktive Nav-Item-State zwischen Sidebar und Bottom Nav geteilt?
4. Verlauf-Tabs: werden sie zu einer vertikalen Liste refactored oder per CSS umgestaltet?