init

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

@@ -1,13 +1,33 @@
-<aside class="sidebar">
+<aside class="sidebar" [class.collapsed]="isCollapsed">
   <div class="sidebar-header">
-    <h1 class="sidebar-title">CustomDash</h1>
+    <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"
+        fill="currentColor"
+      >
+        <path
+          d="M24 8C19.2 8 15.2 9.4 12 11.8C15.4 12.8 18.3 15.6 19.4 19C20.6 18.6 21.8 18.4 23 18.4C24.4 18.4 25.6 18.6 26.8 19C27.9 15.6 30.8 12.8 34.2 11.8C31 9.4 27.2 8 24 8ZM11.8 12.2C8.6 14.6 6 18.2 4.6 22.4C7.8 22.8 10.6 24.6 12.4 27.2C11.4 25.4 10.8 23.2 10.6 21C9.4 17.6 10 14.4 11.8 12.2ZM36.2 12.2C38 14.4 38.6 17.6 37.4 21C37.2 23.2 36.6 25.4 35.6 27.2C37.4 24.6 40.2 22.8 43.4 22.4C42 18.2 39.4 14.6 36.2 12.2ZM4.2 24C4 25.2 4 26.4 4 27.8C4 32.8 6 37.4 9.4 40.6C10.2 37.6 12 35 14.4 33C12 30.8 10.2 28.2 9.2 25.4C7.2 25.2 5.4 24.6 4.2 24ZM20.8 27.8C18.4 29.8 16.6 32.4 15.4 35.4C17.6 38.2 20.6 40 24 40C27.4 40 30.4 38.2 32.6 35.4C31.4 32.4 29.6 29.8 27.2 27.8C25.6 29 24.2 29.2 23.2 29.2C22.4 29.2 21.4 29 20.8 27.8ZM38.8 25.4C37.8 28.2 36 30.8 33.6 33C36 35 37.8 37.6 38.6 40.6C42 37.4 44 32.8 44 27.8C44 26.4 44 25.2 43.8 24C42.6 24.6 40.8 25.2 38.8 25.4Z"
+        />
+      </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"
       [class.active]="activeRoute === 'dashboard'"
       (click)="setActive('dashboard')"
+      title="Übersicht"
     >
       <app-icon name="placeholder"></app-icon>
       <span>Übersicht</span>
@@ -17,6 +37,7 @@
       class="nav-item"
       [class.active]="activeRoute === 'analytics'"
       (click)="setActive('analytics')"
+      title="Analysen"
     >
       <app-icon name="placeholder"></app-icon>
       <span>Analysen</span>
@@ -26,6 +47,7 @@
       class="nav-item"
       [class.active]="activeRoute === 'reports'"
       (click)="setActive('reports')"
+      title="Berichte"
     >
       <app-icon name="placeholder"></app-icon>
       <span>Berichte</span>
@@ -37,6 +59,7 @@
       class="nav-item"
       [class.active]="activeRoute === 'settings'"
       (click)="setActive('settings')"
+      title="Einstellungen"
     >
       <app-icon name="placeholder"></app-icon>
       <span>Einstellungen</span>