styles

2025-09-09 16:09:28 +02:00
parent 5601cd0110
commit b97fc21024
17 changed files with 645 additions and 249 deletions
--- a/public/icons/favorite.svg
+++ b/public/icons/favorite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#666666"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>
--- a/public/icons/placeholder.svg
+++ b/public/icons/placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#666666"><path d="M480-200 200-480l280-280 280 280-280 280Zm0-114 166-166-166-166-166 166 166 166Zm0-166Z"/></svg>
--- a/src/app/features/demo/components/demo2/demo2.component.html
+++ b/src/app/features/demo/components/demo2/demo2.component.html
@@ -6,81 +6,8 @@
  <!-- =================================================================== -->
  <!-- 1. SIDEBAR (Statisch, da sehr spezifisch für dieses Layout)         -->
  <!-- =================================================================== -->
-  <aside class="sidebar">
-    <div class="sidebar-header"><h1 class="sidebar-title">CustomDash</h1></div>
-    <nav class="sidebar-nav">
-      <a href="#" class="nav-item active"
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
-          <polyline points="9 22 9 12 15 12 15 22"></polyline></svg
-        ><span>Übersicht</span></a
-      >
-      <a href="#" class="nav-item"
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <line x1="18" y1="20" x2="18" y2="10"></line>
-          <line x1="12" y1="20" x2="12" y2="4"></line>
-          <line x1="6" y1="20" x2="6" y2="14"></line></svg
-        ><span>Analysen</span></a
-      >
-      <a href="#" class="nav-item"
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
-          ></path></svg
-        ><span>Berichte</span></a
-      >
-    </nav>
-    <div class="sidebar-footer">
-      <a href="#" class="nav-item"
-        ><svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path
-            d="M10.3 21.7c.9.9 2.5.9 3.4 0l6.9-6.9c.9-.9.9-2.5 0-3.4l-6.9-6.9c-.9-.9-2.5-.9-3.4 0l-6.9 6.9c-.9.9-.9-2.5 0 3.4l6.9 6.9z"
-          ></path></svg
-        ><span>Einstellungen</span></a
-      >
-    </div>
-  </aside>

+  <app-sidebar></app-sidebar>
  <!-- =================================================================== -->
  <!-- 2. HAUPTINHALT                                                      -->
  <!-- =================================================================== -->
@@ -130,83 +57,11 @@

      <app-card class="grid-col-span-2">
        <h3 class="card-header">Letzte Bestellungen</h3>
-        <div class="table-container">
-          <table class="modern-table">
-            <thead>
-              <tr>
-                <th class="sortable">
-                  <span>Kunde</span
-                  ><svg
-                    class="sort-icon"
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="16"
-                    height="16"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  >
-                    <path
-                      d="M8 3v18l8-9L8 3z"
-                      transform="rotate(90 12 12)"
-                    ></path>
-                  </svg>
-                </th>
-                <th>Bestell-ID</th>
-                <th>Status</th>
-                <th class="text-right">Betrag</th>
-                <th class="text-center">Aktionen</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td>
-                  <div class="user-cell">
-                    <img
-                      src="https://i.pravatar.cc/40?u=max"
-                      alt="Avatar Max Mustermann"
-                    />
-                    <div>
-                      <div class="user-name">Max Mustermann</div>
-                      <div class="user-email">
-                        max.mustermann&#64;example.com
-                      </div>
-                    </div>
-                  </div>
-                </td>
-                <td><span class="mono">#10543</span></td>
-                <td>
-                  <app-status-pill status="success"
-                    >Abgeschlossen</app-status-pill
-                  >
-                </td>
-                <td class="text-right amount">€ 129,99</td>
-                <td class="actions-cell">
-                  <app-button
-                    color="icon"
-                    tooltip="Details anzeigen"
-                    iconName="eye"
-                  ></app-button>
-
-                  <app-button
-                    color="icon"
-                    tooltip="Bearbeiten"
-                    iconName="edit"
-                  ></app-button>
-
-                  <app-button
-                    color="icon-danger"
-                    tooltip="Löschen"
-                    iconName="delete"
-                    (click)="openDialog()"
-                  ></app-button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+        <!-- <app-orders-table
+          [orders]="ordersData"
+          (deleteOrder)="handleDeleteOrder($event)"
+        >
+        </app-orders-table> -->
        <app-paginator
          [currentPage]="currentPage"
          [totalItems]="totalItems"
