order
SidePanel
A detail panel beside the page, or a sheet from the edge on phones.
Task detailsPick a row; the panel collapses to a rail and comes back
Harbour rebrand
In context
On a phoneThe panel slides over the list from the right
Tasks
Rota export
Done
Harbour homepage
In progress
Icon audit
To do
Tasks
Rota export
Done
Harbour homepage
In progress
Icon audit
To do
Props
| Prop | Type | Required | Default |
|---|---|---|---|
title | ReactNode | No | — |
open | boolean | undefined | No | — |
defaultOpen | boolean | undefined | No | true |
onOpenChange | ((open: boolean) => void) | undefined | No | — |
hideToggle | boolean | undefined | No | false |
width | number | undefined | No | 320 |
className | string | undefined | No | — |
Behaviour
Non-modal: no backdrop, no portal, the page beside it stays usable. Collapsing leaves a slim rail with a reopen button, so there is always a way back in. Same open/defaultOpen/onOpenChange convention as every other stateful construct.
data-rebar-* attributes
data-rebar-component="side-panel", data-rebar-open; parts: header, close, content, toggle (on the collapsed rail).