diff --git a/COMPONENT_GUIDE.md b/COMPONENT_GUIDE.md
index bfce0ee..a1c199c 100644
--- a/COMPONENT_GUIDE.md
+++ b/COMPONENT_GUIDE.md
@@ -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
diff --git a/package.json b/package.json
index fbf76dd..d1dd5dc 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/design-system/layout/Sidebar/Sidebar.module.css b/src/design-system/layout/Sidebar/Sidebar.module.css
index e6e0546..9a1bbda 100644
--- a/src/design-system/layout/Sidebar/Sidebar.module.css
+++ b/src/design-system/layout/Sidebar/Sidebar.module.css
@@ -53,11 +53,6 @@
justify-content: center;
}
-.sidebarCollapsed .collapseToggle {
- top: 52px;
- right: 50%;
- transform: translateX(50%);
-}
.logoImg {
width: 28px;
diff --git a/src/design-system/layout/Sidebar/Sidebar.test.tsx b/src/design-system/layout/Sidebar/Sidebar.test.tsx
index 0c5b570..8d94815 100644
--- a/src/design-system/layout/Sidebar/Sidebar.test.tsx
+++ b/src/design-system/layout/Sidebar/Sidebar.test.tsx
@@ -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(
@@ -141,7 +141,8 @@ describe('Sidebar compound component', () => {
,
)
- 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
diff --git a/src/design-system/layout/Sidebar/Sidebar.tsx b/src/design-system/layout/Sidebar/Sidebar.tsx
index d88563d..e691955 100644
--- a/src/design-system/layout/Sidebar/Sidebar.tsx
+++ b/src/design-system/layout/Sidebar/Sidebar.tsx
@@ -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 && (
)}