# responsive-shell-sidebar

> **Pattern** — Editor-shell with leading + trailing sidebars that collapse to a drawer below a viewport breakpoint. Documented in v0.5.3 §157 per FEEDBACK-06 §3.

## The problem

Every responsive editor-shell app (Figma, Linear, VSCode, Notion) needs sidebars that work at all viewport widths. On wide viewports the sidebars are inline panels; below ~900px they collapse to a drawer triggered by a toolbar button. This pattern hand-rolls the dual-mount across consumers — same content rendered in two surfaces, only one visible at a time.

FEEDBACK-06 §3 reported color-app needing ~40 LOC of CSS + state plumbing to land this pattern in Tokens Studio. This pattern doc standardizes the recipe so future consumers don't re-derive it.

## What's in the pattern

1. **CSS convention**: `.wide-only` (`display: contents` at `>900px`, `display: none` at `≤900px`) + `.narrow-only` (inverse).
2. **Dual mounts**: inline sidebars wrapped in `.wide-only`; drawer twins outside the shell's slots.
3. **Toolbar triggers**: buttons inside `.narrow-only` open the drawer twins.
4. **MediaQueryList listener**: auto-closes the drawers when the viewport widens past the breakpoint (the gap FEEDBACK-06 §3 explicitly flagged).
5. **Signal-based state sharing**: parent template reads signals once and passes extracted values to both mount points.

## Caveat: components with local DOM state

Components with **local DOM state** (uncontrolled form inputs, scroll position, focused element) will lose state when the viewport crosses the breakpoint — the inline copy unmounts and the drawer copy mounts. **Signal-bound components are safe** because their state lives in the signal, not the DOM. Most AdiaUI primitives are signal-backed; the affected cases are documented in the examples.

## Files

- `responsive-shell-sidebar.html` — pattern shell page (iframes the examples).
- `responsive-shell-sidebar.examples.html` — full working dual-mount example with auto-close MQL.
- `responsive-shell-sidebar.css` — the `.wide-only` / `.narrow-only` + breakpoint shell grid.

## Future graduation (v0.6.0)

FEEDBACK-06 §3 Option A proposed a built-in `<editor-sidebar responsive-breakpoint="900">` attribute that auto-stamps the drawer twin. Deferred to v0.6.0 — requires editor-shell + pane-ui semantics audit (focus handoff at the inline↔drawer transition, dual-mount event-listener deduplication, etc.). Pairs with a `<show-when breakpoint="...">` trait. Until then, this pattern is the canonical recipe.

## References

- FEEDBACK-06 §3 — author's recipe + Option A vs Option B trade-off
- RESPONSE-06 ✅ #3 verdict — Option B chosen (this pattern)
- .claude/docs/plans/0.5.3-release-plan.md §157
