# UI Responsive

Mache die App vollständig responsive – Mobile, Tablet und Desktop.

## Ziel-Design
```
iPhone  (<768px):  Bottom Navigation, volle Breite (wie jetzt)
iPad    (768-1024px): Bottom Navigation, 2-spaltige Cards
Desktop (>1024px): Sidebar Navigation links, Content rechts, volle Breite
```

## Wichtige Regel:
**Erst planen, dann umsetzen.** Zeige den Plan und warte auf Bestätigung.

## Schritt 1: Analyse
Analysiere folgende Dateien:
- `frontend/src/app.css` – aktuelle CSS-Variablen und globale Styles
- `frontend/src/App.jsx` – Navigation und Layout-Struktur
- `frontend/src/pages/Dashboard.jsx` – repräsentative Seite

## Schritt 2: Plan vorlegen
Zeige:
1. Welche CSS-Breakpoints werden eingeführt
2. Wie ändert sich die Navigation (Bottom ? Sidebar)
3. Welche Komponenten müssen angepasst werden
4. Geschätzter Aufwand

## Schritt 3: CSS-Variablen und Breakpoints

Neue Breakpoints in `app.css`:
```css
/* Breakpoints */
--bp-mobile:  768px;
--bp-tablet: 1024px;

/* Layout */
--sidebar-width: 220px;
--content-max-width: 1200px;
```

## Schritt 4: Layout-Komponente erstellen

Neue Datei `frontend/src/components/AppLayout.jsx`:
```jsx
// Erkennt Screen-Größe und rendert:
// - Mobile/Tablet: Bottom Navigation (wie jetzt)
// - Desktop: Sidebar Navigation + Content-Bereich
```

## Schritt 5: Navigation anpassen

**Mobile (wie jetzt):**
```jsx
<nav style={{position:'fixed', bottom:0, ...}}>
  {navItems}
</nav>
```

**Desktop (neu):**
```jsx
<aside style={{
  position:'fixed', left:0, top:0,
  width:'var(--sidebar-width)',
  height:'100vh',
  background:'var(--surface)',
  borderRight:'1px solid var(--border)'
}}>
  {/* Logo */}
  {/* Nav Items vertikal */}
  {/* User Info unten */}
</aside>
<main style={{
  marginLeft:'var(--sidebar-width)',
  padding:'24px',
  minHeight:'100vh'
}}>
  {children}
</main>
```

## Schritt 6: Cards responsiv machen

```css
/* Mobile: 1 Spalte */
.metric-grid { 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Desktop: 4 Spalten */
@media (min-width: 1024px) {
  .metric-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
```

## Schritt 7: Testen
```bash
# Frontend build testen
cd frontend && npm run build
```

Browser-Test auf:
- iPhone (375px) – Safari
- iPad (768px) – Browser DevTools
- Desktop (1440px) – Browser normal

## Jinkendo Design-Regeln beibehalten:
- Farben: var(--accent) #1D9E75, var(--bg), var(--surface)
- Border-Radius: 12px Cards, 8px Buttons
- Keine externen CSS-Frameworks
- Inline-Styles + globale CSS-Variablen
- PWA auf iPhone muss weiterhin funktionieren

## Nach dem Umbau:
- Commit mit `feat: responsive layout – sidebar on desktop`
- Push auf develop
- Testen auf dev.mitai.jinkendo.de auf verschiedenen Screens
- Erst nach Freigabe: /merge-to-prod