fix the collapse buttom and the items when sidebar is collapsed

Author: Mrbiboy

frontend/src/components/Sidebar.css

@@ -34,108 +34,66 @@
   50% { background-position: -200% 0; }
 }
 
+.sidebar {
+  --sidebar-width: 17rem;
+}
+
 .sidebar--collapsed {
   width: 4.5rem;
+  --sidebar-width: 4.5rem;
 }
 
 .sidebar--expanded {
   width: 17rem;
+  --sidebar-width: 17rem;
 }
 
-/* Header Section */
-.sidebar__header {
-  padding: 2rem 1.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  background: rgba(0, 0, 0, 0.2);
-  position: relative;
-}
 
-.sidebar__header::after {
-  content: '';
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 60%;
-  height: 1px;
-  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
-}
-
-.sidebar__title {
-  font-size: 1.4rem;
-  font-weight: 800;
-  color: #f8fafc;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin: 0;
-  text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
-}
-
-.sidebar__title-icon {
-  width: 1.75rem;
-  height: 1.75rem;
-  color: #60a5fa;
-  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.4));
-}
 
 .sidebar__toggle {
-  padding: 0.75rem;
-  background: linear-gradient(135deg, #374151, #4b5563);
+  padding: 0.25rem;
+  background: rgba(255, 255, 255, 0.1);
   color: #e5e7eb;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 50%;
+  border: none;
+  border-radius: 6px;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
-  position: relative;
-  overflow: auto;
-}
-
-.sidebar__toggle::before {
-  content: '';
   position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 0;
-  height: 0;
-  background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
-  transition: all 0.3s ease;
-  transform: translate(-50%, -50%);
-}
-
-.sidebar__toggle:hover::before {
-  width: 100px;
-  height: 100px;
+  top: 1rem;
+  right: 1rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  z-index: 100;
 }
 
 .sidebar__toggle:hover {
-  background: linear-gradient(135deg, #4b5563, #6b7280);
+  background: rgba(255, 255, 255, 0.2);
   color: #f8fafc;
-  transform: rotate(180deg);
 }
 
 .sidebar__toggle-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  z-index: 1;
+  width: 0.875rem;
+  height: 0.875rem;
 }
 
 /* Navigation */
 .sidebar__nav {
   flex: 1;
-  padding: 1.5rem 1rem;
+  padding: 3rem 1rem 1.5rem 1rem;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 0.25rem;
   position: relative;
 }
 
+.sidebar--collapsed .sidebar__nav {
+  padding: 3rem 0.5rem 1.5rem 0.5rem;
+  gap: 0.125rem;
+}
+
 .sidebar__nav::before {
   content: '';
   position: absolute;
@@ -213,7 +171,11 @@
 
 .sidebar__nav-item--collapsed {
   justify-content: center;
-  padding: 1rem 0.5rem;
+  padding: 0.75rem;
+  margin: 0.25rem;
+  border-radius: 8px;
+  min-height: 2.5rem;
+  width: calc(100% - 0.5rem);
 }
 
 .sidebar__nav-icon {
@@ -223,6 +185,11 @@
   filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.2));
 }
 
+.sidebar--collapsed .sidebar__nav-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
 .sidebar__nav-label {
   margin-left: 1rem;
   font-size: 0.9rem;
@@ -273,7 +240,11 @@
 
 .sidebar__logout--collapsed {
   justify-content: center;
-  padding: 1rem 0.5rem;
+  padding: 0.75rem;
+  margin: 0.25rem 1rem;
+  border-radius: 8px;
+  min-height: 2.5rem;
+  width: calc(100% - 2.5rem);
 }
 
 .sidebar__logout-icon {