Storybook stories for the `AppLayout` component, showcasing layout configurations including sidebar states, header options, navigation interactions, and disabled states. ## Key Components - **`Default`** — Standard layout with sidebar, header, and active navigation tracking via `useState` - **`WithHeaderUserOnly`** — Layout using only `headerProps` for user identity - **`WithSearchAndOrganizations`** — Header with search bar and org selector enabled - **`WithCustomMainClassName`** — Overrides main content area background styling - **`MinimizedSidebar`** — Starts with sidebar collapsed to icon-only mode - **`Interactive`** — Fully interactive story with live navigation state and current route display - **`Disabled`** — All controls dimmed/inert except the mobile burger menu and sidebar collapse toggle ## Usage Example ```typescript import { AppLayout } from '../components/navigation/app-layout' // Basic usage with sidebar and header router.push(path), onToggleMinimized: () => setMinimized(prev => !prev), }} headerProps={{ showNotifications: true, showUser: true, userName: 'Jane Smith', userEmail: 'jane@example.com', onProfile: () => router.push('/profile'), onLogout: handleLogout, }} mobileBurgerMenuProps={{ user: { userName: 'Jane Smith', userEmail: 'jane@example.com', userRole: 'Admin', }, }} >
Page content here
```