# Sidebar with overlay and pin modes > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is A notes app ("Sedge") on a landscape tablet with one sidebar that has two personalities. **Pinned:** it sits in the layout, the note content shifts right by 280px and there is no scrim. **Overlay:** it floats above the content with a soft right-hand shadow and a 32% scrim, and closes on scrim tap, Escape or picking a note. The pin toggle in the sidebar header switches modes while the sidebar stays exactly where it is; only the content margin and the scrim animate, so the switch reads as the page moving, not the sidebar. The sidebar is always the same absolutely positioned element; mode is expressed with two body classes and three transitions. ## Reference behaviour 1. Initial state: `body.open.pinned`. Sidebar visible at 0–280px with a search field, two notebook groups and eight notes; the first note is current. Main content starts at 280px and shows the note (serif 40px title, meta line, paragraphs, a to-do list with two done items). Pin button is filled accent and reads "Pinned"; the "Pin | Overlay" segment in the top bar shows Pin pressed. 2. Click "Pinned" (or press P, or click "Overlay" in the segment): `.pinned` is removed. Main's `margin-left` animates 280 → 0 over 320ms; the scrim fades in to 32% over 320ms; the sidebar grows a `12px 0 40px rgba(28,27,25,.14)` shadow; the pin icon rotates from −45° back to 0 and the button turns outlined, reading "Pin". 3. Click the scrim, press Escape, or click a note in overlay mode: the sidebar slides to `translateX(-100%)` over 320ms and becomes `visibility: hidden` once the slide finishes; the scrim fades out; focus moves to the menu button. 4. Click the menu button (or press `[`): the sidebar slides in from −100% over 320ms. In overlay mode the scrim returns; in pinned mode the main margin animates to 280px at the same time. 5. Click "Pin" while the overlay is open: the scrim fades out and main's margin animates 0 → 280 while the sidebar stays put. If the sidebar is closed when a mode button is pressed, it opens in that mode. 6. Click the chevron in the sidebar header: closes the sidebar in either mode (in pinned mode the content reflows back to the full width). 7. Click a note: it becomes current (`--selected` background); the breadcrumb and page title update; in overlay mode the sidebar then closes. ## Structure ``` 1180 × 820 (pinned, open) overlay, open ┌───────────┬──────────────────────────────────┐ ┌───────────┬─────────────────────────┐ │ Sedge [Pinned] < │ ≡ Work / Halden… (Pin|Overlay)│ │ Sedge [Pin] <│▒▒ ≡ Work / … ▒▒▒▒▒▒▒▒▒ │ │ [ Search notes ] │ │ │ [ Search ] ▐▒▒ scrim 32%, shadow ▒▒│ │ WORK 6 │ Edited today · 1,240… │ │ WORK ▐▒▒ │ │ ▌Halden rebrand… │ Halden rebrand · │ │ ▌Halden… ▐▒▒ content at x = 0 │ │ Q4 print run │ kickoff notes │ │ Q4 print ▐▒▒ │ │ Interview loop… │ paragraphs, 640px max │ │ … ▐▒▒ │ │ PERSONAL 4 │ [x] Share the board… │ │ ▐▒▒ │ │ Hardanger in May │ [ ] Write the rationale │ │ ▐▒▒ │ │ 10 notes Synced │ [ toggles · P pin │ │ 10 notes ▐▒▒ │ └───────────┴──────────────────────────────────┘ └───────────┴─────────────────────────┘ 280 main margin-left 280 280 (absolute, z 10) margin 0 ``` - `` — state lives on the body: `.open` (sidebar visible) and `.pinned` (reflow mode). - `