Storybook stories for the `AppLayoutDrawer` component, demonstrating an in-layout drawer panel that renders within `AppLayout`'s main content area without covering the global chrome (header and sidebar). ## Key Components | Export | Description | |---|---| | `Right` | Default right-side drawer, persistent (does not close on chrome clicks) | | `ResizableRight` | Right-side drawer with drag-to-resize handle, clamped to the main content area | | `Left` | Left-side drawer variant, suitable for filters or secondary navigation | | `DashboardChildren` | Internal helper rendering a mock dashboard with a button to trigger the drawer | ## Usage Example ```typescript import { AppLayout, AppLayoutDrawer, AppLayoutDrawerBody, AppLayoutDrawerContent, AppLayoutDrawerHeader, AppLayoutDrawerTitle, } from '../components/navigation' function Page() { const [open, setOpen] = useState(false) return ( Panel Title

Panel content here.

} > ) } ``` > **When to use `AppLayoutDrawer` vs `Drawer`:** Use `AppLayoutDrawer` for page-level panels (chat, details, filters) that should coexist with the app chrome. Use the standard `Drawer` from `components/ui` for viewport-covering overlays such as notifications or auth modals. ## Source [`AppLayoutDrawer.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/AppLayoutDrawer.stories.tsx)