diff --git a/COMPONENT_GUIDE.md b/COMPONENT_GUIDE.md index 2299d5d..1558ede 100644 --- a/COMPONENT_GUIDE.md +++ b/COMPONENT_GUIDE.md @@ -114,8 +114,11 @@ Sidebar compound API: -The app controls all content — sections, order, tree data, collapse state. -Sidebar provides the frame, search input, and icon-rail collapse mode. +Notes: +- Search input auto-renders between Header and first Section (not above Header) +- Section headers have no chevron — the entire row is clickable to toggle +- The app controls all content — sections, order, tree data, collapse state +- Sidebar provides the frame, search input, and icon-rail collapse mode ``` ### Data page pattern 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 c6e2f48..7b8161b 100644 --- a/docs/superpowers/specs/2026-04-02-composable-sidebar-design.md +++ b/docs/superpowers/specs/2026-04-02-composable-sidebar-design.md @@ -73,6 +73,7 @@ The outer shell. Renders the sidebar frame with an optional search input and col - Width transition: `transition: width 200ms ease` - Collapse toggle button (`<<` / `>>` chevron) in top-right corner - Search input hidden when collapsed +- Search input auto-positioned between `Sidebar.Header` and first `Sidebar.Section` (not above Header) ### `` @@ -119,13 +120,13 @@ An accordion section with a collapsible header and content area. **Expanded rendering:** ``` -v [icon] APPLICATIONS +[icon] APPLICATIONS (children rendered here) ``` **Collapsed rendering:** ``` -> [icon] APPLICATIONS +[icon] APPLICATIONS ``` **In sidebar icon-rail mode:** @@ -133,7 +134,7 @@ v [icon] APPLICATIONS [icon] <- centered, tooltip shows label on hover ``` -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`. +Header has: icon and label (no chevron — the entire row is clickable). Active section gets the amber left-border accent (existing pattern). Clicking anywhere on the header row 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.