feat(layout): finalize p01 and p02 changes
Complete UI foundation and app layout implementation, stabilize container health checks, and archive both OpenSpec changes after verification.
This commit is contained in:
@@ -0,0 +1,68 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user