diff --git a/frontend/src/app/layout/main-layout/layout.component.html b/frontend/src/app/layout/main-layout/layout.component.html index 2ba8ef2..f99be06 100644 --- a/frontend/src/app/layout/main-layout/layout.component.html +++ b/frontend/src/app/layout/main-layout/layout.component.html @@ -1,156 +1,92 @@ -
-
-
-
-
- @if (!isCollapsed && !isDesktopCollapsed) { -
LOGO
- } - - @if (!isCollapsed && !showMobileMenu) { - - } -
-
+ +
+ +
+
+ + [APP-NAME] +
-
    -
  • -
    - -
    +
    + +
    + +
-
-
- - {{ item.name }} + +
+ + + +
+
+
+
+
- - -
    -
  • -
    - +
+
+ + +
+ +
- -
diff --git a/frontend/src/app/layout/main-layout/layout.component.ts b/frontend/src/app/layout/main-layout/layout.component.ts index 080481c..79b9866 100644 --- a/frontend/src/app/layout/main-layout/layout.component.ts +++ b/frontend/src/app/layout/main-layout/layout.component.ts @@ -3,11 +3,18 @@ import { ChangeDetectionStrategy, Component, ElementRef, - HostListener, OnInit, } from '@angular/core'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; -import { Router, RouterOutlet } from '@angular/router'; +import { + ActivatedRoute, + NavigationEnd, + Router, + RouterModule, + RouterOutlet, +} from '@angular/router'; + +import { filter } from 'rxjs'; import { SuccessDtoApiModel } from '../../api'; import { BackgroundPatternService, ThemeService } from '../../shared/service'; @@ -30,7 +37,7 @@ interface BottomMenuItem { selector: 'app-layout', standalone: true, providers: [], - imports: [RouterOutlet, CommonModule], + imports: [RouterOutlet, CommonModule, RouterModule], templateUrl: './layout.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) @@ -73,95 +80,108 @@ export class LayoutComponent implements OnInit { private readonly sanitizer: DomSanitizer, private readonly router: Router, private readonly backgroundPatternService: BackgroundPatternService, + private readonly route: ActivatedRoute, private readonly themeService: ThemeService, private readonly el: ElementRef, private readonly authService: AuthService ) {} public ngOnInit(): void { + this.router.events + .pipe(filter((event) => event instanceof NavigationEnd)) + .subscribe(() => { + this.setActiveItemBasedOnRoute(); + }); + + // Initial set this.setActiveItemBasedOnRoute(); - this.router.events.subscribe(() => { - this.setActiveItemBasedOnRoute(); - }); - this.setBackground(); - this.onResize(); } - @HostListener('window:resize', ['$event']) - public onResize(): void { - if (window.innerWidth >= 768) { - this.showMobileMenu = false; - this.isCollapsed = false; - } else { - this.isDesktopCollapsed = false; - this.isCollapsed = true; - this.showMobileMenu = false; + public navigateTo(route: string): void { + this.router.navigate([route]); + } + + public executeAction(item: BottomMenuItem): void { + if (item.action) { + item.action(); } } - public setBackground(): void { - const theme = this.themeService.getTheme(); - let opacity: number; + // @HostListener('window:resize', ['$event']) + // public onResize(): void { + // if (window.innerWidth >= 768) { + // this.showMobileMenu = false; + // this.isCollapsed = false; + // } else { + // this.isDesktopCollapsed = false; + // this.isCollapsed = true; + // this.showMobileMenu = false; + // } + // } - if (theme === 'dark') { - opacity = 0.05; - } else { - opacity = 0.1; - } + // public setBackground(): void { + // const theme = this.themeService.getTheme(); + // let opacity: number; - const colorPrimary = getComputedStyle( - this.el.nativeElement - ).getPropertyValue('--p'); + // if (theme === 'dark') { + // opacity = 0.05; + // } else { + // opacity = 0.1; + // } - const colorPrimaryC = getComputedStyle( - this.el.nativeElement - ).getPropertyValue('--pc'); + // const colorPrimary = getComputedStyle( + // this.el.nativeElement + // ).getPropertyValue('--p'); - const svgUrlMainContent = this.backgroundPatternService.getPlusPattern( - colorPrimary, - opacity - ); - const svgUrlNavigation = this.backgroundPatternService.getBankNotePattern( - colorPrimaryC, - opacity - ); + // const colorPrimaryC = getComputedStyle( + // this.el.nativeElement + // ).getPropertyValue('--pc'); - this.mainContent = { - 'background-image': `url("${svgUrlMainContent}")`, - }; - this.navigation = { - 'background-image': `url("${svgUrlNavigation}")`, - }; - } + // const svgUrlMainContent = this.backgroundPatternService.getPlusPattern( + // colorPrimary, + // opacity + // ); + // const svgUrlNavigation = this.backgroundPatternService.getBankNotePattern( + // colorPrimaryC, + // opacity + // ); - public toggleSidebar(): void { - if (window.innerWidth < 768) { - this.showMobileMenu = !this.showMobileMenu; - this.isCollapsed = !this.showMobileMenu; - } else { - this.isDesktopCollapsed = !this.isDesktopCollapsed; - } - } + // this.mainContent = { + // 'background-image': `url("${svgUrlMainContent}")`, + // }; + // this.navigation = { + // 'background-image': `url("${svgUrlNavigation}")`, + // }; + // } - public toggleDesktopSidebar(): void { - this.isDesktopCollapsed = !this.isDesktopCollapsed; - } + // public toggleSidebar(): void { + // if (window.innerWidth < 768) { + // this.showMobileMenu = !this.showMobileMenu; + // this.isCollapsed = !this.showMobileMenu; + // } else { + // this.isDesktopCollapsed = !this.isDesktopCollapsed; + // } + // } - public setActive(item: TopMenuItem): void { - this.menuItems.forEach((menu: TopMenuItem) => { - menu.active = false; - }); - this.router.navigate([item.route]); - if (!this.isCollapsed && this.showMobileMenu) { - this.toggleSidebar(); - } - } + // public toggleDesktopSidebar(): void { + // this.isDesktopCollapsed = !this.isDesktopCollapsed; + // } + + // public setActive(item: TopMenuItem): void { + // this.menuItems.forEach((menu: TopMenuItem) => { + // menu.active = false; + // }); + // this.router.navigate([item.route]); + // if (!this.isCollapsed && this.showMobileMenu) { + // this.toggleSidebar(); + // } + // } private setActiveItemBasedOnRoute(): void { - const url = this.router.url; + const currentRoute = this.router.url; this.menuItems.forEach((item: TopMenuItem) => { - item.active = url.startsWith(item.route); + item.active = currentRoute.startsWith(item.route); }); }