headroom/openspec/changes/archive/2026-02-18-p02-app-layout/proposal.md

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