frontend/src/app/layout/main-layout/layout.component.html

@@ -1,5 +1,6 @@
-<div class="flex flex-col h-screen overflow-hidden">
-  <!-- Header -->
+<div class="flex h-screen w-screen bg-base-200">
+  <div class="flex flex-col w-full lg:w-full bg-base-100 h-screen">
+    <!-- Header mit dem Burger-Menü -->
     <header class="w-full navbar bg-primary text-primary-content z-40">
       <div class="flex-1">
         <a class="btn btn-ghost normal-case text-xl text-primary-content">
@@ -24,24 +25,37 @@
           </svg>
         </button>
       </div>
+
+      <!-- Compact Mode Toggle Button für Desktop -->
+      <div class="hidden lg:flex items-center space-x-2 mr-4">
+        <button (click)="toggleCompactMode()" class="btn btn-square btn-ghost">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            class="inline-block w-6 h-6 stroke-current">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M3 3h18v18H3V3z"></path>
+          </svg>
+        </button>
+      </div>
     </header>
 
     <!-- Hauptcontainer -->
-  <div class="flex-1 flex overflow-hidden relative">
-    <!-- Backdrop -->
-    <div
-      *ngIf="isDrawerOpen"
-      class="fixed inset-0 bg-black bg-opacity-50 z-20 lg:hidden"
-      (click)="toggleDrawer()"></div>
-
+    <div class="flex-1 flex overflow-hidden">
       <!-- Drawer -->
       <div
-      class="h-full transition-transform duration-300 ease-in-out bg-primary text-primary-content w-64 flex flex-col lg:translate-x-0"
+        class="h-full transition-transform duration-300 ease-in-out bg-primary text-primary-content flex flex-col lg:translate-x-0"
         [ngClass]="{
-        'translate-x-0': isDrawerOpen,
-        '-translate-x-full': !isDrawerOpen,
+          'w-16': isCompact && !isDrawerOpen,
+          'w-64': isDrawerOpen,
           'fixed lg:relative': true,
-        'top-0 left-0 z-30': true
+          'top-0 left-0 z-30': true,
+          'translate-x-0': isDrawerOpen,
+          '-translate-x-full': !isDrawerOpen && !isCompact
         }">
         <aside class="h-full flex flex-col">
           <!-- Drawer-Inhalt -->
@@ -64,7 +78,9 @@
                       <span
                         class="flex-shrink-0 w-6 h-6 mr-3"
                         [innerHTML]="item.icon"></span>
-                    <span class="flex-grow">{{ item.name }}</span>
+                      <span class="flex-grow" *ngIf="isDrawerOpen">
+                        {{ item.name }}
+                      </span>
                     </a>
                   </ng-container>
 
@@ -80,7 +96,9 @@
                       <span
                         class="flex-shrink-0 w-6 h-6 mr-3"
                         [innerHTML]="item.icon"></span>
-                    <span class="flex-grow">{{ item.name }}</span>
+                      <span class="flex-grow" *ngIf="isDrawerOpen">
+                        {{ item.name }}
+                      </span>
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         fill="none"
@@ -99,7 +117,9 @@
                       [@submenuAnimation]="item.isOpen ? 'open' : 'closed'"
                       class="overflow-hidden">
                       <ul class="bg-base-100">
-                      <li *ngFor="let subItem of item.subitems" class="w-full">
+                        <li
+                          *ngFor="let subItem of item.subitems"
+                          class="w-full">
                           <a
                             [routerLink]="subItem.route"
                             [class.active]="subItem.active"
@@ -134,9 +154,11 @@
                   <button
                     (click)="executeAction(item)"
                     (keydown.enter)="executeAction(item)"
-                  class="py-2 px-4 rounded flex items-center space-x-2 bg-base-100 text-base-content hover:text-primary hover:font-semibold w-full text-left">
+                    class="py-2 px-4 rounded flex items-center space-x-2 bg-base-300 text-base-content hover:text-primary hover:font-semibold w-full text-left"
+                    role="menuitem"
+                    tabindex="0">
                     <span [innerHTML]="item.icon"></span>
