App Shell

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.