App Shell Demo
Interactive demonstration of the app shell components and state management.
Sidebar State
- Expanded:
- No
- Pinned:
- No
- Mobile Open:
- No
Responsive Breakpoints
Resize the browser window to see the sidebar behavior change:
- Mobile (<768px): Drawer + FAB (bottom-right)
- Tablet (768-1023px): Rail with click-to-expand
- Desktop (1024px+): Rail with hover-to-expand
Navigation Components
The sidebar includes enhanced navigation with dropdowns and user menu:
- NavItem - Compound button with main navigation + optional dropdown
- NavAccordion - Keyboard-navigable inline accordion submenu for child pages (mobile)
- UserMenu - Avatar dropdown with profile, settings, theme, and sign out
Features
- Active state detection: Highlights current page and parent nav items
- Compound button: Main area navigates, chevron toggles dropdown
- Keyboard navigation: Arrow keys, Enter to select, Escape to close
- Click outside to close: Dropdown auto-closes
- Smooth animations: Respects prefers-reduced-motion
Try expanding the sidebar (hover on desktop, click on tablet) to see the navigation dropdowns and user menu. The chevron rotates 90° when open.