init

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

@@ -4,8 +4,8 @@
   --sidebar-width-collapsed: 96px;
   --sidebar-padding: 1rem;
   --sidebar-margin: 1rem;
-  --transition-speed: 0.3s;
-  --transition-ease: ease-in-out;
+  --transition-speed: 0.35s; /* Leicht langsamere Animation für ein weicheres Gefühl */
+  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Eine professionelle Easing-Funktion */
 }
 
 /* 1. Der Sidebar-Container */
@@ -19,17 +19,19 @@
   margin: var(--sidebar-margin);
   padding: var(--sidebar-padding);
   background-color: #fff;
-  border: 1px solid #e5e7eb; /* Helle Umrandung */
+  border: 1px solid #e5e7eb;
   border-radius: 1rem;
   transition: width var(--transition-speed) var(--transition-ease);
 }
 
-/* 2. Der Header-Bereich */
+/* 2. Der Header-Bereich (vereinfacht und stabilisiert) */
 .sidebar-header {
   display: flex;
   align-items: center;
-  gap: 0.75rem; /* Abstand zwischen Logo und Titel */
+  /* KEIN justify-content hier. Die Anordnung wird anders gesteuert. */
+  gap: 0.75rem;
   padding: 0.5rem;
+  height: 32px; /* Feste Höhe für Stabilität */
 }
 
 .sidebar-logo {
@@ -39,70 +41,43 @@
   color: #111827;
 }
 
-
+/* ======================================================= */
+/* --- HIER IST DIE WICHTIGSTE ÄNDERUNG                  --- */
+/* ======================================================= */
 .sidebar-title {
   margin: 0;
   font-size: 1.25rem;
   font-weight: 600;
   white-space: nowrap;
   opacity: 1;
-  overflow: hidden; 
-  transition: opacity 0.2s ease-in-out, 
-              width 0.3s ease-in-out 0.05s, 
-              transform 0.3s ease-in-out;
+  overflow: hidden; /* Verhindert, dass Text während der Animation herausragt */
+
+  /* Präzise, gestaffelte Transition für einen organischen Effekt */
+  transition: width var(--transition-speed) var(--transition-ease),
+              opacity calc(var(--transition-speed) / 2) var(--transition-ease),
+              margin-left var(--transition-speed) var(--transition-ease);
 }
 
-/* ======================================================= */
-/* --- HIER PASSIERT DIE MAGIE FÜR DEN BUTTON           --- */
-/* ======================================================= */
 .sidebar-header app-button {
-  /* Weist den Button an, den gesamten verfügbaren Platz als linken Abstand zu nutzen */
-  margin-left: auto; 
-  
-  /* Verhindert, dass der Button schrumpft */
+  margin-left: auto; /* Dies ist jetzt der EINZIGE Mechanismus, der den Button nach rechts schiebt */
   flex-shrink: 0;
-  
-  /* Fügt eine sanfte Drehanimation hinzu */
   transition: transform var(--transition-speed) var(--transition-ease);
-  transform: rotate(0deg); /* Startposition der Animation */
+  transform: rotate(0deg);
 }
 
-/* 3. Die Navigation (angepasst an das neue Design) */
-.sidebar-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  flex-grow: 1; /* Nimmt den restlichen vertikalen Platz ein */
-}
+/* 3. Navigation und Footer (unverändert) */
+.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; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: 0.5rem; text-decoration: none; font-weight: 500; color: #4b5563; white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
+.nav-item:hover { background-color: #f3f4f6; }
+.nav-item.active { background-color: #3b82f6; color: #fff; }
+.nav-item app-icon { font-size: 1.25rem; }
 
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  border-radius: 0.5rem;
-  text-decoration: none;
-  font-weight: 500;
-  color: #4b5563;
+.nav-item span {
   white-space: nowrap;
-  transition: background-color 0.2s, color 0.2s;
-}
-
-.nav-item:hover {
-  background-color: #f3f4f6;
-}
-
-.nav-item.active {
-  background-color: #3b82f6;
-  color: #fff;
-}
-
-.nav-item app-icon {
-  font-size: 1.25rem;
-}
-
-.sidebar-footer {
-  margin-top: auto; /* Schiebt den Footer nach unten */
+  overflow: hidden;
+  opacity: 1;
+  transition: width 0.3s var(--transition-ease) 0.05s, opacity 0.2s var(--transition-ease);
 }
 
 /* ======================================================= */
@@ -113,40 +88,25 @@
   width: var(--sidebar-width-collapsed);
 }
 
-.sidebar.collapsed .sidebar-header {
-  justify-content: center; /* Zentriert das Logo, wenn der Titel weg ist */
-}
+/* WICHTIG: Keine Änderung am .sidebar-header selbst mehr nötig! */
 
 .sidebar.collapsed .sidebar-title {
+  width: 0; /* Animiert die Breite auf 0 */
   opacity: 0;
-  width: 0; /* Wichtig: expliziter Endwert für die Breiten-Animation */
-  transform: translateX(-10px); /* Leichte Bewegung nach links */
+  margin-left: -0.75rem; /* Kompensiert den 'gap', damit das Logo perfekt zentriert wird */
   pointer-events: none;
 }
 
-/* Dreht den Button um 180 Grad, wenn die Sidebar eingeklappt ist */
 .sidebar.collapsed .sidebar-header app-button {
   transform: rotate(180deg);
-  margin-left: 0; /* Setzt den Margin zurück, da 'justify-content' jetzt die Positionierung übernimmt */
 }
 
 .sidebar.collapsed .nav-item {
   justify-content: center;
 }
 
-.nav-item span {
-  white-space: nowrap;
-  opacity: 1;
-
-  /* === NEU: Präzise Transition auch hier === */
-  overflow: hidden;
-  transition: opacity 0.2s ease-in-out, 
-              width 0.3s ease-in-out 0.05s;
-}
-
-
 .sidebar.collapsed .nav-item span {
+  width: 0;
   opacity: 0;
-  width: 0; /* Wichtig: expliziter Endwert für die Breiten-Animation */
   pointer-events: none;
 }