{ "name": "responsive-shell-sidebar", "kind": "page", "primary": "body", "page": "/packages/web-components/patterns/responsive-shell-sidebar/responsive-shell-sidebar.examples.html", "slots": [ { "name": "leading-inline", "tagName": "aside", "html": "\n
\n

Tokens

\n
\n
\n \n Primary\n Secondary\n Neutral\n Surface\n \n
\n " }, { "name": "main", "tagName": "main", "html": "\n \n \n \n \n\n \n
\n

Responsive Shell Sidebar pattern

\n
\n
\n \n Resize this viewport: at ≤900px the leading + trailing sidebars collapse\n to drawers triggered by the toolbar buttons. Above 900px the sidebars are\n inline. The same content is mounted in both surfaces; consumer signals\n drive both copies via the parent template's re-read.\n \n
\n \n\n
\n

The pattern

\n

Three pieces:

\n
    \n
  1. Inline mounts for the sidebars wrapped in .wide-only (display: contents at >900px; display: none at ≤900px).
    2. \n
  2. Drawer twins with the same children, mounted outside the shell's named slots, controlled by toolbar buttons inside .narrow-only.
    3. \n
  3. MediaQueryList listener that auto-closes the drawers on viewport widening (the gap FEEDBACK-06 §3 explicitly flagged).
    4. \n
\n\n

Dual-mount caveat

\n

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 (or vice versa). 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:

\n \n

For these, either: (a) lift the state to a signal in the parent, or (b) document the unmount-on-resize edge.

\n\n

Auto-close on viewport widening

\n const mql = window.matchMedia('(max-width: 900px)');\nmql.addEventListener('change', (e) => {\n if (!e.matches) {\n // Viewport widened past breakpoint — close any open drawers\n document.getElementById('leading-drawer').open = false;\n document.getElementById('trailing-drawer').open = false;\n }\n});\n\n

State sharing

\n

Single signal source consumed by both copies. The parent template reads the signal once and passes the extracted value to both the inline mount AND the drawer mount; on signal change the parent re-renders both:

\n import { signal } from '@adia-ai/web-components/core';\n\nconst activeToken = signal('primary');\n\nstatic template = () => {\n const current = activeToken.value; // dep read here\n return html`\n <aside class=\"wide-only\">\n <list-ui> ... .active=${current === 'primary'} ... </list-ui>\n </aside>\n <drawer-ui id=\"leading-drawer\">\n <list-ui> ... .active=${current === 'primary'} ... </list-ui>\n </drawer-ui>\n `;\n}\n\n

Future v0.6.0: built-in responsive-breakpoint

\n

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, the pattern above is the canonical recipe.

\n
" }, { "name": "narrow-toolbar", "tagName": "row-ui", "html": "\n " }, { "name": "trailing-inline", "tagName": "aside", "html": "\n
\n

Settings

\n
\n
\n \n Lightness\n Chroma\n Hue\n \n
\n " }, { "name": "leading-drawer", "tagName": "drawer-ui", "html": "
\n

Tokens

\n
\n
\n \n Primary\n Secondary\n Neutral\n Surface\n \n
" }, { "name": "trailing-drawer", "tagName": "drawer-ui", "html": "
\n

Settings

\n
\n
\n \n Lightness\n Chroma\n Hue\n \n
" } ], "nested": [], "attrs": { "with": "", "leading": "", "trailing": "", "sidebars": "", "that": "", "collapse": "", "to": "", "drawers": "", "below": "", "a": "", "px": "", "viewport": "", "breakpoint": "", "dual-mount": "", "same": "", "content": "", "renders": "", "inline": "", "on": "", "wide": "", "viewports": "", "inside": "", "drawer-ui": "" }, "html": "\n\n \n
\n \n \n\n \n
\n \n \n \n \n \n\n \n
\n

Responsive Shell Sidebar pattern

\n
\n
\n \n Resize this viewport: at ≤900px the leading + trailing sidebars collapse\n to drawers triggered by the toolbar buttons. Above 900px the sidebars are\n inline. The same content is mounted in both surfaces; consumer signals\n drive both copies via the parent template's re-read.\n \n
\n \n\n
\n

The pattern

\n

Three pieces:

\n
    \n
  1. Inline mounts for the sidebars wrapped in .wide-only (display: contents at >900px; display: none at ≤900px).
    2. \n
  2. Drawer twins with the same children, mounted outside the shell's named slots, controlled by toolbar buttons inside .narrow-only.
    3. \n
  3. MediaQueryList listener that auto-closes the drawers on viewport widening (the gap FEEDBACK-06 §3 explicitly flagged).
    4. \n
\n\n

Dual-mount caveat

\n

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 (or vice versa). 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:

\n
    \n
  • Native <input>/<textarea> with no signal binding
    • \n
  • Components using this.querySelector(...) with imperative state
    • \n
  • Scroll-position-sensitive containers (e.g. chat threads at a specific scroll)
    • \n
\n

For these, either: (a) lift the state to a signal in the parent, or (b) document the unmount-on-resize edge.

\n\n

Auto-close on viewport widening

\n const mql = window.matchMedia('(max-width: 900px)');\nmql.addEventListener('change', (e) => {\n if (!e.matches) {\n // Viewport widened past breakpoint — close any open drawers\n document.getElementById('leading-drawer').open = false;\n document.getElementById('trailing-drawer').open = false;\n }\n});\n\n

State sharing

\n

Single signal source consumed by both copies. The parent template reads the signal once and passes the extracted value to both the inline mount AND the drawer mount; on signal change the parent re-renders both:

\n import { signal } from '@adia-ai/web-components/core';\n\nconst activeToken = signal('primary');\n\nstatic template = () => {\n const current = activeToken.value; // dep read here\n return html`\n <aside class=\"wide-only\">\n <list-ui> ... .active=${current === 'primary'} ... </list-ui>\n </aside>\n <drawer-ui id=\"leading-drawer\">\n <list-ui> ... .active=${current === 'primary'} ... </list-ui>\n </drawer-ui>\n `;\n}\n\n

Future v0.6.0: built-in responsive-breakpoint

\n

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, the pattern above is the canonical recipe.

\n
\n
\n\n \n \n
\n\n \n \n
\n

Tokens

\n
\n
\n \n Primary\n Secondary\n Neutral\n Surface\n \n
\n \n\n \n
\n

Settings

\n
\n
\n \n Lightness\n Chroma\n Hue\n \n
\n \n\n \n", "source": "packages/web-components/patterns/responsive-shell-sidebar/responsive-shell-sidebar.examples.html", "metadata": { "domain": "layout", "description": "\"Editor-shell" }, "captured_at": "2026-06-10T20:25:14.783Z", "template": [ { "id": "root", "component": "Text", "textContent": "Tokens Primary Secondary Neutral Surface Responsive Shell Sidebar pattern Resize this viewport: at ≤900px the leading + trailing sidebars collapse to drawers triggered by the toolbar buttons. Above 900px the sidebars are inline. The same content is mounted in both surfaces; consumer signals drive both copies via the parent template's re-read. The pattern Three pieces: Inline mounts for the sidebars wrapped in .wide-only (display: contents at >900px; display: none at ≤900px). Drawer twins with the same children, mounted outside the shell's named slots, controlled by toolbar buttons inside .narrow-only . MediaQueryList listener that auto-closes the drawers on viewport widening (the gap FEEDBACK-06 §3 explicitly flagged). Dual-mount caveat 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 (or vice versa). 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: Native <input> / <textarea> with no signal binding Components using this.querySelector(...) with imperative state Scroll-position-sensitive containers (e.g. chat threads at a specific scroll) For these, either: (a) lift the state to a signal in the parent, or (b) document the unmount-on-resize edge. Auto-close on viewport widening const mql = window.matchMedia('(max-width: 900px)'); mql.addEventListener('change', (e) => { if (!e.matches) { // Viewport widened past breakpoint — close any open drawers document.getElementById('leading-drawer').open = false; document.getElementById('trailing-drawer').open = false; } }); State sharing Single signal source consumed by both copies. The parent template reads the signal once and passes the extracted value to both the inline mount AND the drawer mount; on signal change the parent re-renders both: import { signal } from '@adia-ai/web-components/core'; const activeToken = signal('primary'); static template = () => { const current = activeToken.value; // dep read here return html` <aside class=\"wide-only\"> <list-ui> ... .active=${current === 'primary'} ... </list-ui> </aside> <drawer-ui id=\"leading-drawer\"> <list-ui> ... .active=${current === 'primary'} ... </list-ui> </drawer-ui> `; } Future v0.6.0: built-in responsive-breakpoint 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, the pattern above is the canonical recipe. Settings Lightness Chroma Hue Tokens Primary Secondary Neutral Surface Settings Lightness Chroma Hue // Wire toolbar buttons to drawer triggers document.getElementById('open-leading')?.addEventListener('press', () => { document.getElementById('leading-drawer').open = true; }); document.getElementById('open-trailing')?.addEventListener('press', () => { document.getElementById('trailing-drawer').open = true; }); // Auto-close drawers when viewport crosses breakpoint (widening) const mql = window.matchMedia('(max-width: 900px)'); mql.addEventListener('change', (e) => { if (!e.matches) { document.getElementById('leading-drawer').open = false; document.getElementById('trailing-drawer').open = false; } });", "variant": "body" } ] }