[DS] Sidebar: search bar position and section chevrons #120

New Issue

claude · 2026-04-02T22:38:07+02:00

claude commented

2026-04-02 22:38:07 +02:00

Design System Changes Needed

Two small fixes for the composable Sidebar component.

1. Search bar renders above Header

Current: SidebarRoot renders the search input before {children} (line 203 in Sidebar.tsx), so it appears above Sidebar.Header.

Expected: Search should render between the Header and the first Section.

CURRENT:                    EXPECTED:
+------------------+        +------------------+
| [Filter...]      |        | [C] Cameleer     |
| [C] Cameleer     |        | [Filter...]      |
| v Applications   |        | v Applications   |
+------------------+        +------------------+

Fix options:

A) Move the search block after {children} that are Sidebar.Header — requires detecting Header children
B) Simpler: just move the search block to render after all non-section children, before the scrollable nav area
C) Render search as a slot that Sidebar.Header outputs below itself

2. Section chevrons are redundant

Current: SidebarSection renders a ChevronRight/ChevronDown icon on every section header (line 127-128). Clicking the entire header already toggles expand/collapse.

Request: Remove the chevron from section headers entirely. The expand/collapse behavior via header click is sufficient — the chevron adds visual noise without functionality.

If removing entirely is too opinionated, add an optional hideChevron?: boolean prop that defaults to true (hidden).

Files:

src/design-system/layout/Sidebar/Sidebar.tsx — SidebarRoot (search position), SidebarSection (chevron)

## Design System Changes Needed Two small fixes for the composable `Sidebar` component. ### 1. Search bar renders above Header **Current:** `SidebarRoot` renders the search input before `{children}` (line 203 in Sidebar.tsx), so it appears above `Sidebar.Header`. **Expected:** Search should render between the Header and the first Section. ``` CURRENT: EXPECTED: +------------------+ +------------------+ | [Filter...] | | [C] Cameleer | | [C] Cameleer | | [Filter...] | | v Applications | | v Applications | +------------------+ +------------------+ ``` **Fix options:** - A) Move the search block after `{children}` that are `Sidebar.Header` — requires detecting Header children - B) Simpler: just move the search block to render after all non-section children, before the scrollable nav area - C) Render search as a slot that `Sidebar.Header` outputs below itself ### 2. Section chevrons are redundant **Current:** `SidebarSection` renders a `ChevronRight`/`ChevronDown` icon on every section header (line 127-128). Clicking the entire header already toggles expand/collapse. **Request:** Remove the chevron from section headers entirely. The expand/collapse behavior via header click is sufficient — the chevron adds visual noise without functionality. If removing entirely is too opinionated, add an optional `hideChevron?: boolean` prop that defaults to `true` (hidden). **Files:** - `src/design-system/layout/Sidebar/Sidebar.tsx` — `SidebarRoot` (search position), `SidebarSection` (chevron)

claude commented

2026-04-02 22:43:31 +02:00

Both fixes implemented in cameleer/design-system@0cf696c:

Search position — Search input now auto-renders between Sidebar.Header and the first Sidebar.Section using Children.toArray to locate the Header child.
Chevrons removed — Section headers no longer render ChevronRight/ChevronDown. The entire header row (icon + label) is clickable to toggle.

Both fixes implemented in `cameleer/design-system@0cf696c`: 1. **Search position** — Search input now auto-renders between `Sidebar.Header` and the first `Sidebar.Section` using `Children.toArray` to locate the Header child. 2. **Chevrons removed** — Section headers no longer render `ChevronRight`/`ChevronDown`. The entire header row (icon + label) is clickable to toggle.

claude closed this issue

2026-04-02 22:43:34 +02:00

claude commented

2026-04-02 22:48:18 +02:00

Fixed in DS v0.1.25, bumped in server 2265ebf. Search bar now renders below Header, section chevrons removed.

Fixed in DS v0.1.25, bumped in server `2265ebf`. Search bar now renders below Header, section chevrons removed.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: cameleer/cameleer-server#120