fix sidebar style

Signed-off-by: Jintao Zhang <zhangjintao9020@gmail.com>

src/App.jsx

@@ -132,6 +132,8 @@ function App() {
             <button
               className="bg-transparent border-0 text-base text-lightest-text cursor-pointer flex items-center justify-center z-10 w-6 h-6 hover:text-text"
               onClick={toggleSidebar}
+              aria-label={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+              title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
             >
               {sidebarCollapsed ? '→' : '←'}
             </button>
@@ -146,6 +148,16 @@ function App() {
           />
         </div>
 
+        {/* Floating expand button that appears when sidebar is collapsed */}
+        <button
+          className="expand-sidebar-button"
+          onClick={toggleSidebar}
+          aria-label="Expand sidebar"
+          title="Expand sidebar"
+        >
+          →
+        </button>
+
         <div className="flex-1 flex flex-col overflow-hidden bg-background">
           {currentChatId ? (
             <ChatWindow

src/index.css

@@ -115,17 +115,24 @@ body {
     @apply w-[50px] overflow-hidden;
   }
 
-  .sidebar.collapsed .chat-list,
+  .sidebar.collapsed .chat-list {
+    @apply hidden;
+  }
+
   .sidebar.collapsed .sidebar-header h2 {
     @apply hidden;
   }
 
+  .sidebar.collapsed .sidebar-header {
+    @apply justify-center;
+  }
+
   .sidebar-header {
     @apply flex justify-between items-center py-3 px-4 border-b border-border;
   }
 
   .sidebar.collapsed .sidebar-header {
-    @apply py-3 px-[5px] justify-center;
+    @apply py-3 px-[5px];
   }
 
   .sidebar-header h2 {
@@ -139,6 +146,24 @@ body {
   .toggle-sidebar-button:hover {
     @apply text-text;
   }
+
+  /* Ensure the toggle button is always visible and clickable */
+  .sidebar.collapsed .toggle-sidebar-button {
+    @apply opacity-100 visible;
+  }
+
+  /* Floating expand button that appears when sidebar is collapsed */
+  .expand-sidebar-button {
+    @apply fixed left-[60px] top-[80px] bg-background border border-border rounded-full w-8 h-8 flex items-center justify-center cursor-pointer shadow-md z-20 opacity-0 invisible transition-all duration-300;
+  }
+
+  .sidebar.collapsed ~ .expand-sidebar-button {
+    @apply opacity-100 visible;
+  }
+
+  .expand-sidebar-button:hover {
+    @apply bg-hover text-text;
+  }
 }
 
 @layer components {
@@ -577,12 +602,17 @@ body {
     left: 0;
   }
 
-  /* 确保在移动设备上收起的侧边栏仍然可见 */
+  /* Make sure the collapsed sidebar is still visible on mobile */
   .sidebar.collapsed {
     width: 50px;
     left: 0;
   }
 
+  /* Hide the floating expand button on mobile as it's not needed */
+  .expand-sidebar-button {
+    display: none;
+  }
+
   .message-content {
     max-width: 100%;
   }