-                  <span>{{ item.name }}</span>
+                    <span *ngIf="isDrawerOpen">{{ item.name }}</span>
                   </button>
                 </li>
               </ng-container>
@@ -145,8 +167,20 @@
         </aside>
       </div>
 
+      <!-- Backdrop -->
+      <!-- Backdrop -->
+      <div
+        *ngIf="isDrawerOpen && !isCompact && isMobile"
+        class="fixed inset-0 bg-black bg-opacity-50 z-20"
+        (click)="toggleDrawer()"></div>
+
       <!-- Hauptinhalt -->
-    <div class="flex-1 overflow-y-auto p-4 bg-base-100">
+      <div
+        class="flex-1 overflow-y-auto p-4 bg-base-100"
+        [ngClass]="{
+          'lg:ml-16': isCompact && !isDrawerOpen,
+          'ml-0': !isDrawerOpen || isCompact
+        }">
         <main class="flex-1">
           <div class="w-full h-full flex items-center justify-center">
             <div class="w-full max-w-5xl">
@@ -157,3 +191,4 @@
       </div>
     </div>
   </div>
+</div>

frontend/src/app/layout/main-layout/layout.component.ts

@@ -10,6 +10,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
+  HostListener,
   OnDestroy,
   OnInit,
 } from '@angular/core';
@@ -82,6 +83,8 @@ export class LayoutComponent implements OnInit, OnDestroy {
   public isDesktopCollapsed: boolean = false;
   public showMobileMenu: boolean = false;
   public isDrawerOpen: boolean = true;
+  public isCompact: boolean = false;
+  public isMobile: boolean = window.innerWidth < 1024;
   public menuItems: TopMenuItem[] = [
     {
       name: 'Dashboard',
@@ -154,12 +157,16 @@ export class LayoutComponent implements OnInit, OnDestroy {
     private readonly authService: AuthService
   ) {}
 
+  @HostListener('window:resize', ['$event'])
+  public onResize(event: any): void {
+    this.isMobile = event.target.innerWidth < 1024;
+    this.adjustDrawerState(event.target.innerWidth);
+  }
+
   public ngOnInit(): void {
     this.adjustDrawerState(window.innerWidth);
 
-    window.addEventListener('resize', () => {
-      this.adjustDrawerState(window.innerWidth);
-    });
+    window.addEventListener('resize', this.onResize.bind(this));
 
     this.updateMenuState(this.router.url);
 
@@ -175,8 +182,10 @@ export class LayoutComponent implements OnInit, OnDestroy {
       });
   }
 
-  public onResize(): void {
-    this.adjustDrawerState(window.innerWidth);
+  public ngOnDestroy(): void {
+    window.removeEventListener('resize', this.onResize.bind(this));
+    this.destroy$.next();
+    this.destroy$.complete();
   }
 
   public onLinkClick(): void {
@@ -185,22 +194,23 @@ export class LayoutComponent implements OnInit, OnDestroy {
     }
   }
 
-  public ngOnDestroy(): void {
-    window.removeEventListener('resize', this.onResize.bind(this));
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-
   public toggleDrawer(): void {
     this.isDrawerOpen = !this.isDrawerOpen;
+    this.isCompact = !this.isDrawerOpen; // Wechsel zwischen kompaktem und vollem Zustand
+  }
+
+  public toggleCompactMode(): void {
+    this.isCompact = !this.isCompact;
+    this.isDrawerOpen = !this.isCompact; // Wenn kompaktes Mode aktiviert wird, Drawer geschlossen
   }
 
   public adjustDrawerState(width: number): void {
-    // Hier wird geprüft, ob wir uns im mobilen Bereich befinden.
     if (width < 1024) {
-      this.toggleDrawer();
+      this.isCompact = true;
+      this.isDrawerOpen = false; // Kompaktmodus auf mobilen Geräten
     } else {
-      this.toggleDrawer();
+      this.isCompact = false;
+      this.isDrawerOpen = true; // Vollmodus auf Desktop
     }
   }