Side Panel

<dsx-side-panel> — Side Panel

Persistent navigation/content rail that can collapse down to a slim toggle strip.

Live Preview

Import

import '@bnotk/dsx/components/side-panel.js';

Usage

<dsx-side-panel>
  <nav>
    <a href="#">Dashboard</a>
  </nav>
</dsx-side-panel>

Elements

<dsx-side-panel>

Collapsible side rail with built-in toggle button and scrollable content region.

Properties

Property	Type	Default	Description
open	boolean	true	Expands the panel to its full width when true.
collapsible	boolean	true	Shows or hides the built-in toggle button.

Methods

Method	Description
toggle()	Toggles open and emits dsx-toggle with the new state.

Events

Event	Detail	Description
dsx-toggle	{ open: boolean }	Bubbles/composed whenever toggle() changes the panel state.

Slots

Slot	Description
default	Panel content rendered inside the scrollable .content region.

CSS Parts

This element does not expose shadow parts.

Notes

• When open is false the host width shrinks to 3rem and the content region is hidden with display: none.
• If collapsible is false there is no built-in button, but the public toggle() method still exists.

Behavior Notes

• The full width defaults to var(--ds2-sidepanel-width, 19.25rem).
• The toggle button label changes between ◀ and ▶ and updates its aria-label between “Collapse” and “Expand”.

Styling Notes

• The panel uses a white surface, right-hand grey divider, and transition driven by --ds2-transition-base.
• The content region itself is scrollable.