Демо оболочки приложения
Интерактивная демонстрация компонентов оболочки приложения и управления состоянием.
Состояние боковой панели
- Expanded:
- No
- Pinned:
- No
- Mobile Open:
- No
Адаптивные контрольные точки
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
Навигационные компоненты
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
Функции
- 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.