frontend/src/app/pages/dashboard-root/dashboard-root.component.html

@@ -1,6 +1,7 @@
 <div class="flex h-screen overflow-hidden">
   <!-- Sidebar -->
   <div
+    [ngStyle]="navigation"
     [class]="
       isCollapsed
         ? 'bg-primary w-0 md:w-20 transition-all duration-300 ease-in-out'
@@ -13,6 +14,7 @@
     class="transform h-full z-20 overflow-y-auto fixed md:relative">
     <div
       [ngClass]="showMobileMenu ? 'justify-center' : 'justify-between'"
+      [ngStyle]="navigation"
       class="p-1 w-full h-16 bg-base-100 flex items-center relative">
       <div class="flex items-center justify-center h-full w-full">
         <div class="flex items-center space-x-4">
@@ -82,7 +84,9 @@
   </div>
 
   <div class="flex flex-col flex-grow">
-    <header class="p-4 bg-primary text-primary-content flex items-center h-16">
+    <header
+      [ngStyle]="navigation"
+      class="p-4 bg-primary text-primary-content flex items-center h-16">
       <div class="w-10 flex items-center justify-center md:hidden">
         <label class="btn btn-ghost swap swap-rotate">
           <input
@@ -111,7 +115,9 @@
       </div>
     </header>
 
-    <div class="flex-grow p-10 text-2xl font-bold overflow-y-auto">
+    <div
+      [ngStyle]="mainContent"
+      class="flex-grow p-10 text-2xl font-bold overflow-y-auto">
       <p>isCollapsed: {{ isCollapsed }}</p>
       <p>showMobileMenu: {{ showMobileMenu }}</p>
       <p>isDesktopCollapsed: {{ isDesktopCollapsed }}</p>

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 {
       </svg>`),
     },
   ];
+  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;