LanternUI.Components.SidePanel (LanternUI v0.8.2)

Copy Markdown View Source

Collapsible right-hand panel plus a toggle that remembers open/closed in localStorage.

<.side_panel_toggle
  id="tickets-panel-toggle"
  panel_id="tickets-panel"
  panel_key="tickets"
  open={@panel_open}
  phx-click="toggle_panel"
/>

<.side_panel id="tickets-panel" open={@panel_open} aria-label="Project panel">
  <.inspector>…</.inspector>
</.side_panel>

The toggle is a button/1 with label/kbd plus the persist attrs. It owns the LanternSidePanel hook. On mount, with no stored choice, the panel defaults open at ≥1280px and closed below. After that the viewer's last choice wins. The LiveView still owns open — the hook pushes set_panel (override with event) when the stored value disagrees with aria-pressed.

Not resizable. Not the app-shell sidebar (LanternSidebar).

Summary

Functions

side_panel(assigns)
side_panel_toggle(assigns)

Functions

side_panel(assigns)

Attributes

  • id (:string) (required) - DOM id; referenced by the toggle's aria-controls.
  • open (:boolean) - Whether the panel is shown. Defaults to false.
  • class (:any) - Extra classes merged onto the panel. Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

  • inner_block (required) - Panel body.

side_panel_toggle(assigns)

Attributes

  • id (:string) (required) - DOM id for the hook.
  • panel_id (:string) (required) - id of the side_panel/1 this toggle controls.
  • panel_key (:string) (required) - localStorage key suffix, e.g. tickets. Stored as lui-side-panel:<key>.
  • open (:boolean) - Current open state; mirrored to aria-pressed. Defaults to false.
  • event (:string) - LiveView event the hook pushes on restore: %{open: boolean}. Defaults to "set_panel".
  • persist_event (:string) - Optional server event name the hook listens to for an explicit persist. Defaults to "side_panel".
  • label (:string) - Accessible name and tooltip. Defaults to "Toggle panel".
  • kbd (:string) - Optional keyboard hint in the tooltip. Defaults to nil.
  • variant (:string) - Defaults to "outline". Must be one of "ghost", "outline", or "primary".
  • size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
  • class (:any) - Extra classes merged onto the button. Defaults to nil.
  • Global attributes are accepted. Arbitrary HTML/phx-* attributes passed through.

Slots

  • inner_block - Override the default panel-split glyph.