Components Sidebar header

Sidebar header

Area-context block at the top of the sidebar. Stacks one or more card-style rows — current organisation, partner, branch — each acting as a switcher trigger when the user has more than one option to choose from.

<koala-sidebar-header>

Canonical

The most-used shape. Partner area renders two rows: partner identity and current branch. Conveyancing renders one row for the current organisation.

Variants

3 variants

Organisation

Koala Conveyancing

Conveyancing

1 row

Partner

2 rows

Organisation

Hawthorne & Co

Static

SwitcherEvent=null

States

2 states

Expanded

Collapsed

Second row hides; first row shrinks to the avatar.

Props

SidebarHeaderRow

Property	Type	Notes
Label	string	Eyebrow above the title.
Title	string	Primary text.
Avatar	SidebarHeaderAvatar?	Leading glyph. Null renders the generic building icon (branch row).
Tooltip	string?	Shown on hover while the sidebar is collapsed.
SwitcherEvent	string?	Alpine window event dispatched on click. Null makes the row a static card.
SwitcherHref	string?	Fallback URL for ctrl/cmd-click.

Do & don't

Organisation

Hawthorne & Co

Do Leave SwitcherEvent null when the user can't actually switch. The row reads as a context label, not a misleading click affordance.

Organisation

Koala Conveyancing

Region

South West

Plan

Pro

Don't Don't stuff metadata into extra rows. The header is for "where am I right now" — anything more belongs in a settings page.

Sidebar collapse toggle

Renders the animated chevron-into-wall SVG used inside the sidebar collapse button. Flips 180° via Alpine when the surrounding scope sets sidebarCollapsed = true.

<koala-sidebar-collapse-toggle>

Click to flip; rotation animates with a 400ms transition. Hover the icon to see the chevron + shaft nudge.