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-speed: 0.35s;
-  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Eine professionelle Easing-Funktion */
+  --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;
+  clip-path: inset(0 0% 0 0);
-  overflow: hidden; /* Verhindert, dass Text während der Animation herausragt */
+  transition: clip-path var(--transition-speed) var(--transition-ease);
-
-  /* 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);
 }
 
-.sidebar-header app-button {
+/* 3. Navigation und Footer */
-  margin-left: auto; /* Dies ist jetzt der EINZIGE Mechanismus, der den Button nach rechts schiebt */
+.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;
+  clip-path: inset(0 0 0 0);
-  opacity: 1;
+  margin-left: 0.75rem;
-  transition: width 0.3s var(--transition-ease) 0.05s, opacity 0.2s var(--transition-ease);
+  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 */
+  clip-path: inset(0 100% 0 0);
-  opacity: 0;
-  margin-left: -0.75rem; /* Kompensiert den 'gap', damit das Logo perfekt zentriert wird */
   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;
+  clip-path: inset(0 100% 0 0);
-  opacity: 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);
+}

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

@@ -1,7 +1,6 @@
 <aside class="sidebar" [class.collapsed]="isCollapsed">
   <div class="sidebar-header">
     <div class="sidebar-logo">
-      <!-- Ersetzen Sie dies durch Ihr Logo, z.B. als <img> oder <svg> -->
       <svg
         viewBox="0 0 48 48"
         xmlns="http://www.w3.org/2000/svg"
@@ -13,15 +12,8 @@
       </svg>
     </div>
     <h1 class="sidebar-title">Wetask</h1>
-    <app-button
-      buttonType="icon"
-      iconName="double_arrow"
-      (click)="toggleSidebar()"
-    ></app-button>
   </div>
 
-  <!-- 2. Der Button zum Ein- und Ausklappen. Er ruft unsere neue Methode auf. -->
-
   <nav class="sidebar-nav">
     <a
       class="nav-item"
@@ -29,7 +21,7 @@
       (click)="setActive('dashboard')"
       title="Übersicht"
     >
-      <app-icon name="placeholder"></app-icon>
+       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
       <span>Übersicht</span>
     </a>
 
@@ -39,7 +31,7 @@
       (click)="setActive('analytics')"
       title="Analysen"
     >
-      <app-icon name="placeholder"></app-icon>
+      <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
       <span>Analysen</span>
     </a>
 
@@ -49,7 +41,7 @@
       (click)="setActive('reports')"
       title="Berichte"
     >
-      <app-icon name="placeholder"></app-icon>
+       <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
       <span>Berichte</span>
     </a>
   </nav>
@@ -61,8 +53,15 @@
       (click)="setActive('settings')"
       title="Einstellungen"
     >
-      <app-icon name="placeholder"></app-icon>
+     <app-icon [iconName]="'placeholder'" [svgColor]="'#8e44ad'"></app-icon>
       <span>Einstellungen</span>
     </a>
   </div>
+
+  <app-button
+    class="sidebar-toggle-btn"
+    buttonType="icon"
+    iconName="double_arrow"
+    (click)="toggleSidebar()"
+  ></app-button>
 </aside>