[Web] Login-Screen + Responsive Navigation (Follow-up zu #123 + #124) #128

New issue

Closed

opened 2026-04-27 08:19:35 +02:00 by admin-mrrm · 0 comments

admin-mrrm commented

2026-04-27 08:19:35 +02:00

Owner

Kontext

#123 und #124 wurden für die Mobile-App (Expo) umgesetzt. Die Web-App hat aktuell:

Rudimentäre Top-Bar-Navigation (Layout.tsx) statt Sidebar
Kein dedizierter Login-Screen — requireAuth leitet direkt zum OAuth-Provider weiter (Full-Page-Redirect)
Kein aktiver Menüeintrag wird hervorgehoben

Aufgaben

/login-Route anlegen (src/routes/login.tsx) mit Sign-In-Button und Fehlermeldung
requireAuth anpassen: statt direktem window.location.assign → Router-Redirect nach /login?returnTo=...
Nach erfolgreichem Auth-Callback: Redirect zur ursprünglichen Route (via returnTo-Parameter)

Layout.tsx umbauen: persistente Sidebar ab Tablet-Breakpoint, kollabierbare Top-/Bottom-Navigation auf Mobile
Menü-Einträge aus Mobile übernehmen: Einkaufen, Listen, Einstellungen (Stores)
Aktiven Menüeintrag hervorheben (TanStack Router activeProps / useMatch)
Breakpoint-Logik analog zu Mobile (useIsWideScreen-Hook oder Tamagui-Media-Query)

Referenz

Mobile-Umsetzung: #123, #124
Eltern-Idee: #111

## Kontext #123 und #124 wurden für die Mobile-App (Expo) umgesetzt. Die Web-App hat aktuell: - Rudimentäre Top-Bar-Navigation (Layout.tsx) statt Sidebar - Kein dedizierter Login-Screen — `requireAuth` leitet direkt zum OAuth-Provider weiter (Full-Page-Redirect) - Kein aktiver Menüeintrag wird hervorgehoben ## Aufgaben ### Login-Screen (#123 Web) - [ ] `/login`-Route anlegen (`src/routes/login.tsx`) mit Sign-In-Button und Fehlermeldung - [ ] `requireAuth` anpassen: statt direktem `window.location.assign` → Router-Redirect nach `/login?returnTo=...` - [ ] Nach erfolgreichem Auth-Callback: Redirect zur ursprünglichen Route (via `returnTo`-Parameter) ### Responsive Navigation (#124 Web) - [ ] `Layout.tsx` umbauen: persistente Sidebar ab Tablet-Breakpoint, kollabierbare Top-/Bottom-Navigation auf Mobile - [ ] Menü-Einträge aus Mobile übernehmen: Einkaufen, Listen, Einstellungen (Stores) - [ ] Aktiven Menüeintrag hervorheben (TanStack Router `activeProps` / `useMatch`) - [ ] Breakpoint-Logik analog zu Mobile (`useIsWideScreen`-Hook oder Tamagui-Media-Query) ## Referenz - Mobile-Umsetzung: #123, #124 - Eltern-Idee: #111