App-Shell-Demo
Interaktive Demonstration der App-Shell-Komponenten und Zustandsverwaltung.
Sidebar-Zustand
- 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
Navigationskomponenten
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
Funktionen
- 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.