AppShell

Root of the app frame (sidebar + topbar + page). It is the app container: the sidebar turns into a drawer and the topbar shows its menu button when the SHELL is under 900 px wide, whatever the viewport is, so the same shell works in a full page, a preview or a story.

Import

import { AppShell } from "@jcsoftdev/ui/shell";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/shell/app-shell.

Usage

export const Default: Story = {
  render: (args) => (
    <Frame>
      <ShellDemo className={args.className} />
    </Frame>
  ),
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
children *	ReactNode
className	string

* marks a required prop.

Storybook stories

• Default
• Compact

Source

packages/ui/src/shell/app-shell/app-shell.tsx