# splitViewToggle

> Collapses or restores a pane from a button.

```ts
import { splitViewToggle } from "@sdxc/ui/app";
```

Collapses or restores a pane from a button. For the sidebar below the wide breakpoint
the button's own `popovertarget` opens the sidebar as a sheet instead.

## Signature

```ts
splitViewToggle(viewId: string, pane: SplitViewPane): MixinDescriptor<HTMLButtonElement>
```

Returns: A mixin descriptor for the toggle button.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `viewId` | `string` | The split view's id. |
| `pane` | `SplitViewPane` | The pane the button collapses. |

## Examples

```tsx
<button data-pane="sidebar" mix={[splitViewToggle("inbox", "sidebar")]} />
```

## Used with it

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

### SPLIT_VIEW_ITEM_ATTRIBUTE

Attribute an app puts on each list link j/k steps through, in list order.

#### Signature

```ts
const SPLIT_VIEW_ITEM_ATTRIBUTE = "data-split-view-item"
```

### setSplitViewCollapsed

Collapses or restores `pane` and remembers it. The list and the detail never both
collapse: collapsing one brings the other back, so the view always shows a record.

#### Signature

```ts
setSplitViewCollapsed(root: HTMLElement, pane: SplitViewPane, collapsed: boolean): void
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `root` | `HTMLElement` | The split view. |
| `pane` | `SplitViewPane` | The pane to change. |
| `collapsed` | `boolean` | Whether it ends collapsed. |

### SplitViewKeyScope

Where a split view's j/k answer: `"page"` anywhere in the document, `"view"` only while
focus is inside the view, for a view shown on a page whose own keys come first.

#### Signature

```ts
type SplitViewKeyScope = "page" | "view"
```

One of `"page"`, `"view"`.