AppShell

The admin layout scaffold: an optional fixed-width sidebar, an optional header bar, and the main content as children. Pairs with Sidebar and Navbar.

Main content


import { AppShell, Sidebar, Navbar } from '@gg-software/ui';
 
<AppShell
    sidebarWidth={240}
    sidebar={<Sidebar sections={sections} activeKey={active} onSelect={setActive} />}
    header={<Navbar brand="Acme Admin" actions={<UserMenu />} />}
>
    <PageContent />
</AppShell>

Props

Prop	Type	Default	Description
`children`*	`ReactNode`	—	content rendered inside the component
`sidebar`	`ReactNode`	—
`header`	`ReactNode`	—
`sidebarWidth`	`string \| number`	`240`	sidebar width (px number or CSS length)
`className`	`string`	—
`style`	`CSSProperties`	—

* required · generated from packages/ui/src/layout/AppShell/AppShell.tsx