From e17e4191b7bac63faf2f697c34c5e36a1f71d79d Mon Sep 17 00:00:00 2001 From: Igor Propisnov Date: Tue, 10 Sep 2024 13:06:52 +0200 Subject: [PATCH] update side menu --- frontend/src/app/app.routes.ts | 5 + .../layout/main-layout/layout.component.html | 155 +++++++++++----- .../layout/main-layout/layout.component.ts | 169 ++++++++++++++++-- .../src/app/pages/foo-root/foo.component.ts | 13 ++ 4 files changed, 279 insertions(+), 63 deletions(-) create mode 100644 frontend/src/app/pages/foo-root/foo.component.ts diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts index f0d58b1..04a58bc 100644 --- a/frontend/src/app/app.routes.ts +++ b/frontend/src/app/app.routes.ts @@ -46,6 +46,11 @@ const protectedRoutes: Routes = [ }, ], }, + { + path: 'foo', + loadComponent: () => + import('./pages/foo-root/foo.component').then((m) => m.FooComponent), + }, ]; export const routes: Routes = [ diff --git a/frontend/src/app/layout/main-layout/layout.component.html b/frontend/src/app/layout/main-layout/layout.component.html index f99be06..145c05e 100644 --- a/frontend/src/app/layout/main-layout/layout.component.html +++ b/frontend/src/app/layout/main-layout/layout.component.html @@ -1,14 +1,16 @@ -
-
+
[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 79b9866..852db04 100644 --- a/frontend/src/app/layout/main-layout/layout.component.ts +++ b/frontend/src/app/layout/main-layout/layout.component.ts @@ -1,8 +1,16 @@ +import { + animate, + state, + style, + transition, + trigger, +} from '@angular/animations'; import { CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, Component, ElementRef, + OnDestroy, OnInit, } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; @@ -14,7 +22,7 @@ import { RouterOutlet, } from '@angular/router'; -import { filter } from 'rxjs'; +import { filter, Subject, takeUntil } from 'rxjs'; import { SuccessDtoApiModel } from '../../api'; import { BackgroundPatternService, ThemeService } from '../../shared/service'; @@ -23,8 +31,17 @@ import { AuthService } from '../../shared/service/auth.service'; interface TopMenuItem { name: string; icon: SafeHtml; + route?: string; + active?: boolean; + subitems?: SubMenuItem[]; + isOpen?: boolean; +} + +interface SubMenuItem { + name: string; route: string; active?: boolean; + icon?: SafeHtml; } interface BottomMenuItem { @@ -39,12 +56,32 @@ interface BottomMenuItem { providers: [], imports: [RouterOutlet, CommonModule, RouterModule], templateUrl: './layout.component.html', - changeDetection: ChangeDetectionStrategy.OnPush, + changeDetection: ChangeDetectionStrategy.Default, + animations: [ + trigger('submenuAnimation', [ + state( + 'closed', + style({ + height: '0', + opacity: '0', + }) + ), + state( + 'open', + style({ + height: '*', + opacity: '1', + }) + ), + transition('closed <=> open', [animate('200ms ease-in-out')]), + ]), + ], }) -export class LayoutComponent implements OnInit { +export class LayoutComponent implements OnInit, OnDestroy { public isCollapsed: boolean = false; public isDesktopCollapsed: boolean = false; public showMobileMenu: boolean = false; + public isDrawerOpen: boolean = true; public menuItems: TopMenuItem[] = [ { name: 'Dashboard', @@ -56,11 +93,41 @@ export class LayoutComponent implements OnInit { }, { name: 'Event', - route: '/event', icon: this.sanitizer .bypassSecurityTrustHtml(` `), + route: '/event', + }, + { + name: 'Profile', + route: '/profile', + icon: this.sanitizer + .bypassSecurityTrustHtml(` + + `), + subitems: [ + { + name: 'Edit Profile', + route: '/foo', + icon: this.sanitizer.bypassSecurityTrustHtml(` + + + + + `), + }, + { + name: 'Delete Profile', + route: '/foo-1', + icon: this.sanitizer.bypassSecurityTrustHtml(` + + + + `), + }, + ], + isOpen: false, }, ]; public bottomMenuItems: BottomMenuItem[] = [ @@ -75,6 +142,7 @@ export class LayoutComponent implements OnInit { ]; public mainContent: { 'background-image': string } | null = null; public navigation: { 'background-image': string } | null = null; + private destroy$: Subject = new Subject(); public constructor( private readonly sanitizer: DomSanitizer, @@ -87,14 +155,53 @@ export class LayoutComponent implements OnInit { ) {} public ngOnInit(): void { - this.router.events - .pipe(filter((event) => event instanceof NavigationEnd)) - .subscribe(() => { - this.setActiveItemBasedOnRoute(); - }); + this.adjustDrawerState(window.innerWidth); - // Initial set - this.setActiveItemBasedOnRoute(); + window.addEventListener('resize', () => { + this.adjustDrawerState(window.innerWidth); + }); + + this.updateMenuState(this.router.url); + + this.router.events + .pipe( + filter( + (event): event is NavigationEnd => event instanceof NavigationEnd + ), + takeUntil(this.destroy$) + ) + .subscribe((event: NavigationEnd) => { + this.updateMenuState(event.urlAfterRedirects); + }); + } + + public onResize(): void { + this.adjustDrawerState(window.innerWidth); + } + + public onLinkClick(): void { + if (window.innerWidth < 1024 && this.isDrawerOpen) { + this.isDrawerOpen = false; + } + } + + public ngOnDestroy(): void { + window.removeEventListener('resize', this.onResize.bind(this)); + this.destroy$.next(); + this.destroy$.complete(); + } + + public toggleDrawer(): void { + this.isDrawerOpen = !this.isDrawerOpen; + } + + public adjustDrawerState(width: number): void { + // Hier wird geprüft, ob wir uns im mobilen Bereich befinden. + if (width < 1024) { + this.toggleDrawer(); + } else { + this.toggleDrawer(); + } } public navigateTo(route: string): void { @@ -107,6 +214,38 @@ export class LayoutComponent implements OnInit { } } + public toggleSubmenu(item: TopMenuItem, event: Event): void { + event.preventDefault(); + event.stopPropagation(); + item.isOpen = !item.isOpen; + } + + private updateMenuState(currentRoute: string): void { + this.menuItems.forEach((item: TopMenuItem) => { + // Set top-level items active state + if (item.route) { + item.active = currentRoute.startsWith(item.route); + } + + // Handle subitems + if (item.subitems) { + // Check if any subitem matches the current route + const activeSubItem = item.subitems.some((subItem) => + currentRoute.startsWith(subItem.route) + ); + + // Set the parent item and subitem active state + item.active = activeSubItem; + item.isOpen = activeSubItem; + + // Set active states for all subitems + item.subitems.forEach((subItem) => { + subItem.active = currentRoute.startsWith(subItem.route); + }); + } + }); + } + // @HostListener('window:resize', ['$event']) // public onResize(): void { // if (window.innerWidth >= 768) { @@ -177,14 +316,6 @@ export class LayoutComponent implements OnInit { // } // } - private setActiveItemBasedOnRoute(): void { - const currentRoute = this.router.url; - - this.menuItems.forEach((item: TopMenuItem) => { - item.active = currentRoute.startsWith(item.route); - }); - } - private signout(): void { this.authService.signout().subscribe((response: SuccessDtoApiModel) => { if (response.success) { diff --git a/frontend/src/app/pages/foo-root/foo.component.ts b/frontend/src/app/pages/foo-root/foo.component.ts new file mode 100644 index 0000000..22843c0 --- /dev/null +++ b/frontend/src/app/pages/foo-root/foo.component.ts @@ -0,0 +1,13 @@ +import { CommonModule } from '@angular/common'; +import { Component, ChangeDetectionStrategy } from '@angular/core'; +import { RouterOutlet, RouterModule } from '@angular/router'; + +@Component({ + selector: 'app-foo', + standalone: true, + template: '

Foo

', + providers: [], + imports: [RouterOutlet, CommonModule, RouterModule], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class FooComponent {}