isCollapsed: {{ isCollapsed }}
showMobileMenu: {{ showMobileMenu }}
isDesktopCollapsed: {{ isDesktopCollapsed }}
diff --git a/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts b/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
index 82b2aba..3d88fdb 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
@@ -2,11 +2,14 @@ import { CommonModule } from '@angular/common';
import {
ChangeDetectionStrategy,
Component,
+ ElementRef,
HostListener,
OnInit,
} from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
+
+import { BackgroundPatternService, ThemeService } from '../../shared/service';
interface MenuItem {
name: string;
@@ -39,20 +42,23 @@ export class DashboardRootComponent implements OnInit {
`),
},
];
+ public mainContent: { 'background-image': string } | null = null;
+ public navigation: { 'background-image': string } | null = null;
public constructor(
private readonly sanitizer: DomSanitizer,
private readonly router: Router,
- private readonly route: ActivatedRoute
+ private readonly backgroundPatternService: BackgroundPatternService,
+ private readonly themeService: ThemeService,
+ private readonly el: ElementRef
) {}
public ngOnInit(): void {
this.setActiveItemBasedOnRoute();
this.router.events.subscribe(() => {
- console.log('router event');
-
this.setActiveItemBasedOnRoute();
});
+ this.setBackground();
this.onResize();
}
@@ -68,6 +74,43 @@ export class DashboardRootComponent implements OnInit {
}
}
+ public setBackground(): void {
+ const theme = this.themeService.getTheme();
+ let opacity: number;
+
+ if (theme === 'dark') {
+ opacity = 0.05;
+ } else {
+ opacity = 0.1;
+ }
+
+ const colorPrimary = getComputedStyle(
+ this.el.nativeElement
+ ).getPropertyValue('--p');
+
+ const colorPrimaryC = getComputedStyle(
+ this.el.nativeElement
+ ).getPropertyValue('--pc');
+
+ const svgUrlMainContent = this.backgroundPatternService.getPlusPattern(
+ colorPrimary,
+ opacity
+ );
+ const svgUrlNavigation = this.backgroundPatternService.getBankNotePattern(
+ colorPrimaryC,
+ opacity
+ );
+
+ console.log(this.mainContent, this.navigation);
+
+ this.mainContent = {
+ 'background-image': `url("${svgUrlMainContent}")`,
+ };
+ this.navigation = {
+ 'background-image': `url("${svgUrlNavigation}")`,
+ };
+ }
+
public toggleSidebar(): void {
if (window.innerWidth < 768) {
this.showMobileMenu = !this.showMobileMenu;