# SideNav

Persistent side navigation with sticky header/footer zones around a scrollable middle. Compose with `SideNav.Heading`, `SideNav.Section`, and `SideNav.Item` (link via `href` or button via `onPress`). Optional `collapsible` icon-only mode and `resizable` width.

## Examples

### Default

Brand in `header`, then a section of items.

```tsx
import { SideNav } from '@var-ui/react';

<SideNav header={<SideNav.Heading heading="Acme" />}>
  <SideNav.Section title="Main">
    <SideNav.Item label="Dashboard" href="/" isSelected />
  </SideNav.Section>
</SideNav>
```

```astro
---
import { SideNav, SideNavHeading, SideNavItem, SideNavSection } from '@var-ui/astro';
---
<SideNav>
  <SideNavHeading slot="header" heading="Acme" />
  <SideNavSection title="Main">
    <SideNavItem label="Dashboard" href="/" isSelected />
  </SideNavSection>
</SideNav>
```

```html
<nav class="var-ui-side-nav" aria-label="Side navigation">…</nav>
```

### Sections

Group related destinations with multiple `SideNav.Section`s — each can take `title`, `subtitle`, and several `SideNav.Item`s.

```tsx
import { SideNav } from '@var-ui/react';

<SideNav header={<SideNav.Heading heading="Acme" subheading="Workspace" />}>
  <SideNav.Section title="Main">
    <SideNav.Item label="Dashboard" href="/" isSelected />
    <SideNav.Item label="Projects" href="/projects" />
  </SideNav.Section>
  <SideNav.Section title="Team" subtitle="Shared">
    <SideNav.Item label="Members" href="/members" />
    <SideNav.Item label="Billing" href="/billing" />
  </SideNav.Section>
</SideNav>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| children | ReactNode | no |  | `SideNav.Section` / `SideNav.Item` tree rendered in the scrollable middle zone. |
| className | string \| undefined | no |  |  |
| collapsible | boolean \| SideNavCollapsibleConfig \| undefined | no |  |  |
| footer | ReactNode | no |  | Content pinned to the sticky footer, left of `footerIcons`/the collapse button. |
| footerIcons | ReactNode | no |  | Icon-only actions pinned to the sticky footer. |
| handleRef | Ref<SideNavCollapseHandle> \| undefined | no |  | Imperative collapse/expand/toggle — pair with a `SideNav.CollapseButton` rendered elsewhere. |
| header | ReactNode | no |  | Brand block, usually a `SideNav.Heading` — wrapped in the sticky header zone. |
| label | string \| undefined | no | 'Side navigation' | Accessible name for the `nav` landmark. |
| resizable | boolean \| ResizableConfig \| undefined | no |  |  |
| topContent | ReactNode | no |  | Content pinned under `header` (e.g. a "New" button or search field). |

## Accessibility

The root is a `nav` landmark (`label` defaults to `"Side navigation"`). Selected items set `aria-current="page"`. In collapsed icon-only mode, item labels surface via tooltips and the collapse control uses `"Collapse navigation"` / `"Expand navigation"`. Nested collapsible items expose expand/collapse buttons and a `role="group"` submenu.