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
- Both groups scroll independently when the viewport is short
- 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

View File

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

View File

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

View File

@@ -132,8 +132,8 @@ describe('Sidebar compound component', () => {
expect(onCollapseToggle).toHaveBeenCalledTimes(1)
})
// 7. renders expand toggle label when collapsed
it('renders expand toggle when sidebar is collapsed', () => {
// 7. hides collapse toggle when sidebar is collapsed
it('hides collapse toggle when sidebar is collapsed', () => {
render(
<Wrapper>
<Sidebar collapsed onCollapseToggle={vi.fn()}>
@@ -141,7 +141,8 @@ describe('Sidebar compound component', () => {
</Sidebar>
</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

View File

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