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 && ( )}