good

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

@@ -4,12 +4,13 @@
   --sidebar-width-collapsed: 96px;
   --sidebar-padding: 1rem;
   --sidebar-margin: 1rem;
-  --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 */
+  --transition-speed: 0.35s;
+  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* 1. Der Sidebar-Container */
 .sidebar {
+  /* WICHTIG: Dies ist jetzt der Positionierungs-Kontext für den Button */
   position: relative;
   display: flex;
   flex-direction: column;
@@ -24,14 +25,13 @@
   transition: width var(--transition-speed) var(--transition-ease);
 }
 
-/* 2. Der Header-Bereich (vereinfacht und stabilisiert) */
+/* 2. Der Header-Bereich */
 .sidebar-header {
   display: flex;
   align-items: center;
-  /* KEIN justify-content hier. Die Anordnung wird anders gesteuert. */
   gap: 0.75rem;
   padding: 0.5rem;
-  height: 32px; /* Feste Höhe für Stabilität */
+  height: 32px;
 }
 
 .sidebar-logo {
@@ -41,43 +41,79 @@
   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; /* 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);
+  clip-path: inset(0 0% 0 0);
+  transition: clip-path var(--transition-speed) var(--transition-ease);
 }
 
-.sidebar-header app-button {
-  margin-left: auto; /* Dies ist jetzt der EINZIGE Mechanismus, der den Button nach rechts schiebt */
+/* 3. Navigation und Footer */
+.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: 0.5rem;
+  text-decoration: none;
+  font-weight: 500;
+  color: #4b5563;
+  white-space: nowrap;
+  transition: background-color 0.2s, color 0.2s;
+  overflow: hidden;
+}
+.nav-item:hover {
+  background-color: #f3f4f6;
+}
+.nav-item.active {
+  background-color: #3b82f6;
+  color: #fff;
+}
+.nav-item app-icon {
+  font-size: 1.25rem;
+  width: 32px;
   flex-shrink: 0;
-  transition: transform var(--transition-speed) var(--transition-ease);
-  transform: rotate(0deg);
 }
-
-/* 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 span {
   white-space: nowrap;
-  overflow: hidden;
-  opacity: 1;
-  transition: width 0.3s var(--transition-ease) 0.05s, opacity 0.2s var(--transition-ease);
+  clip-path: inset(0 0 0 0);
+  margin-left: 0.75rem;
+  transition: clip-path 0.3s var(--transition-ease),
+    margin-left 0.3s var(--transition-ease);
+}
+
+/* ======================================================= */
+/* --- NEU: Positionierung des Toggle-Buttons          --- */
+/* ======================================================= */
+
+.sidebar-toggle-btn {
+  position: absolute;
+  /* width: 36px;
+  height: 36px; */
+  border-radius: 50%;
+  /* border: 1px solid #e5e7eb; */
+  /* background-color: #fff; */
+
+  /* Startposition (aufgeklappt): Im Header, rechts */
+  top: calc(var(--sidebar-padding)); /* Sidebar-Padding + Header-Padding */
+  right: var(--sidebar-padding);
+  transform: rotate(180deg);
+
+  /* Sanfter Übergang für alle Änderungen */
+  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);
 }
 
 /* ======================================================= */
@@ -88,25 +124,20 @@
   width: var(--sidebar-width-collapsed);
 }
 
-/* WICHTIG: Keine Änderung am .sidebar-header selbst mehr nötig! */
-
 .sidebar.collapsed .sidebar-title {
-  width: 0; /* Animiert die Breite auf 0 */
-  opacity: 0;
-  margin-left: -0.75rem; /* Kompensiert den 'gap', damit das Logo perfekt zentriert wird */
+  clip-path: inset(0 100% 0 0);
   pointer-events: none;
 }
 
-.sidebar.collapsed .sidebar-header app-button {
-  transform: rotate(180deg);
-}
-
-.sidebar.collapsed .nav-item {
-  justify-content: center;
-}
-
 .sidebar.collapsed .nav-item span {
-  width: 0;
-  opacity: 0;
+  clip-path: inset(0 100% 0 0);
+  margin-left: -20px;
   pointer-events: none;
-}
+}
+
+/* Endposition (zugeklappt): Außen, vertikal zentriert */
+.sidebar.collapsed .sidebar-toggle-btn {
+  /* top: 50%; */
+  right: -18px;
+  transform: rotate(0deg);
+}