<!-- source-hash: 6e460b9179ea9cfc7a0f83bf49f746bd -->
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
- **`WithLoadingFallback`** — Custom Suspense fallback spinner injected via `loadingFallback` prop
- **`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
<AppLayout
  sidebarConfig={{
    items: navigationItems,
    onNavigate: (path) => 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',
    },
  }}
>
  <div className="p-4">Page content here</div>
</AppLayout>
```