diff --git a/docs/superpowers/specs/2026-04-02-composable-sidebar-design.md b/docs/superpowers/specs/2026-04-02-composable-sidebar-design.md index d6d8560..c6e2f48 100644 --- a/docs/superpowers/specs/2026-04-02-composable-sidebar-design.md +++ b/docs/superpowers/specs/2026-04-02-composable-sidebar-design.md @@ -45,6 +45,7 @@ The outer shell. Renders the sidebar frame with an optional search input and col {}} + searchValue="" onSearchChange={(query) => {}} className="" > @@ -134,6 +135,8 @@ v [icon] APPLICATIONS Header has: chevron (left), icon, label. Chevron rotates on collapse/expand. Active section gets the amber left-border accent (existing pattern). Clicking the header calls `onToggle`. +**Implementation detail:** `Sidebar.Section` and `Sidebar.Header` need to know the parent's `collapsed` state to switch between expanded and icon-rail rendering. The `` component provides `collapsed` and `onCollapseToggle` via React context (`SidebarContext`). Sub-components read from context — no prop drilling needed. + **Icon-rail click behavior:** In collapsed mode, clicking a section icon fires both `onCollapseToggle` and `onToggle` simultaneously on the same click. The sidebar expands and the section opens in one motion. No navigation occurs — the user is expanding the sidebar to see what's inside, not committing to a destination. They click a tree item after the section is visible to navigate. ### ``