---

## SidebarLayout
App-shell layout that wires a `<Sidebar>` to a main content
region and an optional mobile header. Use this whenever you want a
permanent sidebar on desktop with a hamburger overlay on mobile — it
resolves the CSS-variable scoping so the main content offset works without
boilerplate.

The component renders the sidebar internally; consumers configure it via
`sidebarHeader`, `sidebar`, and `sidebarFooter` snippets and bind `open`
for the mobile overlay (or for collapsible mode at all viewports).

For non-shell sidebars (right-side detail panels, drawers inside a page),
keep using the `<Sidebar>` primitive directly.

**Import:** `import { SidebarLayout } from '@urbicon-ui/blocks';`

### Examples
```svelte
<script>
import { SidebarLayout, Button, MenuIcon } from '@urbicon-ui/blocks';
let sidebarOpen = $state(false);
</script>

<SidebarLayout bind:open={sidebarOpen} sidebarWidth="16rem">
{#snippet sidebarHeader()}
<a href="/" class="font-semibold">My App</a>
{/snippet}

{#snippet sidebar()}
<nav class="flex flex-col gap-1 p-3">
<a href="/dashboard">Dashboard</a>
<a href="/settings">Settings</a>
</nav>
{/snippet}

{#snippet mobileHeader({ openSidebar })}
<Button variant="ghost" size="sm" onclick={openSidebar} aria-label="Open menu">
<MenuIcon />
</Button>
<span class="font-semibold">My App</span>
{/snippet}

<h1>Page content</h1>
</SidebarLayout>
```

```svelte
<SidebarLayout bind:open={sidebarOpen} mode="collapsible" sidebarWidth="16rem">
{#snippet sidebarHeader()}<span class="font-semibold">App</span>{/snippet}
{#snippet sidebar()}<nav class="p-3"><!-- … --></nav>{/snippet}

<Button onclick={() => (sidebarOpen = !sidebarOpen)}>Toggle</Button>
<!-- main content -->
</SidebarLayout>
```

### Variants
- contentMaxWidth: 2xl, lg, md, none, sm, xl (default: xl)
- side: left, right (default: left)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
| children | `Snippet` | no |  | Page content rendered inside the centered main column. |
| class | `string` | no |  | Additional CSS classes applied to the root wrapper. |
| closeOnBackdropClick | `boolean` | no | true | Close the mobile sidebar overlay when clicking the backdrop. |
| closeOnEscape | `boolean` | no | true | Close the mobile sidebar overlay when pressing Escape. |
| contentMaxWidth | `SidebarLayoutVariants['contentMaxWidth']` | no | 'xl' | Maximum width of the centered content column. |
| mobileHeader | `Snippet<[MobileHeaderContext]>` | no |  | Mobile header bar, hidden on desktop in `responsive` mode. Receives a helper to open the sidebar so a hamburger button needs no extra wiring. If omitted, no mobile header is rendered. |
| mode | `'responsive' | 'collapsible'` | no | 'responsive' | Sidebar mode. - `responsive` (default): permanent on desktop (≥1024px), slide-in overlay on mobile. - `collapsible`: toggleable at all viewports — width animation on desktop, overlay on mobile. |
| onOpenChange | `(open: boolean) => void` | no |  | Fires when the sidebar open state changes. |
| open | `boolean` | no | false | Sidebar visibility. In `responsive` mode this only affects the mobile overlay. In `collapsible` mode it controls visibility at all viewports. Supports `bind:open`. |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ SidebarLayout: {...} }}>`. Use this to share a branded shell look across the app instead of repeating class overrides. |
| side | `SidebarLayoutVariants['side']` | no | 'left' | Which edge the sidebar attaches to. |
| sidebar | `Snippet` | no |  | Sidebar main content — typically a `<nav>`. |
| sidebarFooter | `Snippet` | no |  | Sidebar footer (below the scrollable nav). |
| sidebarHeader | `Snippet` | no |  | Sidebar header (above the scrollable nav). |
| sidebarWidth | `string` | no | '16rem' | Sidebar panel width. Single source of truth — the layout exposes it as `--sidebar-width` (constant) and `--sidebar-effective-width` (animates to `0` when collapsed) on the layout root, so the main content offset stays in sync automatically. |
| slotClasses | `Partial<Record<SidebarLayoutSlot, string>>` | no |  | Per-slot class overrides. `sidebar*` slots are forwarded to the embedded `<Sidebar>` component (mapped to its `slotClasses.panel`/`header`/...). |
| unstyled | `boolean` | no |  | Strip all default styles. Combine with `slotClasses` for a custom layout. |

Inherited from:
- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)