SidebarLayout is the shell a product's screens sit in: a header above both columns, a persistent
navigation column beside the content, and a footer under them. It owns the arrangement and nothing
else, the navigation, the destinations and everything on the page are supplied as nodes, so the
shell holds no application state and knows nothing about what a campaign is.

Its one opinion is worth stating plainly: on a narrow screen the navigation column stacks **above**
the content rather than disappearing into an off-canvas drawer, so the whole page stays reachable
with the keyboard and there is no focus trap to get wrong.

```tsx demo="layouts/sidebar-layout-preview"
```

## Usage

```tsx
import {
  Navbar,
  PageContent,
  Sidebar,
  SidebarLayout,
  Typography,
} from "@asheeui/web";

<SidebarLayout
  header={<Navbar brand="Ashee SMS" links={links} />}
  sidebar={<Sidebar items={items} activeKey="campaigns" />}
>
  <PageContent spacing="lg">
    <Typography role="heading-lg">Campaigns</Typography>
  </PageContent>
</SidebarLayout>;
```

Four slots, and the shell wraps two of them and not the other two. It renders the navigation column
as an `aside` and the page inside a content column; `header` and `footer` are placed **bare**,
without a wrapper of their own, so their landmark is whatever you pass. `Navbar` brings a `header`
and `Footer` brings a `footer`; a plain `div` brings neither.

## The navigation column

`side` states which edge the column sits on and `sidebarWidth` how wide it is: `sm` is 14rem, `md`
16rem and `lg` 20rem. Both take effect where the shell becomes two columns, from the `lg` breakpoint
(1024 pixels); below it the column is a full-width band above the content whichever side is stated,
because there is no second column to sit at the end of.

```tsx demo="layouts/sidebar-layout-end"
```

`sidebarLabel` names the column, and it is worth stating whenever the page has another navigation
region: a named complementary landmark is one a reader can jump to by name. The column is a slot
rather than a `Sidebar` prop, an invoice, a set of filters or a `Sidebar` are all just nodes in it.

## Keeping the column in view

`stickySidebar`, registered `true`, is what keeps the column in view while the content scrolls: from
`lg` it becomes `position: sticky` at the top of the viewport, as tall as the viewport, with its own
scroll bar for a navigation longer than the screen. Turning it off lets the column leave with the
content, which suits a page read from top to bottom, a help article whose column is a short list of
guides, say, rather than a dashboard moved between all day.

```tsx demo="layouts/sidebar-layout-narrow"
```

## Props

```props SidebarLayout
```

The three arrangement options are registered by the component, so each resolves from the instance,
then from `components.sidebarlayout`, then from the registration: `side` `start`, `sidebarWidth`
`md`, `stickySidebar` `true`. `sidebarLabel` is **not** among them, a landmark's name belongs to the
page that places the column, so it is instance-only, as are the four slots and `as`. Nothing here
states a width for the content column or a rhythm for what it holds: the content takes the room the
column leaves, and its spacing belongs to `PageContent` or `Section`.

## Accessibility

- The navigation column is an `aside` named by `sidebarLabel` (`Sidebar` by default), so it is a
  complementary landmark. A `Sidebar` placed in the column adds no second one: the layout tells it,
  around the slot, that the landmark already exists, so the sidebar renders a plain `div` and
  contributes only its navigation landmark, named by its `navLabel`, `Sidebar navigation` by
  default. The two names therefore differ on their own, and nothing has to be renamed to keep the
  landmark list readable.
- Below `lg` the column is still the first thing in the document, and the side is a statement
  about order rather than about the DOM: the column is written before the content and painted after
  it only when `side="end"` and there are two columns. Nothing is moved, hidden or duplicated by
  the breakpoint. With the column at the end, that does mean the painted order and the tab order
  part company from `lg`, the column is reached before the content it sits beside.
- The shell renders no `main` of its own: the content column is a plain `div`. The landmark comes
  from what you put in it, `PageContent` is a `main` by default, so a content column of plain
  elements leaves the page without one.
- `header` and `footer` are slots, not landmarks: `Navbar` renders a `header` and `Footer` a
  `footer`, and the shell adds no name to either.

The spacing inside the columns is the [Layout and spacing](/concepts/layout-and-spacing) vocabulary;
which shell a product should start from is the argument in
[Page compositions](/guides/page-compositions).

## Native

`@asheeui/native` ships `SidebarLayout` with the same props and the same cascade. The platform's
differences are the platform's: it has no media query, so the direction is decided once from the
window and stated on the row rather than in a stylesheet, and there is no scroll-linked
positioning, so `stickySidebar` resolves through the contract and changes nothing. See
[React Native](/platforms/native).

## Related

```related sidebar, navbar, footer
```