From b97a14a6829ced0767695c5c7655916a6b386bfc Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 18 Jun 2026 16:02:42 +0000
Subject: [PATCH] Move sidebar collapse toggle to floating edge button

Previously sat as an inline button below the nav items, disconnected
from the rest of the layout. Now it's a small circle straddling the
sidebar/content boundary, vertically centered on the viewport - the
common pattern for collapsible side panels.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
---
 src/components/Sidebar.tsx | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index d7d6a8a..c8fd688 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -31,6 +31,26 @@ export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
       className="fixed left-0 top-0 z-50 h-screen overflow-hidden flex flex-col py-6"
       style={{ width: `${width}px`, backgroundColor: '#0A0B0D' }}
     >
+      {/* Collapse Toggle — floating on the sidebar/content edge, vertically centered */}
+      <button
+        onClick={onToggle}
+        className="fixed top-1/2 z-50 flex items-center justify-center rounded-full cursor-pointer transition-colors"
+        style={{
+          left: `${width - 11}px`,
+          transform: 'translateY(-50%)',
+          width: '22px',
+          height: '22px',
+          border: '1px solid rgba(200,164,52,0.25)',
+          backgroundColor: '#15161A',
+          color: '#7A7D85',
+          boxShadow: '0 0 8px rgba(0,0,0,0.4)',
+        }}
+        onMouseEnter={(e) => { e.currentTarget.style.color = '#C8A434'; e.currentTarget.style.borderColor = 'rgba(200,164,52,0.5)' }}
+        onMouseLeave={(e) => { e.currentTarget.style.color = '#7A7D85'; e.currentTarget.style.borderColor = 'rgba(200,164,52,0.25)' }}
+      >
+        {collapsed ? <ChevronRight size={12} /> : <ChevronLeft size={12} />}
+      </button>
+
       {/* Logo — prominent, centered at top. Blend mode hides the baked-in
           dark background of the source PNG so only the gold arc shows. */}
       <div className="flex flex-col items-center mb-10" style={{ paddingTop: '4px' }}>
@@ -84,15 +104,6 @@ export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
         })}
       </nav>
 
-      {/* Collapse Toggle */}
-      <button
-        onClick={onToggle}
-        className="p-1.5 rounded cursor-pointer bg-transparent transition-colors self-center"
-        style={{ border: '1px solid #1E2025', color: '#7A7D85', marginBottom: '12px' }}
-      >
-        {collapsed ? <ChevronRight size={12} /> : <ChevronLeft size={12} />}
-      </button>
-
       {/* System Status — rounded block, fits inside nav with breathing room */}
       <div style={{ width: '100%', padding: '0 12px 16px 12px' }}>
         <div