Shell

The application frame: header, collapsible sidebar, resizable aside and status bar, responsive down to a drawer.

@ruckc/truss-ui Layout

Import

import { Shell } from '@ruckc/truss-ui';

Playground

API

Narrow viewport: the sidebar lives in a drawer.

Prop	Type	Default	Description
`header` snippet	`Snippet<[api: ({ narrow: boolean; toggleSidebar: () => void; theme: 'system' \| 'light' \| 'dark'; toggleTheme: () => void; })]>`	—	Top bar; usually a `<Navbar>`. Narrow viewport: the sidebar lives in a drawer.
`sidebar` snippet	`Snippet<[api: ({ narrow: boolean; toggleSidebar: () => void; theme: 'system' \| 'light' \| 'dark'; toggleTheme: () => void; }) & { collapsed: boolean }]>`	—	Left navigation; usually a `<Sidebar bind:collapsed>`. On narrow screens it renders in a drawer. Narrow viewport: the sidebar lives in a drawer.
`aside` snippet	`Snippet<[api: ({ narrow: boolean; toggleSidebar: () => void; theme: 'system' \| 'light' \| 'dark'; toggleTheme: () => void; })]>`	—	Right inspector panel. Resizable by its left edge. Narrow viewport: the sidebar lives in a drawer.
`footer` snippet	`Snippet<[api: ({ narrow: boolean; toggleSidebar: () => void; theme: 'system' \| 'light' \| 'dark'; toggleTheme: () => void; })]>`	—	Status bar. Narrow viewport: the sidebar lives in a drawer.
`children` required snippet	`Snippet`	—	Content, as a Svelte snippet.
`sidebarCollapsed` bindable	`boolean`	`false`	Whether the sidebar shows icons only. Bind it with `bind:sidebarCollapsed`.
`sidebarOpen` bindable	`boolean`	`false`	Drawer state on narrow screens.
`asideOpen` bindable	`boolean`	`true`	Whether the right-hand panel is shown. Bind it with `bind:asideOpen`.
`asideWidth` bindable	`number`	`320`	px
`theme` bindable	`'system' \| 'light' \| 'dark'`	`'system'`	'system' follows the OS; otherwise forces data-theme on <html>.
`density`	`'compact' \| 'default' \| 'comfortable'`	—	Global density: sets `data-density` on <html>. Leave unset to keep the default (or your own attribute).
`breakpoint`	`number`	`840`	px below which the sidebar becomes a drawer.
`navLabel`	`string`	`'Navigation'`	Accessible name of the navigation drawer.
`asideLabel`	`string`	`'Details'`	Accessible name of the aside panel.