feat(app-shell): Settings-Sub-Navigation + Web-Hamburger-Drawer (Phase 2 zu #336) #344

New issue

Closed

opened 2026-05-19 21:33:26 +02:00 by admin-mrrm · 0 comments

admin-mrrm commented

2026-05-19 21:33:26 +02:00

Owner

Scope (aus Original-#336)

Settings-Bereich separat — eigene Sub-Sidebar/Liste der Settings-Punkte (Stores, OCR-Settings, Mail-Accounts, …). Heute liegen Settings-Items inkonsistent zwischen /einstellungen und Bereichs-Routen verstreut.
Web: Hamburger-Icon links auf $sm öffnet Off-Canvas-Sidebar (Tamagui Sheet oder eigene Drawer-Komponente). Heute (Phase 1) wird auf schmalen Viewports die Bereichs-Nav als horizontale Inline-Leiste unter dem Header gerendert — funktional, aber wird mit wachsender Anzahl Bereiche unschön.
Web: neue verschachtelte Route-Struktur /einstellungen/* mit eigener linker Sub-Sidebar (Liste aller Settings-Bereiche links, ausgewählter Settings-Bereich rechts).
Mobile: Stack-Navigator unter /einstellungen mit eigener Top-Bar / Liste der Settings-Punkte (analog Web-Sub-Sidebar, nur als Liste).
Shared: Avatar-Component mit Fallback auf Initialen (heute jeweils lokal in apps/web/src/components/profile-menu.tsx und apps/mobile/src/components/profile-menu.tsx dupliziert). Optional — nur wenn an einer dritten Stelle Bedarf auftaucht.

Nicht im Scope

Profil-Menü-Inhalt selbst (kommt aus Phase 1)
Bereichs-Nav-Items (kommt aus Phase 1)

DoD

/einstellungen zeigt links/oben eine Liste aller Settings-Bereiche, rechts den gewählten
Web auf $sm: Hamburger-Icon links im Header öffnet Off-Canvas-Drawer mit Bereichs-Nav
Mobile: Stack-Navigation unter Settings funktioniert mit Back-Button
Tests: Sub-Sidebar rendert alle Settings-Routen; Hamburger-Drawer öffnet/schließt

Follow-up zu #336. Phase 1 (PR #343) hat Profil-Menü oben rechts + Bereichs-Nav (Sidebar/Top-Bar) geliefert. Diese Phase 2 holt die in Phase 1 bewusst nicht angefassten Punkte aus dem Original-Issue nach. ## Scope (aus Original-#336) - **Settings-Bereich separat** — eigene Sub-Sidebar/Liste der Settings-Punkte (Stores, OCR-Settings, Mail-Accounts, …). Heute liegen Settings-Items inkonsistent zwischen `/einstellungen` und Bereichs-Routen verstreut. - **Web: Hamburger-Icon links auf `$sm`** öffnet Off-Canvas-Sidebar (Tamagui Sheet oder eigene Drawer-Komponente). Heute (Phase 1) wird auf schmalen Viewports die Bereichs-Nav als horizontale Inline-Leiste unter dem Header gerendert — funktional, aber wird mit wachsender Anzahl Bereiche unschön. - **Web: neue verschachtelte Route-Struktur `/einstellungen/*`** mit eigener linker Sub-Sidebar (Liste aller Settings-Bereiche links, ausgewählter Settings-Bereich rechts). - **Mobile: Stack-Navigator unter `/einstellungen`** mit eigener Top-Bar / Liste der Settings-Punkte (analog Web-Sub-Sidebar, nur als Liste). - **Shared: Avatar-Component mit Fallback auf Initialen** (heute jeweils lokal in `apps/web/src/components/profile-menu.tsx` und `apps/mobile/src/components/profile-menu.tsx` dupliziert). Optional — nur wenn an einer dritten Stelle Bedarf auftaucht. ## Nicht im Scope - Profil-Menü-Inhalt selbst (kommt aus Phase 1) - Bereichs-Nav-Items (kommt aus Phase 1) ## DoD - `/einstellungen` zeigt links/oben eine Liste aller Settings-Bereiche, rechts den gewählten - Web auf `$sm`: Hamburger-Icon links im Header öffnet Off-Canvas-Drawer mit Bereichs-Nav - Mobile: Stack-Navigation unter Settings funktioniert mit Back-Button - Tests: Sub-Sidebar rendert alle Settings-Routen; Hamburger-Drawer öffnet/schließt