App frame with sidebar

The default authenticated frame: a SidebarProvider holding an icon-collapsible Sidebar on the left and a SidebarInset beside it. The inset is the content column and the page's single main landmark, so the page scrolls and the header stays a plain header inside it. A SidebarPanel beside the inset reserves a gutter for a docked, non-modal Sidepanel; the gutter and the Sidepanel share one open state, so opening a detail panel shifts the content column rather than covering it. The provider renders the skip link first.

SidebarProvider

height=auto - the page is the scroll container

Sidebar

collapsible=icon - the left nav rail

SidebarInset

the content column and the page's only main

header

a plain header inside the inset

SidebarPanel

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

Sidepanel

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

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