# Tasks: App Layout

## Phase 1: Create Layout Components Directory

- [ ] 2.1 Create `src/lib/components/layout/` directory

## Phase 2: Sidebar Components

### SidebarItem
- [ ] 2.2 Create `SidebarItem.svelte`
- [ ] 2.3 Add icon prop (Lucide component)
- [ ] 2.4 Add label prop
- [ ] 2.5 Add href prop
- [ ] 2.6 Add active state styling (current path matching)
- [ ] 2.7 Handle collapsed state (icon only, tooltip on hover)
- [ ] 2.8 Write component test: renders with icon and label

### SidebarSection
- [ ] 2.9 Create `SidebarSection.svelte`
- [ ] 2.10 Add section prop (NavSection type)
- [ ] 2.11 Add expanded prop (for collapsed sidebar)
- [ ] 2.12 Render section title
- [ ] 2.13 Render SidebarItem for each item
- [ ] 2.14 Write component test: renders all items

### Sidebar
- [ ] 2.15 Create `Sidebar.svelte`
- [ ] 2.16 Import and use navigationSections
- [ ] 2.17 Import layoutStore for state
- [ ] 2.18 Implement three visual states (expanded, collapsed, hidden)
- [ ] 2.19 Add toggle button in header
- [ ] 2.20 Add logo/brand in header
- [ ] 2.21 Implement role-based section visibility
- [ ] 2.22 Add dark mode toggle in footer
- [ ] 2.23 Add keyboard shortcut (Cmd/Ctrl + \)
- [ ] 2.24 Implement CSS transitions
- [ ] 2.25 Write component test: toggle state works
- [ ] 2.26 Write component test: role-based visibility

## Phase 3: TopBar Components

### UserMenu
- [ ] 2.27 Create `UserMenu.svelte` (migrate from Navigation.svelte)
- [ ] 2.28 Import authStore for user info
- [ ] 2.29 Add dropdown with user name/avatar
- [ ] 2.30 Add logout action
- [ ] 2.31 Style with DaisyUI dropdown

### MonthSelector
- [ ] 2.32 Create `MonthSelector.svelte`
- [ ] 2.33 Import periodStore
- [ ] 2.34 Display current month (format: Feb 2026)
- [ ] 2.35 Add dropdown with month options (-6 to +6 months)
- [ ] 2.36 Add Previous/Today/Next quick actions
- [ ] 2.37 Style with DaisyUI dropdown
- [ ] 2.38 Write component test: selection updates store

### Breadcrumbs
- [ ] 2.39 Create `Breadcrumbs.svelte`
- [ ] 2.40 Import $page store for current path
- [ ] 2.41 Implement generateBreadcrumbs function
- [ ] 2.42 Render Home icon for root
- [ ] 2.43 Render segments as links
- [ ] 2.44 Style last item as current (no link)
- [ ] 2.45 Write component test: generates correct crumbs

### TopBar
- [ ] 2.46 Create `TopBar.svelte`
- [ ] 2.47 Import Breadcrumbs, MonthSelector, UserMenu
- [ ] 2.48 Add hamburger toggle for mobile
- [ ] 2.49 Implement sticky positioning
- [ ] 2.50 Style with DaisyUI
- [ ] 2.51 Write component test: renders all components

## Phase 4: AppLayout

- [ ] 2.52 Create `AppLayout.svelte`
- [ ] 2.53 Import Sidebar, TopBar
- [ ] 2.54 Add slot for page content
- [ ] 2.55 Implement flex layout (sidebar + main content)
- [ ] 2.56 Adjust main content margin based on sidebar state
- [ ] 2.57 Handle responsive behavior (mobile drawer)
- [ ] 2.58 Write component test: renders children
- [ ] 2.59 Write component test: sidebar toggle affects layout

## Phase 5: Route Integration

- [ ] 2.60 Update `src/routes/+layout.svelte`
- [ ] 2.61 Add conditional AppLayout wrapper
- [ ] 2.62 Define publicPages array (['/login', '/auth'])
- [ ] 2.63 Test: login page has NO sidebar
- [ ] 2.64 Test: dashboard page has sidebar

## Phase 6: Responsive & Mobile

- [ ] 2.65 Test: Sidebar hidden by default on mobile
- [ ] 2.66 Test: Hamburger shows sidebar on mobile
- [ ] 2.67 Test: Sidebar overlays content on mobile (not push)
- [ ] 2.68 Test: Clicking outside closes sidebar on mobile
- [ ] 2.69 Add backdrop overlay for mobile drawer

## Phase 7: E2E Tests

- [ ] 2.70 E2E test: Login redirects to dashboard with sidebar
- [ ] 2.71 E2E test: Sidebar toggle works
- [ ] 2.72 E2E test: Theme toggle works
- [ ] 2.73 E2E test: Month selector updates period store
- [ ] 2.74 E2E test: Breadcrumbs reflect current route

## Phase 8: Verification

- [ ] 2.75 Run `npm run check` - no type errors
- [ ] 2.76 Run `npm run test:unit` - all component tests pass
- [ ] 2.77 Run `npm run test:e2e` - all E2E tests pass
- [ ] 2.78 Manual test: All breakpoints (320px, 768px, 1024px, 1280px)
- [ ] 2.79 Manual test: Dark mode toggle
- [ ] 2.80 Manual test: Keyboard shortcut (Cmd/Ctrl + \)

## Commits

1. `feat(layout): Create SidebarItem component with active state`
2. `feat(layout): Create SidebarSection component`
3. `feat(layout): Create Sidebar with three states and theme toggle`
4. `feat(layout): Create UserMenu component (migrated from Navigation)`
5. `feat(layout): Create MonthSelector with period store integration`
6. `feat(layout): Create Breadcrumbs with auto-generation`
7. `feat(layout): Create TopBar with all components`
8. `feat(layout): Create AppLayout wrapper component`
9. `feat(layout): Integrate AppLayout into root layout`
10. `feat(layout): Add responsive mobile drawer behavior`
11. `test(layout): Add component tests for all layout components`
12. `test(e2e): Add E2E tests for layout functionality`