From d775df61e48ebe19e8ad72749c1f0669dbcfcaf4 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Wed, 15 Apr 2026 22:05:10 +0200
Subject: [PATCH] feat: remove expand toggle from collapsed sidebar, bump
 v0.1.54
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 COMPONENT_GUIDE.md                                  | 1 +
 package.json                                        | 2 +-
 src/design-system/layout/Sidebar/Sidebar.module.css | 5 -----
 src/design-system/layout/Sidebar/Sidebar.test.tsx   | 7 ++++---
 src/design-system/layout/Sidebar/Sidebar.tsx        | 9 ++++-----
 5 files changed, 10 insertions(+), 14 deletions(-)

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