-
-
+
+
+
-
-
-
diff --git a/frontend/src/app/layout/main-layout/layout.component.ts b/frontend/src/app/layout/main-layout/layout.component.ts
index 852db04..0cf1a41 100644
--- a/frontend/src/app/layout/main-layout/layout.component.ts
+++ b/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
}
}