julienfroidefond/fintrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: improve sidebar component styling and layout responsiveness, adjusting padding and alignment based on collapsed state for better user experience

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-08 07:50:29 +01:00
parent 2177ae7b4a
commit b2c8237bea
1 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/dashboard/sidebar.tsx
View File

@@ -77,7 +77,10 @@ function SidebarContent({
</div> </div>
)} )}
<nav className="flex-1 p-4 space-y-2"> <nav className={cn(
"flex-1 space-y-2",
collapsed ? "p-2" : "p-4"
)}>
{navItems.map((item) => { {navItems.map((item) => {
const isActive = pathname === item.href; const isActive = pathname === item.href;
return ( return (
@@ -89,7 +92,7 @@ function SidebarContent({
"hover:bg-muted/70 hover:scale-[1.02] hover:shadow-md", "hover:bg-muted/70 hover:scale-[1.02] hover:shadow-md",
isActive && isActive &&
"bg-gradient-to-r from-primary/15 via-primary/10 to-primary/5 border-2 border-primary/30 shadow-lg shadow-primary/10 backdrop-blur-sm", "bg-gradient-to-r from-primary/15 via-primary/10 to-primary/5 border-2 border-primary/30 shadow-lg shadow-primary/10 backdrop-blur-sm",
collapsed && "justify-center px-2 w-12", collapsed && "justify-center px-2 w-12 mx-auto",
)} )}
> >
<item.icon <item.icon
@@ -114,13 +117,16 @@ function SidebarContent({
})} })}
</nav> </nav>
<div className="p-4 border-t border-border/30 space-y-2"> <div className={cn(
"border-t border-border/30 space-y-2",
collapsed ? "p-2" : "p-4"
)}>
<Link href="/settings" onClick={handleLinkClick}> <Link href="/settings" onClick={handleLinkClick}>
<Button <Button
variant="ghost" variant="ghost"
className={cn( className={cn(
"w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300 hover:bg-muted/70 hover:scale-[1.02] hover:shadow-md", "w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300 hover:bg-muted/70 hover:scale-[1.02] hover:shadow-md",
collapsed && "justify-center px-2 w-12", collapsed && "justify-center px-2 w-12 mx-auto",
)} )}
> >
<Settings className="w-5 h-5 shrink-0" /> <Settings className="w-5 h-5 shrink-0" />
@@ -135,7 +141,7 @@ function SidebarContent({
className={cn( className={cn(
"w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300", "w-full justify-start gap-4 h-12 rounded-2xl transition-all duration-300",
"text-destructive hover:text-destructive hover:bg-destructive/15 hover:scale-[1.02] hover:shadow-md", "text-destructive hover:text-destructive hover:bg-destructive/15 hover:scale-[1.02] hover:shadow-md",
collapsed && "justify-center px-2 w-12", collapsed && "justify-center px-2 w-12 mx-auto",
)} )}
> >
<LogOut className="w-5 h-5 shrink-0" /> <LogOut className="w-5 h-5 shrink-0" />
@@ -180,7 +186,10 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
collapsed ? "w-16" : "w-64", collapsed ? "w-16" : "w-64",
)} )}
> >
<div className="flex items-center justify-between p-6 border-b border-border/30"> <div className={cn(
"flex items-center border-b border-border/30 transition-all duration-300",
collapsed ? "justify-center p-4" : "justify-between p-6"
)}>
{!collapsed && ( {!collapsed && (
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary via-primary/90 to-primary/80 flex items-center justify-center shadow-xl shadow-primary/30 backdrop-blur-sm"> <div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-primary via-primary/90 to-primary/80 flex items-center justify-center shadow-xl shadow-primary/30 backdrop-blur-sm">
@@ -195,7 +204,10 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setCollapsed(!collapsed)} onClick={() => setCollapsed(!collapsed)}
className="ml-auto hover:bg-muted/60 rounded-xl transition-all duration-300 hover:scale-110" className={cn(
"hover:bg-muted/60 rounded-xl transition-all duration-300 hover:scale-110",
collapsed ? "" : "ml-auto"
)}
> >
{collapsed ? ( {collapsed ? (
<ChevronRight className="w-5 h-5" /> <ChevronRight className="w-5 h-5" />