# Proposal: App Layout

## Overview
Create the main application layout components including collapsible sidebar, top bar, and breadcrumbs. This establishes the structural skeleton that all authenticated pages will use.

## Goals
- Create AppLayout component that wraps dashboard pages
- Create Sidebar component with three states (expanded, collapsed, hidden)
- Create TopBar component with breadcrumbs, month selector, user menu
- Create Breadcrumbs component with auto-generation from route
- Implement responsive behavior (drawer on mobile)
- Update root layout to conditionally use AppLayout

## Non-Goals
- Content components (DataTable, StatCard) - done in p04
- Dashboard page implementation - done in p03
- Page migrations - done in p05

## Priority
**HIGH** - Required before any page can use new layout

## Scope

### AppLayout Component
- Wraps Sidebar + Main content area
- Handles responsive behavior
- Slot for page content
- Skip for public pages (login)

### Sidebar Component
- Three visual states: expanded (240px), collapsed (64px), hidden (0px)
- Collapsible sections (Planning, Reports, Admin)
- Active route highlighting
- Role-based visibility (admin section)
- Dark mode toggle at bottom
- Keyboard shortcut: Cmd/Ctrl + \

### TopBar Component
- Left: Breadcrumbs
- Center: Page title (optional)
- Right: Month selector, User menu
- Mobile: Hamburger toggle
- Sticky positioning

### Breadcrumbs Component
- Auto-generate from route path
- Home icon for root
- DaisyUI breadcrumbs styling

## Success Criteria
- [ ] AppLayout renders correctly
- [ ] Sidebar toggles between states
- [ ] TopBar displays correctly
- [ ] Breadcrumbs auto-generate
- [ ] Responsive drawer works on mobile
- [ ] Login page exempt from layout
- [ ] All tests pass

## Estimated Effort
4-6 hours

## Dependencies
- p01-ui-foundation (types, stores, icons, navigation config)

## Blocks
- p03-dashboard-enhancement
- p04-content-patterns
- p05-page-migrations