AppShellToggle
Island holding an app shell's collapse toggle.
Skip to content
Acme Ops / Monitors
Monitors
2 down48 checks across 6 regions. Two are failing right now.
checkout-api and eu-west webhooks have failed their last 3 checks.
View code
<AppShell
labels={{ nav: "Main", skip: "Skip to content", menu: "Menu", close: "Close menu", collapse: "Collapse sidebar" }}
collapsed={readAppShellCookie(request.headers.get("Cookie"))}
nav={nav}
>
{page}
</AppShell>Demo apps
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- CMSInkwellInkwell, a demo CMS built from @sdxc/ui/app: posts with count tabs and quick edit, an editor with a quiet save status and a loud Publish, media and settings./demo/apps/inkwell
- Ops dashboardPulsePulse, an invented ops dashboard: Northwind's services with live filters, a peek sheet and a bulk bar, metrics that switch one chart, incidents, deploys and settings./demo/apps/pulse
- Support inboxRelayRelay, an invented support inbox: mailboxes, conversations and the open conversation on one screen, with contacts, reports and settings./demo/apps/relay
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { AppShellToggle } from "@sdxc/ui/app";Renders the toggle the shell's top bar shows from sheetBelow. AppShell places it; load
@sdxc/ui/app/app-shell-toggle in the browser entry so the cookie, ⌘B and Esc work.
Props
Read from the component's own types, so every prop, every default and every allowed value is listed.