feat(app-shell): Navigation in Sidebar links + Profil-Menü rechts oben + separater Einstellungsbereich (Web + Mobile) #336
Labels
No labels
app/archiv
app/einkaufslisten
app/imap-client
app/wissensbasis
arch-answered
arch-question
area/api
area/auth
area/infra
area/mobile
area/shared
area/ui
area/web
portfolio-status
prio/high
prio/low
prio/medium
roadmap/public
size/l
size/m
size/s
size/xl
size/xs
status/blocked
status/needs-info
type/bug
type/chore
type/docs
type/feature
type/idea
type/refactor
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Depends on
Reference
admin-mrrm/mrrmlabapp#336
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Motivation
Die aktuelle App-Shell vermischt im Haupt-Navigationsbereich tägliche Use-Cases (Einkaufen, Listen, Mail, Pakete, ...) mit User/Settings-Einträgen (Einstellungen, Konto). Dazu klappt das Web-Layout auf schmalen Viewports in eine horizontale Top-Bar — der User erwartet stattdessen ein Standard-App-Pattern: persistente Sidebar links, Profil oben rechts.
Mobile (Expo) und Web sollen am Ende dieselben Strukturmerkmale haben (CLAUDE.md: "Always implement UI changes for both web and mobile").
Soll-Zustand
Aktueller Stand (zur Orientierung)
apps/web/src/routes/layout.tsx):$gtSmlinke Sidebar 240px mit ALLEN Items inkl. Einstellungen/Konto;$smhorizontale Top-Barapps/mobile/src/components/drawer-navigation.tsx): Drawer mitEinkaufen, Listen, Pakete, Mail, Archiv, Einstellungen, Konto(Mix)routes/konto.tsx(Web) bzw. Konto-Screen (Mobile)Scope
Web (
apps/web/src/)routes/layout.tsxrefactoren:$gtSm, persistent$smöffnet Off-Canvas-Sidebar (Tamagui Sheet oder eigene Drawer-Komponente)Header(oben fix, full-width):NAV_ITEMSauslayout.tsx: Einstellungen + Konto entfernen, nur tägliche Bereiche behaltenroutes/konto.tsxin eine teilbare Funktion / Hook extrahieren (z.B.useSignOut()), aus Profil-Dropdown aufrufen/einstellungen/*mit eigener linker Sub-Sidebar (Punkte: Stores, OCR, Mail-Accounts, ...). Hauptmenü wird verdeckt oder durch Settings-Sidebar ersetzt während man dort ist.Mobile (
apps/mobile/)drawer-navigation.tsx:Einstellungen+Kontoaus dem Haupt-Drawer entfernenapp/(drawer)/_layout.tsxggf. anpassen: Header-Slot, screenOptionspackages/feature-autho.ä., falls vorhanden)/einstellungenmit eigener Top-Bar / Liste der Settings-PunkteShared
useSignOut()undProfileMenuals shared Component in einempackages/feature-authoderpackages/ui-shell(sofern Tamagui Cross-Platform es zulässt)Akzeptanzkriterien
Web/Mobile-Parität
Wichtig: am Ende sollen Mobile und Web dieselben Strukturmerkmale haben — Sidebar links, Profil oben rechts, getrennter Einstellungsbereich. Unterschiede nur in der Form (Drawer vs. Sidebar on-canvas).
Verwandt
position-Feld nutzen) #331Web-Scope ist mit den heute gemergten PRs durch:
Damit gilt für die Web-Checkliste:
routes/layout.tsxrefactored (Sidebar 240px desktop, Off-Canvas Drawer auf schmal, kein horizontaler Top-Bar mehr)NAV_ITEMSenthält nur tägliche Bereiche (kein Einstellungen/Konto)useSignOut()Hook extrahiert (apps/web/src/hooks/use-sign-out.ts)/einstellungen/*mit eigener Sub-Navigation (via Drawer-Hijack, #358)Mobile-Scope ist ebenfalls im Wesentlichen umgesetzt:
drawer-navigation.tsx)apps/mobile/src/components/profile-menu.tsx)useSignOut()Hook (apps/mobile/src/hooks/use-sign-out.ts)app/einstellungen/index.tsx)Offen ggf.: Avatar-Komponente in shared
packages/, Mobile-Settings-Drawer-Hijack analog zu #348 — beides nicht kritisch, eigenes Ticket wenn nötig.Kannst du nach dem Deploy auf
app.mrrm.deschließen sobald du verifiziert hast.Audit (Wrap-up nach #347/#348/#349)
Alle 7 Akzeptanzkriterien gegen
mainverifiziert:apps/web/src/routes/layout.tsx:8-15MAIN_NAV_ITEMSohne Settings/Kontoapps/web/src/routes/layout.tsx:54-62, 88-123(position:fixed, kein Bottom-Sheet); Testlayout.spec.tsx:111-137apps/web/src/components/profile-menu.tsx:17-79(Popover mit Einstellungen / Konto / Abmelden)apps/mobile/src/components/drawer-navigation.tsx:7-14(NAV_ITEMS nur Bereiche);apps/mobile/app/(drawer)/_layout.tsx:36(ProfileMenu als headerRight)apps/web/src/routes/layout.tsx:17-23, 41-42(SETTINGS_NAV_ITEMS, Umschaltung bei/einstellungen/*); Testlayout.spec.tsx:165-196useSignOut()Hook auf beiden Plattformen, von ProfileMenu konsumiertapps/web/src/routes/layout.spec.tsx(10 Tests, alle Kriterien abdeckend)Schließe Epic.