# persist

> Why JS: remembering a Sidebar's collapsed state across a full page navigation means writing it somewhere the next server render can read back before any markup reaches the browser, and answering a `--ui-toggle` command dispatched from a trigger button elsewhere on the page — neither has an HTML or CSS equivalent.

```ts
import { persist } from "@sdxc/ui/mixins";
```

Mirrors a Sidebar's collapsed state into a cookie, so a fresh page load
renders it already collapsed or expanded, and answers the `--ui-toggle`
command so a trigger button anywhere on the page can flip the Sidebar.

## Signature

```ts
persist(key: string): MixinDescriptor<HTMLElement>
```

Returns: A mixin descriptor for the Sidebar root's `mix` prop.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `key` | `string` | Cookie name the collapsed state persists under — scope it per Sidebar instance on a page that renders more than one. |

## Examples

```tsx
<div id="app-sidebar" mix={[persist("app-sidebar:collapsed")]}>
  <input type="checkbox" data-sidebar-toggle hidden />
  ...
</div>
<button commandfor="app-sidebar" command="--ui-toggle">Toggle sidebar</button>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/mixins` too.

### SIDEBAR_TOGGLE_ATTRIBUTE

Attribute the Sidebar's collapse checkbox carries. persist reads
and flips this single descendant of its host, the same element the
Sidebar's own styles key their `:checked` selector off.

#### Signature

```ts
const SIDEBAR_TOGGLE_ATTRIBUTE = "data-sidebar-toggle"
```