docs: update composable sidebar spec with clarified decisions
Add searchValue prop for controlled input, SidebarContext for collapsed state propagation, LayoutShell migration plan, and icon-rail simultaneous callback behavior. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -45,6 +45,7 @@ The outer shell. Renders the sidebar frame with an optional search input and col
|
||||
<Sidebar
|
||||
collapsed={false}
|
||||
onCollapseToggle={() => {}}
|
||||
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 `<Sidebar>` 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.
|
||||
|
||||
### `<Sidebar.Footer>`
|
||||
|
||||
Reference in New Issue
Block a user