From 609a08f479270251987a3d452320fad8a5f7bb97 Mon Sep 17 00:00:00 2001 From: Igor Propisnov Date: Tue, 10 Sep 2024 13:30:23 +0200 Subject: [PATCH] added comapct mode --- .../layout/main-layout/layout.component.html | 339 ++++++++++-------- .../layout/main-layout/layout.component.ts | 38 +- 2 files changed, 211 insertions(+), 166 deletions(-) diff --git a/frontend/src/app/layout/main-layout/layout.component.html b/frontend/src/app/layout/main-layout/layout.component.html index 145c05e..7346e4a 100644 --- a/frontend/src/app/layout/main-layout/layout.component.html +++ b/frontend/src/app/layout/main-layout/layout.component.html @@ -1,159 +1,194 @@ -
- -
-
- - [APP-NAME] - -
- -
- -
-
+
+
+ +
+
+ + [APP-NAME] + +
+ +
+ +
- -
- -
+ + +
- -
-
- +
+ +
+
    + +
  • + +
    • +     +
+
+ +
+ + + +
+ + +
+
+
+
+ +
+
+
+
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 } }