feat: remove expand toggle from collapsed sidebar, bump v0.1.54
All checks were successful
Build & Publish / publish (push) Successful in 1m49s
SonarQube Analysis / sonarqube (push) Successful in 2m36s

Collapsed sidebar no longer shows an expand button — clicking any
section icon expands the sidebar and opens that section instead.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-15 22:05:10 +02:00
parent 7c6d383ac9
commit d775df61e4
5 changed files with 10 additions and 14 deletions

View File

@@ -128,6 +128,7 @@ Notes:
- `maxHeight` (CSS string) constrains the content area — section header stays visible, children scroll - `maxHeight` (CSS string) constrains the content area — section header stays visible, children scroll
- Both groups scroll independently when the viewport is short - Both groups scroll independently when the viewport is short
- Custom thin scrollbars match the dark sidebar aesthetic - Custom thin scrollbars match the dark sidebar aesthetic
- No expand button when collapsed — clicking any section icon expands the sidebar and opens that section
``` ```
### Data page pattern ### Data page pattern

View File

@@ -1,6 +1,6 @@
{ {
"name": "@cameleer/design-system", "name": "@cameleer/design-system",
"version": "0.1.53", "version": "0.1.54",
"type": "module", "type": "module",
"main": "./dist/index.es.js", "main": "./dist/index.es.js",
"module": "./dist/index.es.js", "module": "./dist/index.es.js",

View File

@@ -53,11 +53,6 @@
justify-content: center; justify-content: center;
} }
.sidebarCollapsed .collapseToggle {
top: 52px;
right: 50%;
transform: translateX(50%);
}
.logoImg { .logoImg {
width: 28px; width: 28px;

View File

@@ -132,8 +132,8 @@ describe('Sidebar compound component', () => {
expect(onCollapseToggle).toHaveBeenCalledTimes(1) expect(onCollapseToggle).toHaveBeenCalledTimes(1)
}) })
// 7. renders expand toggle label when collapsed // 7. hides collapse toggle when sidebar is collapsed
it('renders expand toggle when sidebar is collapsed', () => { it('hides collapse toggle when sidebar is collapsed', () => {
render( render(
<Wrapper> <Wrapper>
<Sidebar collapsed onCollapseToggle={vi.fn()}> <Sidebar collapsed onCollapseToggle={vi.fn()}>
@@ -141,7 +141,8 @@ describe('Sidebar compound component', () => {
</Sidebar> </Sidebar>
</Wrapper>, </Wrapper>,
) )
expect(screen.getByRole('button', { name: /expand sidebar/i })).toBeInTheDocument() expect(screen.queryByRole('button', { name: /collapse sidebar/i })).not.toBeInTheDocument()
expect(screen.queryByRole('button', { name: /expand sidebar/i })).not.toBeInTheDocument()
}) })
// 8. renders search input and calls onSearchChange // 8. renders search input and calls onSearchChange

View File

@@ -3,7 +3,6 @@ import {
Search, Search,
X, X,
ChevronsLeft, ChevronsLeft,
ChevronsRight,
} from 'lucide-react' } from 'lucide-react'
import styles from './Sidebar.module.css' import styles from './Sidebar.module.css'
import { SidebarContext, useSidebarContext } from './SidebarContext' import { SidebarContext, useSidebarContext } from './SidebarContext'
@@ -194,14 +193,14 @@ function SidebarRoot({
className ?? '', className ?? '',
].filter(Boolean).join(' ')} ].filter(Boolean).join(' ')}
> >
{/* Collapse toggle */} {/* Collapse toggle (hidden when collapsed — sections expand on click) */}
{onCollapseToggle && ( {onCollapseToggle && !collapsed && (
<button <button
className={styles.collapseToggle} className={styles.collapseToggle}
onClick={onCollapseToggle} onClick={onCollapseToggle}
aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'} aria-label="Collapse sidebar"
> >
{collapsed ? <ChevronsRight size={14} /> : <ChevronsLeft size={14} />} <ChevronsLeft size={14} />
</button> </button>
)} )}