appShellControls

Why JS.

tsx

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

Usage

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

typescript

appShellControls(options: AppShellControlsOptions): MixinDescriptor<HTMLInputElement>

Parameters

Parameter	Type	Required	Description
`options`	`AppShellControlsOptions`	Yes

Examples

tsx

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

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

Constant

APP_SHELL_SHORTCUT

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

typescript

const APP_SHELL_SHORTCUT = "mod+b"

Function

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.

typescript

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

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

tsx

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

Interface