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

Refactor Sidebar component styles for improved layout and interaction

Browse Source 
Updated the Sidebar component to enhance the collapsed state behavior by adjusting CSS classes for better responsiveness and visual consistency. Improved the transition effects and layout of the toggle button, ensuring a smoother user experience when interacting with the sidebar.
This commit is contained in:
Xin Wang
2026-06-05 15:17:47 +08:00
parent 4206e29550
commit ab4633d0d1
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -179,8 +179,8 @@ export function Sidebar({
<span
className={[
"min-w-0 flex-1 overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
collapsed ? "w-0 opacity-0 -translate-x-2" : "opacity-100 translate-x-0",
"min-w-0 overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]",
collapsed ? "w-0 flex-none opacity-0 -translate-x-2" : "flex-1 opacity-100 translate-x-0",
].join(" ")}
>
<span className="block truncate text-sm font-medium text-foreground">
@@ -203,8 +203,8 @@ export function Sidebar({
onClick={onToggle}
title={collapsed ? "展开侧栏" : "收起侧栏"}
className={[
"group flex h-10 w-full items-center gap-2 overflow-hidden rounded-full border border-hairline-strong text-sm text-muted-foreground transition-[background-color,color,border-color,transform] duration-200 hover:bg-surface-strong hover:text-foreground active:scale-[0.98]",
collapsed ? "justify-center px-0" : "justify-between px-3.5",
"group flex h-10 w-full items-center overflow-hidden rounded-full border border-hairline-strong text-sm text-muted-foreground transition-[background-color,color,border-color,transform] duration-200 hover:bg-surface-strong hover:text-foreground active:scale-[0.98]",
collapsed ? "justify-center gap-0 px-0" : "justify-between gap-2 px-3.5",
].join(" ")}
>
<span