Sidebar Layout

Full app shell with a persistent sidebar on desktop and a mobile navbar that opens the sidebar as a drawer. SidebarLayout takes two props: sidebar and navbar.

You're looking at it

This page is rendered inside a SidebarLayout. See the source at src/app/(app)/application-layout.tsx for the full setup.

Minimal usage

<SidebarLayout
  sidebar={<Sidebar>{/* SidebarHeader / Body / Sections */}</Sidebar>}
  navbar={<Navbar>{/* mobile-only top bar */}</Navbar>}
>
  {children}
</SidebarLayout>

When to use

Choose SidebarLayout for dashboards with persistent navigation. Use StackedLayout for marketing-style shells with only a top navbar.

Theme