Components Drawers

Drawers

Right-docked companion panel — the non-modal counterpart to the modal and side tray. It squeezes the main content rather than covering it (an in-flow flex child of a dock whose width animates open), several can stack side by side, and below lg it becomes a full-screen modal sheet with a scrim.

<koala-drawer>

Canonical

This column is the page content. Opening the drawer animates the panel in from the right and squeezes this column — it is not overlaid. Resize below lg and the same drawer presents as a full-screen modal sheet with a scrim.

<div x-data="{ joeyOpen: false }" class="flex">
    <div class="flex-1">@* page content — squeezed when the drawer opens *@</div>
    <div class="koala-drawer-dock">
        <koala-drawer flag="joeyOpen" width="22rem" aria-label="Joey">
            <koala-drawer-header flag="joeyOpen">Joey</koala-drawer-header>
            <koala-drawer-content>…</koala-drawer-content>
        </koala-drawer>
    </div>
</div>

The host supplies the .koala-drawer-dock (a flex row beside the content column). ESC closes; on mobile the scrim/backdrop dismiss it too.

Variants

2 capabilities

In practice a drawer is opened through the Content-drawer dock below — which always gives it the icon rail, resize and preview — so both variants are demonstrated there rather than as bare base-drawer toggles.

Width

Set the docked width with the width attribute (default 24rem), or let the dock size it and drag the seam to resize.

Stacking

Several drawers dock side by side, each squeezing the page further. Open two rows below and both share the width in full; open more and they page from the icon bar.

States

3 states

Closed

Width 0 — the content column has the full width.

Open (desktop)

Docks at its width and squeezes the content beside it. No scrim — non-modal.

Open (mobile < lg)

Full-screen modal sheet with a scrim; ESC / backdrop dismiss.

Props

4 attributes

Attribute	Values	Notes
flag	string	Alpine boolean controlling open/closed (e.g. `$store.call.open`). The parent scope must declare it.
width	CSS length	Docked width on desktop. Defaults to `24rem`. Mobile is always a full-screen sheet.
title	string	Optional. Renders a default header with a close button. Omit when using `<koala-drawer-header>` or content-supplied chrome.
aria-label	string	Accessible label when no `title` is set. Falls back to `Panel`.

Sub-components

2 helpers

Tag	Attributes	Notes
<koala-drawer-header>	flag (string)	Title row with a close button; use when the header needs siblings (icon + title + a mono reference line). `flag` mirrors the parent so the close-X clears it.
<koala-drawer-content>	class (string?)	Scrollable body (`flex-1 overflow-y-auto`). Optional — content that scrolls itself (e.g. the softphone panel) can be a direct child instead.

Content-drawer dock

stacking · resizable · tabbed preview

A shared dock any surface taps into. A row on the page opens a companion drawer (an icon, a title, and content the dock resolves). Several stack as width-sharing columns that squeeze the page; drag the seam to resize; switch between open drawers from the icon rail along the bottom; and hover an icon to preview that drawer's live content.

Resize, the icon rail, and preview belong to the dock — they are optional extras it adds. The base <koala-drawer> (the Canonical / Stacking examples above) only docks and squeezes; it has none of them.

7b Station Road

The feed keeps working while drawers are open beside it — open any row.

Tasks

3 open

Chase Searchflow	High · due tomorrow
Order office copies	Medium · due Friday
Approve the draft plan	Low · no due date

Messages

2 unread

Mortgage offer issued	Halifax · 4h ago
Quick question on completion	J. Okafor · 1d ago
Keys ready for collection	Bramley & Co · 2d ago

Documents

3 files

Draft contract pack	PDF · 14 pages
Local authority search	PDF · 8 pages
TA6 property information	PDF · 6 pages

Reusable primitive: a row opens a drawer by { kind, id } and the dock resolves its icon, title and content (AJAX-loaded in the app, static here). Drawers are only ever shown in full — a single one fills the dock, two split it evenly, and any that don't fit collapse to the nav bar (page with the chevrons or jump by icon; hover an icon to preview). Meant to be mounted once and opened from anywhere (like modals / side trays).

Do & don't

Do Use a drawer for a companion surface you keep open while working the page (Joey, the softphone) — it squeezes, so the page stays usable.

Don't Don't use a drawer for a focused decision that must block the page — that's a modal (scrim, inert background) or, for editing one entity, a side tray.