Santhosh Janardhanan
3e36ea8888
- Update decision-log with UI layout decisions (Feb 18, 2026) - Update architecture with frontend layout patterns - Update config.yaml with TDD, documentation, UI standards rules - Create p00-api-documentation change (Scribe annotations) - Create p01-ui-foundation change (types, stores, Lucide) - Create p02-app-layout change (AppLayout, Sidebar, TopBar) - Create p03-dashboard-enhancement change (PageHeader, StatCard) - Create p04-content-patterns change (DataTable, FilterBar) - Create p05-page-migrations change (page migrations) - Fix E2E auth tests (11/11 passing) - Add JWT expiry validation to dashboard guard
69 lines
1.9 KiB
Markdown
69 lines
1.9 KiB
Markdown
# 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
|