Storybook stories for the `AppLayoutSidebar` component, demonstrating how `AppLayout` integrates with `AppLayoutDrawer` to render a toggleable right-side AI chat panel within the main content area. ## Key Components | Export | Type | Description | |---|---|---| | `Default` | `Story` | Toggle-driven sidebar that opens/closes via the Mingo AI header button | | `Resizable` | `Story` | Starts open with a draggable resize handle; persists width via `storageKey` | | `DashboardChildren` | Internal component | Mock dashboard UI used as page content behind the drawer | | `navigationItems` | `NavigationSidebarConfig['items']` | Sample nav config with Dashboard, Customers, Devices, Scripts, and Settings | ## Usage Example ```typescript // Minimal AppLayout with a toggleable Mingo AI drawer const [open, setOpen] = useState(false) setOpen((prev) => !prev), isMingoAIActive: open, }} drawer={ Mingo AI

Chat content goes here.

} > ``` For a resizable drawer, add `resizable`, `minSize`, `defaultSize`, and `storageKey` to `AppLayoutDrawerContent`. The navigation sidebar and header remain fully interactive while the drawer is open; close via the X button or Escape key. **Source:** [`AppLayoutSidebar.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/AppLayoutSidebar.stories.tsx)