From b2c8237bea6dbb0b3892e765f5714b52c5bd0271 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Mon, 8 Dec 2025 07:50:29 +0100
Subject: [PATCH] refactor: improve sidebar component styling and layout
 responsiveness, adjusting padding and alignment based on collapsed state for
 better user experience

---
 components/dashboard/sidebar.tsx | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/components/dashboard/sidebar.tsx b/components/dashboard/sidebar.tsx
index 0620ea0..2dd932f 100644
--- a/components/dashboard/sidebar.tsx
+++ b/components/dashboard/sidebar.tsx
@@ -77,7 +77,10 @@ function SidebarContent({
         </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) => {
           const isActive = pathname === item.href;
           return (
@@ -89,7 +92,7 @@ function SidebarContent({
                   "hover:bg-muted/70 hover:scale-[1.02] hover:shadow-md",
                   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",
-                  collapsed && "justify-center px-2 w-12",
+                  collapsed && "justify-center px-2 w-12 mx-auto",
                 )}
               >
                 <item.icon
@@ -114,13 +117,16 @@ function SidebarContent({
         })}
       </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}>
           <Button
             variant="ghost"
             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",
-              collapsed && "justify-center px-2 w-12",
+              collapsed && "justify-center px-2 w-12 mx-auto",
             )}
           >
             <Settings className="w-5 h-5 shrink-0" />
@@ -135,7 +141,7 @@ function SidebarContent({
           className={cn(
             "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",
-            collapsed && "justify-center px-2 w-12",
+            collapsed && "justify-center px-2 w-12 mx-auto",
           )}
         >
           <LogOut className="w-5 h-5 shrink-0" />
@@ -180,7 +186,10 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
         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 && (
           <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">
@@ -195,7 +204,10 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
           variant="ghost"
           size="icon"
           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 ? (
             <ChevronRight className="w-5 h-5" />