Lars
6c7c24e887
All checks were successful
Deploy Development / deploy (push) Successful in 48s
Test Suite / pytest-backend (push) Successful in 45s
Test Suite / lint-backend (push) Successful in 1s
Test Suite / build-frontend (push) Successful in 15s
Test Suite / k6 /health Baseline (push) Successful in 34s
Test Suite / playwright-tests (push) Successful in 1m35s
Document cross-app architecture patterns, Mitai alignment, and family entitlement standards. Documentation only; no runtime changes. Co-authored-by: Cursor <cursoragent@cursor.com>
108 lines
3.9 KiB
Markdown
108 lines
3.9 KiB
Markdown
# Navigation / IA – Designprinzipien (Extraktion)
|
||
|
||
**Status:** Analyse / Arbeitspapier
|
||
**Stand:** 2026-07-04
|
||
**Geltungsbereich:** Modul „Navigation & Information Architecture“
|
||
|
||
**Serie:** Designprinzipien für Produktfamilie · Shinkan Dokument 12 von 15
|
||
**Mitai-Vergleich:** [NAVIGATION_IA_DESIGN_PRINCIPLES.md](file:///c:/Dev/mitai-jinkendo/.claude/docs/technical/NAVIGATION_IA_DESIGN_PRINCIPLES.md) (#8)
|
||
|
||
**Kernkomponenten:**
|
||
|
||
| Bereich | Pfade |
|
||
|---------|-------|
|
||
| Hauptnav | `frontend/src/config/appNav.js` |
|
||
| Admin-Nav | `frontend/src/components/AdminPageNav.jsx` |
|
||
| Shells | `RequireAdmin`, App-Layout in `App.jsx` |
|
||
| Return-Kontext | `.claude/docs/technical/NAV_RETURN_CONTEXT_SPEC.md` |
|
||
| Styles | `frontend/src/app.css` (`.admin-top-nav`, Bottom-Nav) |
|
||
|
||
---
|
||
|
||
## Modul
|
||
|
||
**Navigation / IA**
|
||
|
||
Single Source of Truth für Hauptnavigation (Mobile Bottom + Desktop Sidebar), separater Admin-Hub, Onboarding-Nav ohne Vereinsfeatures, rollen- und kontextabhängige Einblendung (Posteingang, Admin).
|
||
|
||
---
|
||
|
||
## Designprinzipien
|
||
|
||
### 1. `appNav.js` als SSoT für Hauptnavigation
|
||
|
||
| | |
|
||
|---|---|
|
||
| **Prinzip** | `getMainNavItems(isAdmin, opts)` liefert Route, Label, Icon — eine Liste für Mobile und Desktop. |
|
||
| **Begründung** | Gleiches Familien-Muster wie Mitai `appNav`; keine divergierenden Nav-Arrays. |
|
||
| **Quelle** | `appNav.js` |
|
||
| **Tragfähigkeit** | **hoch** |
|
||
| **Einschränkung** | Tiefe Unterrouten (Übung bearbeiten) nicht in Top-Nav — Shell/Back. |
|
||
|
||
### 2. Admin als separater Hub
|
||
|
||
| | |
|
||
|---|---|
|
||
| **Prinzip** | `/admin/*` mit horizontaler `AdminPageNav` — Plattform-Werkzeuge gebündelt. |
|
||
| **Begründung** | Trainer-Nav bleibt schlank; Admin-IA skaliert unabhängig. |
|
||
| **Quelle** | `AdminPageNav.jsx` |
|
||
| **Tragfähigkeit** | **hoch** |
|
||
| **Einschränkung** | Admin-Nav hardcoded Array — kein `adminNav.js` SSoT wie Mitai ideal. |
|
||
|
||
### 3. Onboarding-Nav reduziert
|
||
|
||
| | |
|
||
|---|---|
|
||
| **Prinzip** | `getOnboardingNavItems()` — nur Verein + Einstellungen ohne Übungen/Planung. |
|
||
| **Begründung** | Nutzer ohne Vereinsmitgliedschaft nicht in leere Bereiche führen. |
|
||
| **Quelle** | `appNav.js` |
|
||
| **Tragfähigkeit** | **hoch** |
|
||
| **Einschränkung** | — |
|
||
|
||
### 4. Kontextabhängige Items (Posteingang)
|
||
|
||
| | |
|
||
|---|---|
|
||
| **Prinzip** | `showInbox` Flag steuert Posteingang-Eintrag — Berechtigung aus Entitlements/Rolle. |
|
||
| **Begründung** | Kein toter Nav-Link für Trainer ohne Inbox-Recht. |
|
||
| **Quelle** | `baseItems({ showInbox })` |
|
||
| **Tragfähigkeit** | **hoch** |
|
||
| **Einschränkung** | Logik zur `showInbox`-Setzung in App.jsx pflegen. |
|
||
|
||
### 5. Responsive: Bottom-Nav Mobile, Sidebar Desktop
|
||
|
||
| | |
|
||
|---|---|
|
||
| **Prinzip** | Gleiche Items, unterschiedliche Präsentation; CSS-Variablen für Abstände. |
|
||
| **Begründung** | PWA-typisches Muster; 80px Bottom-Padding für Nav. |
|
||
| **Quelle** | `app.css`; Design-System in `CLAUDE.md` |
|
||
| **Tragfähigkeit** | **hoch** |
|
||
| **Einschränkung** | Breakpoint-Konsistenz mit Mitai (1024px) prüfen beim Familien-Review. |
|
||
|
||
### 6. Return-Kontext für tiefe Bearbeitung
|
||
|
||
| | |
|
||
|---|---|
|
||
| **Prinzip** | Spez `NAV_RETURN_CONTEXT_SPEC` — zurück zur Herkunftsliste mit Filter-State. |
|
||
| **Begründung** | Übungs-Editor aus Suche/Planung ohne Navigations-Verlust. |
|
||
| **Quelle** | Return-Context Spec |
|
||
| **Tragfähigkeit** | **mittel** |
|
||
| **Einschränkung** | Nicht alle Flows implementiert. |
|
||
|
||
---
|
||
|
||
## Nicht übernehmen
|
||
|
||
1. **Zwei unterschiedliche Nav-Arrays** für Mobile vs. Desktop.
|
||
2. **Admin-Routen in Haupt-Bottom-Nav** mischen (außer ein Admin-Einstieg).
|
||
3. **Hardcodierte Nav in jeder Page** — zentral in `appNav.js`.
|
||
4. **Fehlender Onboarding-Gate** — volle Nav ohne Verein verwirrt.
|
||
|
||
---
|
||
|
||
## Verwandte Dokumentation
|
||
|
||
- [NAV_RETURN_CONTEXT_SPEC.md](../../../.claude/docs/technical/NAV_RETURN_CONTEXT_SPEC.md)
|
||
- Mitai: [NAVIGATION_IA_DESIGN_PRINCIPLES.md](file:///c:/Dev/mitai-jinkendo/.claude/docs/technical/NAVIGATION_IA_DESIGN_PRINCIPLES.md)
|
||
- [DESIGN_PRINCIPLES_INDEX.md](./DESIGN_PRINCIPLES_INDEX.md)
|