Responsive sidebar (rail / drawer / FAB)

Generated from mcp/patterns.registry.json — do not edit by hand; change the registry and run bun run patterns:build.

Index card — the docs below are the canonical explanation; deep-tier pattern pages additionally carry invariants and emulation notes.

Category: App Shell & Navigation · Tier: light · Risk: low — structural pattern, no external services

Implements an asymmetric responsive sidebar — a persistent hover-expanding rail on desktop and an off-canvas thumb-accessible drawer on mobile, triggered by a FAB.

When to use: Reach for it when adapting primary navigation to different viewport sizes or adjusting sidebar width/expand behavior.

Docs

• docs/blueprint/app-shell/sidebar.md (GitHub · GitLab)

Code

• src/lib/components/shell/ (GitHub · GitLab)
• src/lib/state/sidebar.svelte.ts (GitHub · GitLab)

Proof

• /showcases/shell/sidebar

Machine-readable record: app-shell-sidebar in mcp/patterns.registry.json.