docs: update spec and guide for search position and chevron removal
All checks were successful
Build & Publish / publish (push) Successful in 1m7s
All checks were successful
Build & Publish / publish (push) Successful in 1m7s
- COMPONENT_GUIDE: note search renders between Header and Sections, no chevrons on section headers - Spec: update rendering diagrams and description to match implemented behavior Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -114,8 +114,11 @@ Sidebar compound API:
|
||||
</Sidebar.Footer>
|
||||
</Sidebar>
|
||||
|
||||
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
|
||||
|
||||
@@ -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)
|
||||
|
||||
### `<Sidebar.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 `<Sidebar>` component provides `collapsed` and `onCollapseToggle` via React context (`SidebarContext`). Sub-components read from context — no prop drilling needed.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user