wx44wx/ai-video-admin-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Sidebar component for enhanced layout and navigation

Browse Source 
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.
This commit is contained in:
Xin Wang
2026-06-05 15:38:33 +08:00
parent ab4633d0d1
commit b62c8a20ec
1 changed files with 48 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/layout/Sidebar.tsx
View File

@@ -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")}