# appShellControls

> Why JS: writing the collapse cookie, a ⌘B shortcut, closing the phone sheet when a link is followed in place and following a back row on Esc have no HTML or CSS equivalent.

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

Wires the shell around the checkbox it is mixed onto until the checkbox leaves the page.
⌘B (Ctrl+B elsewhere) flips the checkbox while the sidebar is docked and opens or closes the
sheet below `sheetBelow`; it stays the editor's bold inside a text area or rich editor.

## Signature

```ts
appShellControls(options: AppShellControlsOptions): MixinDescriptor<HTMLInputElement>
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `options` | `AppShellControlsOptions` |  |

## Examples

```tsx
<input type="checkbox" data-app-shell-collapse mix={[appShellControls({ cookieName, sidebarId })]} />
```

## Used with it

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

### APP_SHELL_SHORTCUT

The shortcut that collapses and expands the sidebar, or opens the sheet on a phone.

#### Signature

```ts
const APP_SHELL_SHORTCUT = "mod+b"
```

### appShellQueries

The media queries on either side of `sheetBelow`, docked from it and a sheet under it, which
the shell's styles, its toggle and these controls all read so they switch at the same width.

#### Signature

```ts
appShellQueries(sheetBelow: AppShellSheetBelow): {
	docked: string;
	sheet: string;
}
```

Returns: The docked and sheet media queries.

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `sheetBelow` | `"48rem" \| "64rem"` | The width under which the sidebar is a sheet. |

#### Examples

```tsx
appShellQueries("64rem").docked // "(min-width: 64rem)"
```

### AppShellControlsOptions

Options for appShellControls.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `cookieName` | `string` | The cookie the collapsed state is written to, as `"true"` or `"false"`. |
| `sidebarId` | `string` | The sidebar element's id, which is also the sheet's popover. |
| `sheetBelow?` | `"48rem" \| "64rem"` |  |

### AppShellSheetBelow

The width under which an app shell's sidebar is a sheet behind the menu button.

#### Signature

```ts
type AppShellSheetBelow = "48rem" | "64rem"
```

One of `"48rem"`, `"64rem"`.