feat(frontend): AppShell- und Sidebar-Navigation fuer App-Layout #66

New issue

Closed

opened 2026-06-21 16:18:02 +00:00 by niboer · 0 comments

niboer commented

2026-06-21 16:18:02 +00:00

Owner

Beschreibung

Basis-Layout fuer alle geschuetzten Seiten: Linke Sidebar-Leiste mit Logo, User-Info und Navigation. Rechts der Content-Bereich. Auf mobilen Geraeten wird die Sidebar durch einen Hamburger-Button ersetzt, der ein Sheet-Overlay oeffnet.

Komponenten

AppShell

Layout-Wrapper: Sidebar links + Slot fuer Content rechts
Content-Bereich: Scrollbar, full-height
Sidebar: Fixiert (sticky), 260px Breite auf Desktop

Sidebar

Logo: "FamilienFeierPlaner"-Text (oder spaeter SVG-Logo)
User-Bereich (oberster Block):
- User-Name und E-Mail aus Cookies (user_name, user_email)
- Account-Einstellungen-Link
- Logout-Button
Trennlinie
Navigation:
- Dashboard (/app/dashboard)
- Events (/app/events)
- Personen (/app/persons)
Mobile: Hamburger-Button oben links ? Sheet-Overlay mit gleichem Inhalt

Layout-Route

/app/+layout.svelte - Nutzt AppShell
/app/+page.svelte - Redirect zu /app/dashboard

Datenquelle User-Info

Cookies user_name und user_email werden beim Login im Callback gesetzt (Issue #68)
Sidebar liest Cookies clientseitig via document.cookie oder uebergibt sie via +layout.server.ts load()

Test-Ideen

AppShell rendert Sidebar + Content-Slot
Sidebar zeigt Logo an
Navigation enthaelt Dashboard-, Events- und Personen-Links
Mobile: Hamburger-Button sichtbar, Overlay funktioniert

Akzeptanzkriterien

Sidebar wird auf allen /app/*-Seiten angezeigt
Logo ist oben sichtbar
User-Name und E-Mail werden aus Cookies gelesen und angezeigt (oder Platzhalter wenn keine Cookies)
Account-Einstellungen-Link fuehrt zu /app/account
Logout-Button feuert /logout
Navigation: Dashboard, Events, Personen
Mobile: Hamburger ? Sheet-Overlay
Aktive Route wird in der Navigation hervorgehoben

Aktualisierter Plan (2026-06-21)

Zusaetzlich erkannt (L3)

Sidebar wird vor Issue #68 implementiert - dann existieren user_name/user_email-Cookies noch nicht.
Sidebar muss Platzhalter anzeigen: "User"/"" wenn Cookies fehlen.

Commits

3a eat(frontend): AppShell und Sidebar-Navigation (refs #66)

app-shell.svelte (Layout-Wrapper)
sidebar.svelte - Logo, User-Info mit Platzhalter (L3), Nav, Account, Logout
Mobile: Hamburger ? Sheet-Overlay (shadcn)
/app/+layout.svelte, /app/+layout.server.ts, /app/+page.svelte

3b est(frontend): Tests fuer AppShell und Sidebar (closes #66)

Sidebar: Cookie-Darstellung, aktive Route, mobile Ansicht

## Beschreibung Basis-Layout fuer alle geschuetzten Seiten: Linke Sidebar-Leiste mit Logo, User-Info und Navigation. Rechts der Content-Bereich. Auf mobilen Geraeten wird die Sidebar durch einen Hamburger-Button ersetzt, der ein Sheet-Overlay oeffnet. ## Komponenten ### AppShell - Layout-Wrapper: Sidebar links + Slot fuer Content rechts - Content-Bereich: Scrollbar, full-height - Sidebar: Fixiert (sticky), 260px Breite auf Desktop ### Sidebar - **Logo**: "FamilienFeierPlaner"-Text (oder spaeter SVG-Logo) - **User-Bereich** (oberster Block): - User-Name und E-Mail aus Cookies (user_name, user_email) - Account-Einstellungen-Link - Logout-Button - **Trennlinie** - **Navigation**: - Dashboard (/app/dashboard) - Events (/app/events) - Personen (/app/persons) - **Mobile**: Hamburger-Button oben links ? Sheet-Overlay mit gleichem Inhalt ### Layout-Route - /app/+layout.svelte - Nutzt AppShell - /app/+page.svelte - Redirect zu /app/dashboard ## Datenquelle User-Info - Cookies user_name und user_email werden beim Login im Callback gesetzt (Issue #68) - Sidebar liest Cookies clientseitig via document.cookie oder uebergibt sie via +layout.server.ts load() ## Test-Ideen - AppShell rendert Sidebar + Content-Slot - Sidebar zeigt Logo an - Navigation enthaelt Dashboard-, Events- und Personen-Links - Mobile: Hamburger-Button sichtbar, Overlay funktioniert ## Akzeptanzkriterien - [ ] Sidebar wird auf allen /app/*-Seiten angezeigt - [ ] Logo ist oben sichtbar - [ ] User-Name und E-Mail werden aus Cookies gelesen und angezeigt (oder Platzhalter wenn keine Cookies) - [ ] Account-Einstellungen-Link fuehrt zu /app/account - [ ] Logout-Button feuert /logout - [ ] Navigation: Dashboard, Events, Personen - [ ] Mobile: Hamburger ? Sheet-Overlay - [ ] Aktive Route wird in der Navigation hervorgehoben ## Aktualisierter Plan (2026-06-21) ### Zusaetzlich erkannt (L3) Sidebar wird vor Issue #68 implementiert - dann existieren user_name/user_email-Cookies noch nicht. Sidebar muss Platzhalter anzeigen: "User"/"" wenn Cookies fehlen. ### Commits **3a** eat(frontend): AppShell und Sidebar-Navigation (refs #66) - app-shell.svelte (Layout-Wrapper) - sidebar.svelte - Logo, User-Info mit Platzhalter (L3), Nav, Account, Logout - Mobile: Hamburger ? Sheet-Overlay (shadcn) - /app/+layout.svelte, /app/+layout.server.ts, /app/+page.svelte **3b** est(frontend): Tests fuer AppShell und Sidebar (closes #66) - Sidebar: Cookie-Darstellung, aktive Route, mobile Ansicht

niboer added this to the MS10: Vollständige UI milestone

2026-06-21 16:18:02 +00:00

niboer added the

component/frontend

prio/high

type/feature

labels

2026-06-21 16:18:02 +00:00

niboer referenced this issue

2026-06-21 16:18:02 +00:00

feat(frontend): Callback-Redirect, User-Info-Cookies und Landing-Page aktualisieren #68

niboer referenced this issue from a commit