styles

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">
   
-  <div class="menu-panel card">
-    <!-- Hier werden die Menü-Einträge von außen eingefügt -->
-    <ng-content></ng-content>
+  <!-- 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>
 </div>