The root shell component that composes the full application chrome — sidebar, header, mobile burger menu, notification drawer, and a drawer portal target — into a responsive, context-driven layout. ## Key Components | Export | Type | Description | |---|---|---| | `AppLayout` | Component | Main layout shell wrapping all page chrome and content | | `AppLayoutProps` | Interface | Full prop surface for `AppLayout` | | `useAppLayoutDrawerContainer` | Hook (re-export) | Access the drawer portal container element | | `useAppLayoutDrawerCoordination` | Hook (re-export) | Access drawer open/close coordination context | | `AppLayoutDrawerHandle` | Type (re-export) | Handle type for registering a drawer with the layout | ### Notable Props | Prop | Type | Description | |---|---|---| | `topBar` | `ReactNode` | Optional full-width banner pinned above sidebar and header | | `drawer` | `ReactNode` | Slot for an `AppLayoutDrawer` that portals into the main area | | `disabled` | `boolean` | Freezes nav/header chrome while keeping `children` interactive | ## Usage Example ```typescript import { AppLayout } from './app-layout' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( , actions: , }} mobileBurgerMenuProps={{ footer: }} topBar={} drawer={} mainClassName="bg-white" > {children} ) } ``` ## Drawer Coordination The layout enforces a **single open drawer** policy via `AppLayoutDrawerCoordinationContext`. When a drawer opens, all other registered drawers are closed programmatically. Opening the mobile burger menu also closes any active drawer (and vice versa), preventing layering conflicts where the menu would render invisibly beneath an open drawer.