init

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

@@ -1,66 +1,152 @@
-/* Verschieben Sie alle .sidebar... und .nav-item... Klassen aus styles.css hierher */
+/* Globale Variablen für einfachere Wartung */
 :host {
-  display: block;
+  --sidebar-width-expanded: 280px;
+  --sidebar-width-collapsed: 96px;
+  --sidebar-padding: 1rem;
+  --sidebar-margin: 1rem;
+  --transition-speed: 0.3s;
+  --transition-ease: ease-in-out;
 }
 
+/* 1. Der Sidebar-Container */
 .sidebar {
-  width: 260px;
-  height: 100vh;
-  position: sticky;
-  top: 0;
+  position: relative;
   display: flex;
   flex-direction: column;
-  padding: 1.5rem;
-  background: var(--glass-bg);
-  backdrop-filter: var(--glass-backdrop-filter);
-  -webkit-backdrop-filter: var(--glass-backdrop-filter);
-  border-right: 1px solid var(--color-border);
-  transition: background-color var(--transition-speed),
-    border-color var(--transition-speed);
+  gap: 2rem;
+  width: var(--sidebar-width-expanded);
+  height: calc(100vh - (var(--sidebar-margin) * 2));
+  margin: var(--sidebar-margin);
+  padding: var(--sidebar-padding);
+  background-color: #fff;
+  border: 1px solid #e5e7eb; /* Helle Umrandung */
+  border-radius: 1rem;
+  transition: width var(--transition-speed) var(--transition-ease);
 }
+
+/* 2. Der Header-Bereich */
 .sidebar-header {
-  margin-bottom: 2rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem; /* Abstand zwischen Logo und Titel */
+  padding: 0.5rem;
 }
+
+.sidebar-logo {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  color: #111827;
+}
+
+
 .sidebar-title {
-  font-size: 1.5rem;
-  font-weight: 900;
+  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;
 }
+
+/* ======================================================= */
+/* --- 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 */
+  flex-shrink: 0; 
+  
+  /* Fügt eine sanfte Drehanimation hinzu */
+  transition: transform var(--transition-speed) var(--transition-ease);
+  transform: rotate(0deg); /* Startposition der Animation */
+}
+
+/* 3. Die Navigation (angepasst an das neue Design) */
 .sidebar-nav {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  flex-grow: 1;
-}
-.sidebar-footer {
-  margin-top: auto;
+  flex-grow: 1; /* Nimmt den restlichen vertikalen Platz ein */
 }
+
 .nav-item {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.75rem;
   padding: 0.75rem 1rem;
-  border-radius: var(--border-radius-md);
-  color: var(--color-text-light);
-  font-weight: 500;
+  border-radius: 0.5rem;
   text-decoration: none;
-  transition: all var(--transition-speed);
-}
-.nav-item app-icon {
-  font-size: 20px; /* Steuert die Größe des Icons */
-  transition: color var(--transition-speed);
+  font-weight: 500;
+  color: #4b5563;
+  white-space: nowrap;
+  transition: background-color 0.2s, color 0.2s;
 }
+
 .nav-item:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-  color: var(--color-text);
-}
-:host-context(body.dark-theme) .nav-item:hover {
-  background-color: rgba(255, 255, 255, 0.05);
+  background-color: #f3f4f6;
 }
+
 .nav-item.active {
-  background: var(--color-primary-gradient);
+  background-color: #3b82f6;
   color: #fff;
-  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.4);
 }
-.nav-item.active app-icon {
-  color: #fff;
+
+.nav-item app-icon {
+  font-size: 1.25rem;
+}
+
+.sidebar-footer {
+  margin-top: auto; /* Schiebt den Footer nach unten */
+}
+
+/* ======================================================= */
+/* --- Stile für den eingeklappten Zustand (.collapsed)  --- */
+/* ======================================================= */
+
+.sidebar.collapsed {
+  width: var(--sidebar-width-collapsed);
+}
+
+.sidebar.collapsed .sidebar-header {
+  justify-content: center; /* Zentriert das Logo, wenn der Titel weg ist */
+}
+
+.sidebar.collapsed .sidebar-title {
+  opacity: 0;
+  width: 0; /* Wichtig: expliziter Endwert für die Breiten-Animation */
+  transform: translateX(-10px); /* Leichte Bewegung nach links */
+  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 {
+  opacity: 0;
+  width: 0; /* Wichtig: expliziter Endwert für die Breiten-Animation */
+  pointer-events: none;
 }