App shell with sidebar

The default authenticated frame: an auto-height AppShell whose body scrolls the page, an icon-collapsible Sidebar on the left, a sticky header, and a right-hand gutter that reserves space for a docked, non-modal Sidepanel. The gutter and the Sidepanel share one open state — the gutter is the reservation, the Sidepanel is the overlay — so opening a detail panel shifts the content column rather than covering it.

AppShell

height=auto — the page is the scroll container

Sidebar

collapsible=icon — the left nav rail

AppShellBody

flex row absorbing the sidebar, body and panel

AppShellHeader

sticky top bar inside the body

AppShellMain

the page content

AppShellPanel

variant=gutter, side=right — reserves the panel's width

Sidepanel

modal=false — the docked detail overlay, same open state

<AppShell height="auto" defaultSidebarOpen>
  <Sidebar collapsible="icon">
    {/* nav rail */}
  </Sidebar>
  <AppShellBody>
    <AppShellHeader>{/* header bar */}</AppShellHeader>
    <AppShellMain>{children}</AppShellMain>
  </AppShellBody>
  {/* The gutter reserves space; the docked Sidepanel fills it. */}
  <AppShellPanel variant="gutter" side="right" open={docked} />
  <Sidepanel modal={false} open={docked} onOpenChange={setDocked}>
    {/* docked detail content */}
  </Sidepanel>
</AppShell>