@@ -246,20 +101,24 @@
        <h3 class="card-header">Buttons, Chips & Interaktion</h3>
        <div class="component-grid">
          <div class="button-group">
-            <app-button color="primary">Primary</app-button>
-            <app-button color="secondary">Secondary</app-button>
-            <app-button color="stroked">Stroked</app-button>
-            <app-button color="flat">Flat</app-button>
-            <app-button color="icon" tooltip="Favorit hinzufügen"
-              >...</app-button
-            >
+            <app-button buttonType="primary">Primary</app-button>
+            <app-button buttonType="secondary">Secondary</app-button>
+            <app-button buttonType="stroked">Stroked</app-button>
+            <app-button buttonType="flat">Flat</app-button>
+            <app-button buttonType="icon"
+              tooltip="Favorit hinzufügen"
+              iconName="favorite"
+              svgColor="red"
+            ></app-button>

            <app-button
-              color="icon"
+              buttonType="icon"
              tooltip="Details anzeigen"
              iconName="eye"
            ></app-button>
          </div>
+
+
          <div class="chip-set">
            <app-chip label="Technologie" [removable]="true"></app-chip>
            <app-chip
@@ -287,14 +146,14 @@
            </div>
          </div>

-          
+          <app-menu [items]="actionMenuItems"></app-menu>
        </div>
      </app-card>

      <app-card class="grid-col-span-2">
        <h3 class="card-header">Indikatoren & Feedback</h3>
        <div class="card-body component-grid">
-          <app-button color="secondary" (click)="triggerSnackbar()"
+          <app-button buttonType="secondary" (click)="triggerSnackbar()"
            >Snackbar anzeigen</app-button
          >
          <app-alert type="success"
@@ -407,8 +266,8 @@
      <p>Sind Sie sicher? Diese Aktion kann nicht rückgängig gemacht werden.</p>
    </div>
    <div dialog-actions>
-      <app-button color="stroked" (click)="closeDialog()">Abbrechen</app-button>
-      <app-button color="primary" (click)="closeDialog()"
+      <app-button buttonType="stroked" (click)="closeDialog()">Abbrechen</app-button>
+      <app-button buttonType="primary" (click)="closeDialog()"
        >Ja, endgültig löschen</app-button
      >
    </div>
--- a/src/app/features/demo/components/demo2/demo2.component.ts
+++ b/src/app/features/demo/components/demo2/demo2.component.ts
@@ -12,11 +12,17 @@ import { PageHeaderComponent } from '../../../../shared/components/layout/page-h
 import { SlideToggleComponent } from '../../../../shared/components/form/slide-toggle/slide-toggle.component';
 import { StatusPillComponent } from '../../../../shared/components/ui/status-pill/status-pill.component';
 import { DialogComponent } from '../../../../shared/components/overlays/dialog/dialog.component';
-import { MenuComponent } from '../../../../shared/components/overlays/menu/menu.component';
+import {
+  MenuComponent,
+  MenuItem,
+} from '../../../../shared/components/overlays/menu/menu.component';
 import { AlertComponent } from '../../../../shared/components/ui/alert/alert.component';
 import { PaginatorComponent } from '../../../../shared/components/data-display/paginator/paginator.component';
 import { SkeletonComponent } from '../../../../shared/components/ui/skeleton/skeleton.component';
 import { ExpansionPanelComponent } from '../../../../shared/components/layout/expansion-panel/expansion-panel.component';
+import { SidebarComponent } from '../../../../shared/components/layout/sidebar/sidebar.component';
+
+import { OrdersTableComponent, Order } from '../../../../shared/components/data-display/orders-table/orders-table.component';

