[ @sdxc/ui/mixins ]
persist
Why JS.
import { persist } from "@sdxc/ui/mixins";Usage
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
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
<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.
Constant
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.
const SIDEBAR_TOGGLE_ATTRIBUTE = "data-sidebar-toggle"