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

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

@@ -58,7 +58,7 @@ export function Sidebar({
collapsed ? "w-[76px]" : "w-[252px]", collapsed ? "w-[76px]" : "w-[252px]",
].join(" ")} ].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 <div
className="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-on-primary shadow-sm" className="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-on-primary shadow-sm"
style={{ style={{
@@ -83,7 +83,8 @@ export function Sidebar({
</div> </div>
</div> </div>
<nav className="flex-1 space-y-1 px-3 py-5"> <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 <NavButton
active={active === "home"} active={active === "home"}
collapsed={collapsed} collapsed={collapsed}
@@ -145,9 +146,10 @@ export function Sidebar({
/> />
))} ))}
</div> </div>
</div>
</nav> </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 <button
onClick={() => onNavigate("profile")} onClick={() => onNavigate("profile")}