@Component({
  selector: 'app-demo2',
@@ -37,6 +43,8 @@ import { ExpansionPanelComponent } from '../../../../shared/components/layout/ex
    PaginatorComponent,
    SkeletonComponent,
    ExpansionPanelComponent,
+    SidebarComponent,
+    OrdersTableComponent
  ],
  templateUrl: './demo2.component.html',
  styleUrl: './demo2.component.css',
@@ -45,13 +53,54 @@ export class Demo2Component implements OnInit {
  // Zustands-Variablen für diese Demo-Seite
  isLoading = true;
  isDialogOpen = false;
-  isComponentMenuOpen = false;
+  // isComponentMenuOpen = false; // <--- DIESE ZEILE ENTFERNEN, DA SIE NICHT MEHR BENÖTIGT WIRD

  // Eigenschaften für den Paginator
  currentPage = 1;
  totalItems = 123;
  itemsPerPage = 10;

+  actionMenuItems: MenuItem[] = [
+    {
+      label: 'Bearbeiten',
+      action: () => this.snackbarService.show('Bearbeiten geklickt!'),
+    },
+    {
+      label: 'Kopieren',
+      action: () => console.log('Kopieren geklickt!'),
+    },
+    {
+      dividerBefore: true,
+      label: 'Löschen',
+      action: () => this.openDialog(), // Öffnet z.B. den Bestätigungs-Dialog
+      isDanger: true,
+    },
+  ];
+
+   ordersData: Order[] = [
+    {
+      id: '10543',
+      user: { name: 'Max Mustermann', email: 'max.mustermann@example.com', avatarUrl: 'https://i.pravatar.cc/40?u=max' },
+      amount: '€ 129,99',
+      status: 'success',
+      statusText: 'Abgeschlossen'
+    },
+    {
+      id: '10542',
+      user: { name: 'Erika Mustermann', email: 'erika.m@example.com', avatarUrl: 'https://i.pravatar.cc/40?u=erika' },
+      amount: '€ 49,50',
+      status: 'warning',
+      statusText: 'In Bearbeitung'
+    },
+    {
+      id: '10541',
+      user: { name: 'Peter Pan', email: 'peter.pan@example.com', avatarUrl: 'https://i.pravatar.cc/40?u=peter' },
+      amount: '€ 87,00',
+      status: 'danger',
+      statusText: 'Storniert'
+    }
+  ];
+
  constructor(private snackbarService: SnackbarService) {}

  ngOnInit(): void {
@@ -80,4 +129,9 @@ export class Demo2Component implements OnInit {
    console.log('Wechsle zu Seite:', newPage);
    // Hier würde die Logik zum Neuladen der Tabellendaten folgen
  }
+
+   handleDeleteOrder(orderId: string) {
+    console.log('Lösche Bestellung mit ID:', orderId);
+    this.openDialog(); // Öffnet z.B. den globalen Dialog
+  }
 }
--- a/src/app/shared/components/data-display/orders-table/orders-table.component.css
+++ b/src/app/shared/components/data-display/orders-table/orders-table.component.css
@@ -0,0 +1,85 @@
+/* Verschieben Sie alle Tabellen-Stile aus styles.css hierher */
+:host {
+  display: block;
+}
+
+.table-container {
+  width: 100%;
+  overflow-x: auto;
+}
+.modern-table {
+  width: 100%;
+  border-collapse: collapse;
+  white-space: nowrap;
+}
+.modern-table thead th {
+  padding: 0.75rem 1.5rem;
+  color: var(--color-text-light);
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  text-align: left;
+  border-bottom: 2px solid var(--color-border);
+}
+.modern-table th.sortable {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.modern-table th.sortable:hover {
+  color: var(--color-text);
+}
+.modern-table .sort-icon {
+  opacity: 0.5;
+  transition: all var(--transition-speed);
+}
+.modern-table th.sortable:hover .sort-icon {
+  opacity: 1;
+}
+.modern-table tbody tr {
+  transition: background-color var(--transition-speed);
+  border-bottom: 1px solid var(--color-border);
+}
+.modern-table tbody tr:last-of-type {
+  border-bottom: none;
+}
+.modern-table tbody tr:hover {
+  background-color: var(--color-body-bg);
+}
+.modern-table tbody td {
+  padding: 1rem 1.5rem;
+  vertical-align: middle;
+}
+.user-cell {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.user-cell img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+.user-name {
+  font-weight: 600;
+  color: var(--color-text);
+}
+.user-email {
+  font-size: 0.9rem;
+  color: var(--color-text-light);
+}
+.amount { font-weight: 600; }
+.mono { font-family: 'Courier New', Courier, monospace; }
+.actions-cell {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.no-data-cell {
+  text-align: center;
+  padding: 2rem;
+  color: var(--color-text-light);
+}
--- a/src/app/shared/components/data-display/orders-table/orders-table.component.html
+++ b/src/app/shared/components/data-display/orders-table/orders-table.component.html
@@ -0,0 +1,59 @@
+<div class="table-container">
+  <table class="modern-table">
+    <thead>
+      <tr>
+        <th class="sortable">
+          <span>Kunde</span>
+          <app-icon name="chevron-down"></app-icon>
+        </th>
+        <th>Bestell-ID</th>
+        <th>Status</th>
+        <th class="text-right">Betrag</th>
+        <th class="text-center">Aktionen</th>
+      </tr>
+    </thead>
+    <tbody>
+      <!-- Schleife, die über die übergebenen Bestelldaten iteriert -->
+      <tr *ngFor="let order of orders">
+        <td>
+          <div class="user-cell">
+            <img [src]="order.user.avatarUrl" [alt]="'Avatar von ' + order.user.name" />
+            <div>
+              <div class="user-name">{{ order.user.name }}</div>
+              <div class="user-email">{{ order.user.email }}</div>
+            </div>
+          </div>
+        </td>
+        <td><span class="mono">#{{ order.id }}</span></td>
+        <td>
+          <!-- <app-status-pill [status]="order.status">{{ order.statusText }}</app-status-pill> -->
+        </td>
+        <td class="text-right amount">{{ order.amount }}</td>
+        <td class="actions-cell">
+          <app-button 
+            buttonType="icon" 
+            tooltip="Details anzeigen" 
+            iconName="eye"
+            (click)="viewDetails.emit(order.id)">
+          </app-button>
+          <app-button 
+            buttonType="icon" 
+            tooltip="Bearbeiten" 
+            iconName="edit"
+            (click)="editOrder.emit(order.id)">
+          </app-button>
+          <app-button 
+            buttonType="icon-danger" 
+            tooltip="Löschen" 
+            iconName="trash-2"
+            (click)="deleteOrder.emit(order.id)">
+          </app-button>
+        </td>
+      </tr>
+      <!-- Fallback, wenn keine Daten vorhanden sind -->
+      <tr *ngIf="!orders || orders.length === 0">
+        <td colspan="5" class="no-data-cell">Keine Bestellungen gefunden.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
--- a/src/app/shared/components/data-display/orders-table/orders-table.component.ts
+++ b/src/app/shared/components/data-display/orders-table/orders-table.component.ts
@@ -0,0 +1,42 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { StatusPillComponent } from '../../ui/status-pill/status-pill.component';
+import { ButtonComponent } from '../../ui/button/button.component';
+import { IconComponent } from '../../ui/icon/icon.component';
+
+// Interfaces für die Datenstruktur
+export interface OrderUser {
+  name: string;
+  email: string;
+  avatarUrl: string;
+}
+
+export interface Order {
+  id: string;
+  user: OrderUser;
+  amount: string;
+  status: 'success' | 'warning' | 'danger';
+  statusText: string;
+}
+
+@Component({
+  selector: 'app-orders-table',
+  standalone: true,
+  imports: [
+    CommonModule,
+    
+    ButtonComponent,
+    IconComponent
+  ],
+  templateUrl: './orders-table.component.html',
+  styleUrl: './orders-table.component.css'
+})
+export class OrdersTableComponent {
+  // Nimmt die anzuzeigenden Bestelldaten entgegen
+  @Input() orders: Order[] = [];
+
+  // Gibt Events für die Aktionen aus, mit der ID der betroffenen Bestellung
+  @Output() viewDetails = new EventEmitter<string>();
+  @Output() editOrder = new EventEmitter<string>();
+  @Output() deleteOrder = new EventEmitter<string>();
+}
--- a/src/app/shared/components/layout/sidebar/sidebar.component.css
+++ b/src/app/shared/components/layout/sidebar/sidebar.component.css
@@ -0,0 +1,66 @@
+/* Verschieben Sie alle .sidebar... und .nav-item... Klassen aus styles.css hierher */
+:host {
+  display: block;
+}
+
+.sidebar {
+  width: 260px;
+  height: 100vh;
+  position: sticky;
+  top: 0;
+  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);
+}
+.sidebar-header {
+  margin-bottom: 2rem;
+}
+.sidebar-title {
+  font-size: 1.5rem;
+  font-weight: 900;
+}
+.sidebar-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex-grow: 1;
+}
+.sidebar-footer {
+  margin-top: auto;
+}
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-radius: var(--border-radius-md);
+  color: var(--color-text-light);
+  font-weight: 500;
+  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);
+}
+.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);
+}
+.nav-item.active {
+  background: var(--color-primary-gradient);
+  color: #fff;
+  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.4);
+}
+.nav-item.active app-icon {
+  color: #fff;
+}
--- a/src/app/shared/components/layout/sidebar/sidebar.component.html
+++ b/src/app/shared/components/layout/sidebar/sidebar.component.html
@@ -0,0 +1,45 @@
+<aside class="sidebar">
+  <div class="sidebar-header">
+    <h1 class="sidebar-title">CustomDash</h1>
+  </div>
+
+  <nav class="sidebar-nav">
+    <a
+      class="nav-item"
+      [class.active]="activeRoute === 'dashboard'"
+      (click)="setActive('dashboard')"
+    >
+      <app-icon name="placeholder"></app-icon>
+      <span>Übersicht</span>
+    </a>
+
+    <a
+      class="nav-item"
+      [class.active]="activeRoute === 'analytics'"
+      (click)="setActive('analytics')"
+    >
+      <app-icon name="placeholder"></app-icon>
+      <span>Analysen</span>
+    </a>
+
+    <a
+      class="nav-item"
+      [class.active]="activeRoute === 'reports'"
+      (click)="setActive('reports')"
+    >
+      <app-icon name="placeholder"></app-icon>
+      <span>Berichte</span>
+    </a>
+  </nav>
+
+  <div class="sidebar-footer">
+    <a
+      class="nav-item"
+      [class.active]="activeRoute === 'settings'"
+      (click)="setActive('settings')"
+    >
+      <app-icon name="placeholder"></app-icon>
+      <span>Einstellungen</span>
+    </a>
+  </div>
+</aside>
--- a/src/app/shared/components/layout/sidebar/sidebar.component.ts
+++ b/src/app/shared/components/layout/sidebar/sidebar.component.ts
@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IconComponent } from '../../ui/icon/icon.component';
+
+@Component({
+  selector: 'app-sidebar',
+  standalone: true,
+  imports: [CommonModule, IconComponent],
+  templateUrl: './sidebar.component.html',
+  styleUrl: './sidebar.component.css'
+})
+export class SidebarComponent {
+  // Wir verwalten nur noch, welcher Link aktiv ist. 'dashboard' ist der Standard.
+  activeRoute = 'dashboard';
+
+  // Methode, um den aktiven Link bei einem Klick zu ändern.
+  // In einer echten App würde dies durch den Angular Router gesteuert werden.
+  setActive(route: string): void {
+    this.activeRoute = route;
+  }
+}
--- a/src/app/shared/components/overlays/menu/menu.component.css
+++ b/src/app/shared/components/overlays/menu/menu.component.css
@@ -1,31 +1,46 @@
-/* Verschieben Sie diese Stile aus styles.css hierher */
 :host {
+  position: relative; /* Wichtig, damit das Panel sich daran ausrichtet */
  display: inline-block;
-  position: relative;
+}
+
+.menu-trigger {
+  cursor: pointer;
+  display: inline-block;
+}
+
+/* Der unsichtbare Hintergrund, der die ganze Seite abdeckt */
+.menu-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 899; /* Direkt unter dem Menü-Panel */
+  background: transparent;
 }

 .menu-panel {
  position: absolute;
-  top: calc(100% + 8px);
-  right: 0;
+  top: calc(100% + 8px); /* Position direkt unter dem Trigger */
  min-width: 200px;
  padding: 0.5rem 0;
-  z-index: 900;
+  z-index: 900; /* Über dem Backdrop */
  border: 1px solid var(--color-border);
-  opacity: 0;
-  visibility: hidden;
-  transform: translateY(-10px);
-  transition: opacity var(--transition-speed), transform var(--transition-speed);
+  box-shadow: var(--box-shadow-md);
 }

