good

src/app/shared/components/layout/sidebar/sidebar.component.css

@@ -3,8 +3,8 @@
   --sidebar-width-expanded: 280px;
   --sidebar-width-collapsed: 96px;
   --sidebar-padding: 1rem;
-  --sidebar-margin: 1rem; /* Angenommen, da es in Ihrem globalen CSS nicht vorhanden war */
-  --transition-speed: 0.35s; /* Lokale Geschwindigkeit für spezifische Sidebar-Animationen */
+  --sidebar-margin: 1rem;
+  --transition-speed: 0.35s;
   --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -13,74 +13,49 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 1.5rem; /* Reduzierter Abstand */
   width: var(--sidebar-width-expanded);
-  height: calc(100vh - (var(--sidebar-margin) * 2));
-  /* margin: var(--sidebar-margin); */
+  height:  calc(100vh - 2rem - 46px);
   padding: var(--sidebar-padding);
-  /* background-color: var(--color-surface); ANGEPASST */
-  /* border: 1px solid var(--color-border); ANGEPASST */
-  border-radius: var(--border-radius-md); /* ANGEPASST */
+  /* border-right: 1px solid var(--color-border); */
+  /* border-radius: var(--border-radius-md); */
   transition: width var(--transition-speed) var(--transition-ease);
+  /* background-color: var(--color-surface); */
 }
 
-/* 2. Der Header-Bereich */
-.sidebar-header {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem;
-  height: auto;
-}
+/* ======================================================= */
+/* --- HEADER & SEPARATER BUTTON WURDEN ENTFERNT       --- */
+/* ======================================================= */
 
-.sidebar-logo {
-  flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  color: var(--color-primary); /* ANGEPASST für Akzent */
-}
-
-.sidebar-title {
-  margin: 0;
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: var(--color-text); /* ANGEPASST */
-  white-space: nowrap;
-  clip-path: inset(0 0% 0 0);
-  transition: clip-path var(--transition-speed) var(--transition-ease);
-}
-
-/* 3. Navigation und Footer */
+/* 2. Navigation */
 .sidebar-nav {
-  flex-grow: 1;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
 }
-.sidebar-footer {
-  margin-top: auto;
-}
+
 .nav-item {
   display: flex;
   align-items: center;
   padding: 0.75rem 1rem;
-  border-radius: var(--border-radius-md); /* ANGEPASST */
+  border-radius: var(--border-radius-md);
   text-decoration: none;
   font-weight: 500;
-  color: var(--color-text-light); /* ANGEPASST */
+  color: var(--color-text-light);
   white-space: nowrap;
   transition: background-color 0.2s, color 0.2s;
   overflow: hidden;
   position: relative; 
+  cursor: pointer;
 }
 .nav-item:hover {
-  background-color: var(--color-body-bg-hover); /* ANGEPASST */
-  color: var(--color-text); /* ANGEPASST */
+  background-color: var(--color-body-bg-hover);
+  color: var(--color-text);
 }
 .nav-item.active {
-  background: var(--color-primary); /* ANGEPASST */
+  background: var(--color-primary);
   color: #fff;
-  box-shadow: var(--box-shadow-sm); /* ANGEPASST für Tiefe */
+  box-shadow: var(--box-shadow-sm);
 }
 .nav-item app-icon {
   font-size: 1.25rem;
@@ -88,7 +63,7 @@
   flex-shrink: 0;
   position: relative;
   z-index: 2;
-  background-color: transparent; /* ANGEPASST */
+  background-color: transparent;
   transition: background-color 0.2s; 
 }
 .nav-item span {
@@ -101,46 +76,26 @@
   z-index: 1;
 }
 
-/* 4. Positionierung des Toggle-Buttons */
-.sidebar-toggle-btn {
-  position: absolute;
-  border-radius: 50%;
-  top: calc(var(--sidebar-padding) + 5px);
-  right: var(--sidebar-padding);
-  transform: scale(0.55) rotate(180deg);
-  transition: top var(--transition-speed) var(--transition-ease),
-    right var(--transition-speed) var(--transition-ease),
-    transform var(--transition-speed) var(--transition-ease),
-    box-shadow var(--transition-speed) var(--transition-ease);
-}
-
-/* 5. Stile für den eingeklappten Zustand (.collapsed) */
+/* 3. Stile für den eingeklappten Zustand (.collapsed) */
 .sidebar.collapsed {
   width: var(--sidebar-width-collapsed);
 }
 
-.sidebar.collapsed .sidebar-title {
-  clip-path: inset(0 100% 0 0);
-  pointer-events: none;
+/* WICHTIG: Zentriert das Icon, wenn der Text weg ist, und entfernt den Leerraum */
+.sidebar.collapsed .nav-item {
+  /* justify-content: center; */
 }
 
 .sidebar.collapsed .nav-item span {
   clip-path: inset(0 100% 0 0);
-  margin-left: -20px;
+  /* margin-left: -20px; Dieser Wert muss raus er*/
   pointer-events: none;
 }
 
-.sidebar.collapsed .sidebar-toggle-btn {
-  
-  right: -2px;
-  transform: scale(0.55) rotate(0deg); /* Hinzugefügt für vertikale Zentrierung */
-  /* box-shadow: var(--box-shadow-md); ANGEPASST */
-}
-
-/* 6. Zustandsabhängige Hintergrundfarben für das Icon */
+/* 4. Zustandsabhängige Hintergrundfarben für das Icon */
 .nav-item:hover app-icon {
-  background-color: transparent; /* ANGEPASST */
+  background-color: var(--color-body-bg-hover);
 }
 .nav-item.active app-icon {
-  background: transparent;
+  background: var(--color-primary);
 }