From b62c8a20ec7d2af60d80f2ed88262225750b003f Mon Sep 17 00:00:00 2001
From: Xin Wang <your-email@example.com>
Date: Fri, 5 Jun 2026 15:38:33 +0800
Subject: [PATCH] Refactor Sidebar component for enhanced layout and navigation

Updated the Sidebar component to improve the layout and interaction of navigation items. Adjusted styles for better responsiveness, including a new structure for the assistant section and refined transition effects. Ensured consistent spacing and visual appeal in both collapsed and expanded states.
---
 src/components/layout/Sidebar.tsx | 94 ++++++++++++++++---------------
 1 file changed, 48 insertions(+), 46 deletions(-)

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 90c97ad..b58d24f 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -58,7 +58,7 @@ export function Sidebar({
         collapsed ? "w-[76px]" : "w-[252px]",
       ].join(" ")}
     >
-      <div className="flex h-[81px] items-center gap-3 border-b border-sidebar-border px-5 transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]">
+      <div className="shrink-0 flex h-[81px] items-center gap-3 border-b border-sidebar-border px-5 transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]">
         <div
           className="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-on-primary shadow-sm"
           style={{
@@ -83,43 +83,59 @@ export function Sidebar({
         </div>
       </div>
 
-      <nav className="flex-1 space-y-1 px-3 py-5">
-        <NavButton
-          active={active === "home"}
-          collapsed={collapsed}
-          icon={Home}
-          label="控制台"
-          onClick={() => onNavigate("home")}
-        />
+      <nav className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-3 py-5 pr-2 [scrollbar-width:thin] [scrollbar-color:var(--hairline-strong)_transparent]">
+        <div className="space-y-1">
+          <NavButton
+            active={active === "home"}
+            collapsed={collapsed}
+            icon={Home}
+            label="控制台"
+            onClick={() => onNavigate("home")}
+          />
+
+          <div className="pt-2">
+            {collapsed ? (
+              <div
+                className="flex h-8 items-center justify-center"
+                aria-hidden="true"
+                title="创建助手"
+              >
+                <span className="h-px w-6 rounded-full bg-hairline-strong" />
+              </div>
+            ) : (
+              <div
+                className={[
+                  "flex h-11 w-full items-center gap-3 rounded-full px-3 text-sm",
+                  assistantActive ? "text-foreground" : "text-muted-foreground",
+                ].join(" ")}
+              >
+                <Bot size={18} />
+                <span className="font-medium">创建助手</span>
+              </div>
+            )}
 
-        <div className="pt-2">
-          {collapsed ? (
-            <div
-              className="flex h-8 items-center justify-center"
-              aria-hidden="true"
-              title="创建助手"
-            >
-              <span className="h-px w-6 rounded-full bg-hairline-strong" />
-            </div>
-          ) : (
             <div
               className={[
-                "flex h-11 w-full items-center gap-3 rounded-full px-3 text-sm",
-                assistantActive ? "text-foreground" : "text-muted-foreground",
+                "mt-1 space-y-1 transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
+                collapsed ? "pl-0" : "pl-5",
               ].join(" ")}
             >
-              <Bot size={18} />
-              <span className="font-medium">创建助手</span>
+              {assistantSubItems.map((item) => (
+                <NavButton
+                  key={item.key}
+                  active={active === item.key}
+                  collapsed={collapsed}
+                  icon={item.icon}
+                  label={item.label}
+                  onClick={() => onNavigate(item.key)}
+                  small
+                />
+              ))}
             </div>
-          )}
+          </div>
 
-          <div
-            className={[
-              "mt-1 space-y-1 transition-[padding] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
-              collapsed ? "pl-0" : "pl-5",
-            ].join(" ")}
-          >
-            {assistantSubItems.map((item) => (
+          <div className="pt-2">
+            {mainItems.slice(1).map((item) => (
               <NavButton
                 key={item.key}
                 active={active === item.key}
@@ -127,27 +143,13 @@ export function Sidebar({
                 icon={item.icon}
                 label={item.label}
                 onClick={() => onNavigate(item.key)}
-                small
               />
             ))}
           </div>
         </div>
-
-        <div className="pt-2">
-          {mainItems.slice(1).map((item) => (
-            <NavButton
-              key={item.key}
-              active={active === item.key}
-              collapsed={collapsed}
-              icon={item.icon}
-              label={item.label}
-              onClick={() => onNavigate(item.key)}
-            />
-          ))}
-        </div>
       </nav>
 
-      <div className="space-y-2 border-t border-sidebar-border p-3">
+      <div className="shrink-0 space-y-2 border-t border-sidebar-border bg-sidebar p-3 shadow-[0_-12px_24px_rgba(0,0,0,0.12)]">
         {/* 个人中心 */}
         <button
           onClick={() => onNavigate("profile")}