-:host-context(.open) .menu-panel {
-  opacity: 1;
-  visibility: visible;
-  transform: translateY(0);
+/* Ausrichtung des Panels */
+.menu-panel.align-right {
+  right: 0;
+  left: auto;
+}
+.menu-panel.align-left {
+  left: 0;
+  right: auto;
 }

-/* Wir verwenden ::ng-deep, um die Stile auf die von außen projizierten Elemente anzuwenden */
-::ng-deep .menu-item {
+/* Stile für die Menü-Items */
+.menu-item {
  display: block;
  padding: 0.6rem 1.25rem;
  color: var(--color-text);
@@ -34,11 +49,14 @@
  transition: background-color 0.2s ease-out;
  cursor: pointer;
 }
-
-::ng-deep .menu-item:hover {
+.menu-item:hover {
  background-color: var(--color-body-bg);
 }
-
-::ng-deep .menu-item-danger {
+.menu-item-danger {
  color: var(--color-danger);
 }
+.divider {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: 0.5rem 0;
+}
--- a/src/app/shared/components/overlays/menu/menu.component.html
+++ b/src/app/shared/components/overlays/menu/menu.component.html
@@ -1,11 +1,26 @@
-<div class="menu-container" [class.open]="isOpen">
-  <!-- Hier wird der Button, der das Menü auslöst, von außen eingefügt -->
-  <div (click)="toggle()">
-    <ng-content select="[menu-trigger]"></ng-content>
-  </div>
+<div class="menu-container" [class.open]="isMenuOpen">
+  
+  <!-- Der Trigger-Button bleibt Teil der Komponente -->
+  <app-button  (click)="isMenuOpen = !isMenuOpen">
+    Menü öffnen
+  </app-button>
+  
+  <!-- Das Panel wird nur angezeigt, wenn das Menü offen ist -->
+  <div *ngIf="isMenuOpen" class="menu-panel card" @menuAnimation>
+    
+    <!-- Schleife, die die dynamischen Einträge rendert -->
+    <ng-container *ngFor="let item of items">
+      <!-- Zeigt einen Trenner an, wenn `dividerBefore` true ist -->
+      <hr class="divider" *ngIf="item.dividerBefore" />
+      
+      <!-- Der eigentliche Menü-Eintrag -->
+      <a 
+        class="menu-item" 
+        [class.menu-item-danger]="item.isDanger" 
+        (click)="onItemClick(item)">
+        {{ item.label }}
+      </a>
+    </ng-container>

-  <div class="menu-panel card">
-    <!-- Hier werden die Menü-Einträge von außen eingefügt -->
-    <ng-content></ng-content>
  </div>
 </div>
--- a/src/app/shared/components/overlays/menu/menu.component.ts
+++ b/src/app/shared/components/overlays/menu/menu.component.ts
@@ -1,18 +1,44 @@
 import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { trigger, transition, style, animate } from '@angular/animations';
+import { ButtonComponent } from '../../ui/button/button.component';
+
+// Interface, das die Struktur eines Menü-Eintrags definiert
+export interface MenuItem {
+  label: string;
+  action: () => void; // Funktion, die bei Klick ausgeführt wird
+  isDanger?: boolean; // Für rote Färbung
+  dividerBefore?: boolean; // Um einen Trenner davor anzuzeigen
+}

@Component({
  selector: 'app-menu',
  standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule,ButtonComponent],
  templateUrl: './menu.component.html',
-  styleUrl: './menu.component.css'
+  styleUrl: './menu.component.css',
+  animations: [
+    trigger('menuAnimation', [
+      transition(':enter', [
+        style({ opacity: 0, transform: 'scale(0.95) translateY(-10px)' }),
+        animate('150ms ease-out', style({ opacity: 1, transform: 'scale(1) translateY(0)' }))
+      ]),
+      transition(':leave', [
+        animate('150ms ease-in', style({ opacity: 0, transform: 'scale(0.95) translateY(-10px)' }))
+      ])
+    ])
+  ]
 })
 export class MenuComponent {
-  @Input() triggerText = 'Menü öffnen';
-  isOpen = false;
+  // Zustand, ob das Menü offen oder geschlossen ist
+  isMenuOpen = false;

-  toggle() {
-    this.isOpen = !this.isOpen;
+  // Input, um die dynamischen Menü-Einträge von der Eltern-Komponente zu erhalten
+  @Input() items: MenuItem[] = [];
+
+  // Methode, die aufgerufen wird, wenn ein Item geklickt wird
+  onItemClick(item: MenuItem): void {
+    item.action();      // Führt die definierte Aktion aus
+    this.isMenuOpen = false; // Schließt das Menü
  }
 }
--- a/src/app/shared/components/ui/button/button.component.css
+++ b/src/app/shared/components/ui/button/button.component.css
@@ -0,0 +1,107 @@
+/* Stile, die NUR für diese Button-Komponente gelten */
+:host {
+  display: inline-block; /* Sorgt für korrektes Layout-Verhalten */
+}
+
+/* Basis-Stil für alle Buttons */
+.btn {
+  position: relative; /* Wichtig für den Ripple-Effekt */
+  overflow: hidden;   /* Verhindert, dass der Ripple über den Button hinausgeht */
+  
+  border: none;
+  border-radius: var(--border-radius-md);
+  cursor: pointer;
+  font-weight: 600;
+  padding: 0.6rem 1.2rem;
+  transition: all 0.2s ease-out;
+  
+  /* Stellt sicher, dass der Inhalt (Text/Icon) zentriert ist */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.btn:hover:not(:disabled) {
+  transform: translateY(-2px);
+  box-shadow: var(--box-shadow-md);
+}
+
+.btn:active:not(:disabled) {
+  /* Kleiner "Drück"-Effekt beim aktiven Klick */
+  transform: translateY(0);
+  box-shadow: var(--box-shadow-sm);
+}
+
+/* Farbvarianten */
+.btn-primary {
+  background: var(--color-primary-gradient);
+  color: #fff;
+}
+.btn-secondary {
+  background-color: var(--color-surface);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+.btn-stroked {
+  background-color: transparent;
+  color: var(--color-primary);
+  border: 1px solid var(--color-primary);
+}
+.btn-flat {
+  background-color: transparent;
+  color: var(--color-primary);
+  box-shadow: none; /* Flat-Buttons haben keinen Schatten */
+}
+.btn-icon {
+  background-color: transparent;
+  color: var(--color-text-light);
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: 50%;
+  box-shadow: none;
+}
+.btn-icon:hover:not(:disabled) {
+  background-color: var(--color-border);
+  transform: none; /* Kein Hover-Effekt für Icon-Buttons */
+  box-shadow: none;
+}
+.btn-icon-danger:hover:not(:disabled) {
+  background-color: #fee2e2;
+  color: var(--color-danger);
+}
+:host-context(body.dark-theme) .btn-icon-danger:hover:not(:disabled) {
+  background-color: #991b1b;
+}
+
+/* Deaktivierter Zustand */
+.btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  box-shadow: none;
+}
+
+/* Modifikatoren */
+.btn-full-width {
+  width: 100%;
+}
+
+/* Klick-Effekt (Ripple) */
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  animation: ripple-effect 0.6s linear;
+  background-color: rgba(255, 255, 255, 0.7);
+}
+.btn-secondary .ripple, .btn-stroked .ripple, .btn-flat .ripple, .btn-icon .ripple {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+@keyframes ripple-effect {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
--- a/src/app/shared/components/ui/button/button.component.html
+++ b/src/app/shared/components/ui/button/button.component.html
@@ -1,17 +1,16 @@
 <button
-  [type]="type"
+  [type]="submitType"
  [disabled]="disabled"
  class="btn"
-  [class.btn-primary]="color === 'primary'"
-  [class.btn-secondary]="color === 'secondary'"
-  [class.btn-stroked]="color === 'stroked'"
-  [class.btn-flat]="color === 'flat'"
-  [class.btn-icon]="color === 'icon' || color === 'icon-danger'"
-  [class.btn-icon-danger]="color === 'icon-danger'"
+  [class.btn-primary]="buttonType === 'primary'" 
+  [class.btn-secondary]="buttonType === 'secondary'" 
+  [class.btn-stroked]="buttonType === 'stroked'" 
+  [class.btn-flat]="buttonType === 'flat'" 
+  [class.btn-icon]="buttonType === 'icon' || buttonType === 'icon-danger'" 
+  [class.btn-icon-danger]="buttonType === 'icon-danger'" 
  [class.btn-full-width]="fullWidth"
-  [attr.data-tooltip]="tooltip"
->
-  <!-- HIER IST DIE KORREKTUR: Binding an [svgColor] statt [iconColor] -->
+  [attr.data-tooltip]="tooltip">
+  
  <app-icon *ngIf="iconName" [name]="iconName" [svgColor]="svgColor"></app-icon>
  <ng-content></ng-content>
 </button>
--- a/src/app/shared/components/ui/button/button.component.ts
+++ b/src/app/shared/components/ui/button/button.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, ElementRef, Renderer2, HostListener } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IconComponent } from '../icon/icon.component';

@@ -7,21 +7,48 @@ type ButtonColor = 'primary' | 'secondary' | 'stroked' | 'flat' | 'icon' | 'icon
@Component({
  selector: 'app-button',
  standalone: true, 
-  imports: [
-    CommonModule,
-    IconComponent
-  ],
+  imports: [CommonModule, IconComponent],
  templateUrl: './button.component.html',
  styleUrl: './button.component.css'
 })
 export class ButtonComponent {
-  @Input() color: ButtonColor = 'primary';
-  @Input() type: 'button' | 'submit' = 'button';
+  @Input() buttonType: ButtonColor = 'primary';
+  @Input() submitType: 'button' | 'submit' = 'button';
  @Input() disabled = false;
  @Input() fullWidth = false;
-
  @Input() tooltip: string | null = null;
  @Input() iconName: string | null = null; 
-  // --- HIER IST DIE KORREKTUR: Umbenennung zu svgColor ---
-  @Input() svgColor: string | null = null; // Farbe des SVG-Inhalts im Button
+  @Input() svgColor: string | null = null;
+
+  constructor(private el: ElementRef, private renderer: Renderer2) {}
+
+  // HostListener fängt Klick-Events direkt auf dem Host-Element (<app-button>) ab
+  @HostListener('click', ['$event'])
+  onClick(event: MouseEvent) {
+    if (this.disabled) {
+      return;
+    }
+    
+    const button = this.el.nativeElement.querySelector('.btn');
+    if (!button) return;
+
+    // Entferne alte Ripple-Effekte
+    const existingRipple = button.querySelector('.ripple');
+    if (existingRipple) {
+      existingRipple.remove();
+    }
+
+    // Erzeuge den Ripple-Effekt
+    const circle = this.renderer.createElement('span');
+    const diameter = Math.max(button.clientWidth, button.clientHeight);
+    const radius = diameter / 2;
+
+    this.renderer.setStyle(circle, 'width', `${diameter}px`);
+    this.renderer.setStyle(circle, 'height', `${diameter}px`);
+    this.renderer.setStyle(circle, 'left', `${event.clientX - button.offsetLeft - radius}px`);
+    this.renderer.setStyle(circle, 'top', `${event.clientY - button.offsetTop - radius}px`);
+    this.renderer.addClass(circle, 'ripple');
+
+    this.renderer.appendChild(button, circle);
+  }
 }
--- a/src/styles.css
+++ b/src/styles.css
@@ -71,37 +71,8 @@ body.no-scroll {
  display: flex;
  background-color: var(--color-body-bg);
 }
-.sidebar {
-  width: 260px;
-  height: 100vh;
-  position: sticky;
-  top: 0;
-  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);
-}
-.sidebar-header {
-  margin-bottom: 2rem;
-}
-.sidebar-title {
-  font-size: 1.5rem;
-  font-weight: 900;
-}
-.sidebar-nav {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  flex-grow: 1;
-}
-.sidebar-footer {
-  margin-top: auto;
-}
+
+
 .nav-item {
  display: flex;
  align-items: center;
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#666666"><path d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Zm0-108q96-86 158-147.5t98-107q36-45.5 50-81t14-70.5q0-60-40-100t-100-40q-47 0-87 26.5T518-680h-76q-15-41-55-67.5T300-774q-60 0-100 40t-40 100q0 35 14 70.5t50 81q36 45.5 98 107T480-228Zm0-273Z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#666666"><path d="M480-200 200-480l280-280 280 280-280 280Zm0-114 166-166-166-166-166 166 166 166Zm0-166Z"/></svg>`