Components
App Shell
SketchAppShell — a layout wrapper that arranges an optional sidebar and top bar around main page content.
SketchAppShell composes a full-page layout with an optional sticky top bar and
collapsible sidebar. It uses a flex-wrap strategy so the sidebar and content sit
side-by-side on wide viewports and stack on narrow ones. The shell has no
background of its own, letting the global sketch paper texture show through.
Default
import { SketchAppShell, SketchCard } from "blackchalk";const Sidebar = () => (<SketchCard style={{ width: 200, height: "100%", padding: 16 }}> <div style={{ fontWeight: 700, marginBottom: 12 }}>Menu</div> <div style={{ display: "flex", flexDirection: "column", gap: 8 }}> <span>Dashboard</span> <span>Projects</span> </div></SketchCard>);<SketchAppShell sidebar={<Sidebar />}><div style={{ padding: 24 }}> <h1 style={{ marginTop: 0 }}>Main content</h1> <p>The app shell arranges an optional sidebar and top bar around the page.</p></div></SketchAppShell>With top bar
import { SketchAppShell, SketchCard } from "blackchalk";const TopBar = () => (<SketchCard style={{ padding: "12px 24px", marginBottom: 8 }}> <strong>Acme Studio</strong></SketchCard>);const Sidebar = () => (<SketchCard style={{ width: 200, height: "100%", padding: 16 }}> <div style={{ fontWeight: 700, marginBottom: 12 }}>Menu</div> <div style={{ display: "flex", flexDirection: "column", gap: 8 }}> <span>Dashboard</span> <span>Projects</span> <span>Settings</span> </div></SketchCard>);<SketchAppShell topBar={<TopBar />} sidebar={<Sidebar />}><div style={{ padding: 24 }}> <h1 style={{ marginTop: 0 }}>Main content</h1> <p>With both a top bar and a sidebar.</p></div></SketchAppShell>Props
| Prop | Type | Default |
|---|---|---|
children | ReactNode | — |
sidebar | ReactNode | — |
topBar | ReactNode | — |
See it in the Storybook playground, or read the source.