From 18320ddd11da7ae2b7ca3ab72716fbcc4d9e23d6 Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Thu, 27 Jun 2024 23:34:29 +0200
Subject: [PATCH 1/7] sidebar for dashboard work in progress

---
 .../dashboard-root.component.html             | 42 ++++++++++++++-
 .../dashboard-root.component.ts               | 54 ++++++++++++++++++-
 2 files changed, 93 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
index f3e333e..f25241c 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
@@ -1 +1,41 @@
-<h1>Hello World</h1>
+<div class="flex h-screen overflow-hidden">
+  <!-- Sidebar -->
+  <div
+    [class]="
+      isCollapsed
+        ? 'bg-primary w-20 transition-all duration-300 ease-in-out'
+        : 'bg-primary w-48 transition-all duration-300 ease-in-out'
+    "
+    class="transform">
+    <div class="p-5 text-primary-content">Logo</div>
+    <ul>
+      <li class="p-4" *ngFor="let item of menuItems">
+        <span class="cursor-pointer text-primary-content" *ngIf="isCollapsed">
+          {{ item.icon }}
+        </span>
+        <span
+          class="cursor-pointer text-primary-content"
+          *ngIf="!isCollapsed"
+          (click)="toggleSubMenu(item)">
+          {{ item.name }}
+        </span>
+        <ul
+          *ngIf="!isCollapsed && item.open"
+          class="transition-all duration-300 ease-in-out">
+          <li
+            class="pl-8 py-2 cursor-pointer text-primary-content"
+            *ngFor="let subItem of item.subItems">
+            {{ subItem }}
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+  <!-- Toggle Button -->
+  <button class="p-2 text-xl" (click)="toggleSidebar()">
+    {{ isCollapsed ? '👉' : '👈' }}
+  </button>
+
+  <!-- Main content -->
+  <div class="flex-1 p-10 text-2xl font-bold">Hauptinhalt hier</div>
+</div>
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 6a160af..abcc404 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
@@ -1,14 +1,64 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostListener,
+} from '@angular/core';
+
+interface MenuItem {
+  name: string;
+  icon: string;
+  subItems: string[];
+  open?: boolean;
+}
 
 @Component({
   selector: 'app-dashboard-root',
   standalone: true,
-  imports: [],
+  imports: [CommonModule],
   providers: [],
   templateUrl: './dashboard-root.component.html',
   styleUrl: './dashboard-root.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DashboardRootComponent {
+  public isCollapsed: boolean = false;
+  public showMobileMenu: boolean = false;
+  public userHasInteracted: boolean = false;
+  public menuItems: MenuItem[] = [
+    { name: 'Home', icon: '🏠', subItems: [] },
+    { name: 'About', icon: 'ℹ️', subItems: [] },
+    {
+      name: 'Services',
+      icon: '🛠️',
+      subItems: ['Web Design', 'SEO', 'Development'],
+      open: false,
+    },
+    { name: 'Contact', icon: '📞', subItems: [] },
+  ];
+
   public constructor() {}
+
+  @HostListener('window:resize', ['$event'])
+  public onResize(): void {
+    if (!this.userHasInteracted) {
+      this.isCollapsed = window.innerWidth < 768;
+    } else {
+      if (window.innerWidth > 768) {
+        this.isCollapsed = false;
+        this.userHasInteracted = false;
+      }
+    }
+  }
+
+  public toggleSidebar(): void {
+    this.isCollapsed = !this.isCollapsed;
+    this.userHasInteracted = true;
+  }
+
+  public toggleSubMenu(item: any): void {
+    if (item.subItems.length) {
+      item.open = !item.open;
+    }
+  }
 }
-- 
2.40.1


From 25481335587a86ca940108a674f40894f303c46e Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Wed, 17 Jul 2024 13:54:15 +0200
Subject: [PATCH 2/7] added ui/ux logic for side menu

---
 .../dashboard-root.component.html             | 134 +++++++++++++-----
 .../dashboard-root.component.ts               |  24 ++--
 2 files changed, 110 insertions(+), 48 deletions(-)

diff --git a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
index f25241c..23eb2c3 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
@@ -1,41 +1,97 @@
-<div class="flex h-screen overflow-hidden">
-  <!-- Sidebar -->
-  <div
-    [class]="
-      isCollapsed
-        ? 'bg-primary w-20 transition-all duration-300 ease-in-out'
-        : 'bg-primary w-48 transition-all duration-300 ease-in-out'
-    "
-    class="transform">
-    <div class="p-5 text-primary-content">Logo</div>
-    <ul>
-      <li class="p-4" *ngFor="let item of menuItems">
-        <span class="cursor-pointer text-primary-content" *ngIf="isCollapsed">
-          {{ item.icon }}
-        </span>
-        <span
-          class="cursor-pointer text-primary-content"
-          *ngIf="!isCollapsed"
-          (click)="toggleSubMenu(item)">
-          {{ item.name }}
-        </span>
-        <ul
-          *ngIf="!isCollapsed && item.open"
-          class="transition-all duration-300 ease-in-out">
-          <li
-            class="pl-8 py-2 cursor-pointer text-primary-content"
-            *ngFor="let subItem of item.subItems">
-            {{ subItem }}
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </div>
-  <!-- Toggle Button -->
-  <button class="p-2 text-xl" (click)="toggleSidebar()">
-    {{ isCollapsed ? '👉' : '👈' }}
-  </button>
+<div class="flex flex-col h-screen overflow-hidden">
+  <!-- Header -->
+  <header
+    class="p-4 bg-primary text-primary-content flex items-center z-20 h-20 shadow-sm shadow-black/50">
+    <div class="w-10 flex items-center justify-center">
+      <label class="btn btn-ghost swap swap-rotate md:invisible">
+        <input
+          type="checkbox"
+          (change)="toggleSidebar()"
+          [checked]="!isCollapsed" />
+        <!-- hamburger icon -->
+        <svg
+          class="swap-off fill-current"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 512 512">
+          <path
+            d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
+        </svg>
+        <!-- close icon -->
+        <svg
+          class="swap-on fill-current"
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 512 512">
+          <polygon
+            points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
+        </svg>
+      </label>
+    </div>
+    <div class="pl-4 flex-grow">
+      <div>Logo</div>
+    </div>
+    <!-- Desktop toggle button -->
+    <button class="hidden md:block" (click)="toggleDesktopSidebar()">
+      {{ isDesktopCollapsed ? '👉' : '👈' }}
+    </button>
+  </header>
 
-  <!-- Main content -->
-  <div class="flex-1 p-10 text-2xl font-bold">Hauptinhalt hier</div>
+  <div class="flex flex-1 relative">
+    <!-- Sidebar -->
+    <div
+      [class]="
+        isCollapsed
+          ? 'bg-primary w-0 md:w-20 transition-all duration-300 ease-in-out'
+          : isDesktopCollapsed
+            ? 'bg-primary w-48 md:w-20 transition-all duration-300 ease-in-out shadow-xl shadow-black/50'
+            : 'bg-primary w-48 md:w-48 transition-all duration-300 ease-in-out shadow-xl shadow-black/50'
+      "
+      class="transform absolute md:relative h-full z-20 overflow-y-auto">
+      <ul class="p-4">
+        <li class="px-1 py-2" *ngFor="let item of menuItems">
+          <span
+            class="cursor-pointer text-red text-primary-content block md:inline-block"
+            *ngIf="isDesktopCollapsed && !showMobileMenu"
+            [innerHTML]="item.icon"></span>
+
+          <div
+            class="flex items-center justify-between cursor-pointer text-primary-content"
+            *ngIf="!isDesktopCollapsed || showMobileMenu"
+            (click)="toggleSubMenu(item)">
+            <div class="flex items-center">
+              <span [innerHTML]="item.icon" class="mx-2"></span>
+              <span>{{ item.name }}</span>
+            </div>
+            <span
+              *ngIf="item.subItems && item.subItems.length > 0"
+              [class.rotate-90]="item.open"
+              class="transition-transform duration-300">
+              ▶
+            </span>
+          </div>
+
+          <ul
+            *ngIf="(!isDesktopCollapsed || showMobileMenu) && item.open"
+            class="mt-2 ml-4 transition-all duration-300 ease-in-out">
+            <li
+              class="py-2 cursor-pointer text-primary-content hover:bg-primary-focus rounded"
+              *ngFor="let subItem of item.subItems">
+              {{ subItem }}
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+
+    <div
+      *ngIf="!isCollapsed"
+      class="fixed inset-0 bg-black bg-opacity-50 z-10 md:hidden"
+      (click)="toggleSidebar()"></div>
+
+    <!-- Main content -->
+    <div class="flex-1 p-10 text-2xl font-bold">Hauptinhalt hier</div>
+  </div>
 </div>
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 abcc404..aec9cfb 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
@@ -4,10 +4,11 @@ import {
   Component,
   HostListener,
 } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 interface MenuItem {
   name: string;
-  icon: string;
+  icon: SafeHtml;
   subItems: string[];
   open?: boolean;
 }
@@ -23,21 +24,21 @@ interface MenuItem {
 })
 export class DashboardRootComponent {
   public isCollapsed: boolean = false;
+  public isDesktopCollapsed: boolean = false;
   public showMobileMenu: boolean = false;
   public userHasInteracted: boolean = false;
   public menuItems: MenuItem[] = [
-    { name: 'Home', icon: '🏠', subItems: [] },
-    { name: 'About', icon: 'ℹ️', subItems: [] },
     {
-      name: 'Services',
-      icon: '🛠️',
-      subItems: ['Web Design', 'SEO', 'Development'],
-      open: false,
+      name: 'Dashboard',
+      icon: this.sanitizer
+        .bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+      </svg>`),
+      subItems: [],
     },
-    { name: 'Contact', icon: '📞', subItems: [] },
   ];
 
-  public constructor() {}
+  public constructor(private sanitizer: DomSanitizer) {}
 
   @HostListener('window:resize', ['$event'])
   public onResize(): void {
@@ -53,9 +54,14 @@ export class DashboardRootComponent {
 
   public toggleSidebar(): void {
     this.isCollapsed = !this.isCollapsed;
+    this.showMobileMenu = !this.isCollapsed;
     this.userHasInteracted = true;
   }
 
+  public toggleDesktopSidebar(): void {
+    this.isDesktopCollapsed = !this.isDesktopCollapsed;
+  }
+
   public toggleSubMenu(item: any): void {
     if (item.subItems.length) {
       item.open = !item.open;
-- 
2.40.1


From 5246b374c4b55a7e91d65d1751abd53ecb6993f7 Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Thu, 18 Jul 2024 15:23:58 +0200
Subject: [PATCH 3/7] Update Main Navigation

---
 .../dashboard-root.component.html             | 207 ++++++++++--------
 .../dashboard-root.component.ts               |  36 +--
 2 files changed, 134 insertions(+), 109 deletions(-)

diff --git a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
index 23eb2c3..e7728ac 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
@@ -1,97 +1,120 @@
-<div class="flex flex-col h-screen overflow-hidden">
-  <!-- Header -->
-  <header
-    class="p-4 bg-primary text-primary-content flex items-center z-20 h-20 shadow-sm shadow-black/50">
-    <div class="w-10 flex items-center justify-center">
-      <label class="btn btn-ghost swap swap-rotate md:invisible">
-        <input
-          type="checkbox"
-          (change)="toggleSidebar()"
-          [checked]="!isCollapsed" />
-        <!-- hamburger icon -->
-        <svg
-          class="swap-off fill-current"
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 512 512">
-          <path
-            d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
-        </svg>
-        <!-- close icon -->
-        <svg
-          class="swap-on fill-current"
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 512 512">
-          <polygon
-            points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
-        </svg>
-      </label>
-    </div>
-    <div class="pl-4 flex-grow">
-      <div>Logo</div>
-    </div>
-    <!-- Desktop toggle button -->
-    <button class="hidden md:block" (click)="toggleDesktopSidebar()">
-      {{ isDesktopCollapsed ? '👉' : '👈' }}
-    </button>
-  </header>
-
-  <div class="flex flex-1 relative">
-    <!-- Sidebar -->
-    <div
-      [class]="
-        isCollapsed
-          ? 'bg-primary w-0 md:w-20 transition-all duration-300 ease-in-out'
+<div class="flex h-screen overflow-hidden">
+  <!-- Sidebar -->
+  <div
+    [class]="
+      isCollapsed
+        ? 'bg-primary w-0 md:w-20 transition-all duration-300 ease-in-out'
+        : showMobileMenu
+          ? 'bg-primary w-64 transition-all duration-300 ease-in-out'
           : isDesktopCollapsed
-            ? 'bg-primary w-48 md:w-20 transition-all duration-300 ease-in-out shadow-xl shadow-black/50'
-            : 'bg-primary w-48 md:w-48 transition-all duration-300 ease-in-out shadow-xl shadow-black/50'
-      "
-      class="transform absolute md:relative h-full z-20 overflow-y-auto">
-      <ul class="p-4">
-        <li class="px-1 py-2" *ngFor="let item of menuItems">
-          <span
-            class="cursor-pointer text-red text-primary-content block md:inline-block"
-            *ngIf="isDesktopCollapsed && !showMobileMenu"
-            [innerHTML]="item.icon"></span>
-
-          <div
-            class="flex items-center justify-between cursor-pointer text-primary-content"
-            *ngIf="!isDesktopCollapsed || showMobileMenu"
-            (click)="toggleSubMenu(item)">
-            <div class="flex items-center">
-              <span [innerHTML]="item.icon" class="mx-2"></span>
-              <span>{{ item.name }}</span>
-            </div>
-            <span
-              *ngIf="item.subItems && item.subItems.length > 0"
-              [class.rotate-90]="item.open"
-              class="transition-transform duration-300">
-              ▶
-            </span>
-          </div>
-
-          <ul
-            *ngIf="(!isDesktopCollapsed || showMobileMenu) && item.open"
-            class="mt-2 ml-4 transition-all duration-300 ease-in-out">
-            <li
-              class="py-2 cursor-pointer text-primary-content hover:bg-primary-focus rounded"
-              *ngFor="let subItem of item.subItems">
-              {{ subItem }}
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
-
+            ? 'bg-primary w-48 md:w-16 transition-all duration-300 ease-in-out'
+            : 'bg-primary w-48 md:w-48 transition-all duration-300 ease-in-out'
+    "
+    class="transform h-full z-20 overflow-y-auto fixed md:relative">
     <div
-      *ngIf="!isCollapsed"
-      class="fixed inset-0 bg-black bg-opacity-50 z-10 md:hidden"
-      (click)="toggleSidebar()"></div>
+      [ngClass]="showMobileMenu ? 'justify-center' : 'justify-between'"
+      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">
+          @if (!isCollapsed && !isDesktopCollapsed) {
+            <div class="text-primary">Logo</div>
+          }
 
-    <!-- Main content -->
-    <div class="flex-1 p-10 text-2xl font-bold">Hauptinhalt hier</div>
+          @if (!isCollapsed && !showMobileMenu) {
+            <button
+              (click)="toggleDesktopSidebar()"
+              class="flex items-center justify-center w-10 h-10 rounded-full">
+              @if (isDesktopCollapsed) {
+                <svg
+                  class="stroke-current text-primary w-6 h-6"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="3">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                </svg>
+              } @else {
+                <svg
+                  class="stroke-current text-primary w-6 h-6"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="3">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M15.75 19.5 8.25 12l7.5-7.5" />
+                </svg>
+              }
+            </button>
+          }
+        </div>
+      </div>
+    </div>
+    <ul class="m-1">
+      <li
+        class="hover:bg-accent-content cursor-pointer hover:text-accent text-primary-content rounded-btn"
+        *ngFor="let item of menuItems">
+        <div
+          class="flex justify-center p-2"
+          *ngIf="isDesktopCollapsed && !showMobileMenu">
+          <span class="p-1" [innerHTML]="item.icon"></span>
+        </div>
+
+        <div
+          class="flex items-center rounded-btn justify-between cursor-pointer px-1 py-2 hover:bg-accent-content hover:text-accent text-primary-content"
+          *ngIf="!isDesktopCollapsed || showMobileMenu">
+          <div class="flex items-center hover:bold">
+            <span [innerHTML]="item.icon" class="mx-2"></span>
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+      </li>
+    </ul>
   </div>
+
+  <div class="flex flex-col flex-grow">
+    <header 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
+            type="checkbox"
+            (change)="toggleSidebar()"
+            [checked]="!isCollapsed" />
+          <svg
+            class="swap-off fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 512 512">
+            <path
+              d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
+          </svg>
+          <svg
+            class="swap-on fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 512 512">
+            <polygon
+              points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
+          </svg>
+        </label>
+      </div>
+    </header>
+
+    <div class="flex-grow p-10 text-2xl font-bold overflow-y-auto">
+      <p>isCollapsed: {{ isCollapsed }}</p>
+      <p>showMobileMenu: {{ showMobileMenu }}</p>
+      <p>isDesktopCollapsed: {{ isDesktopCollapsed }}</p>
+    </div>
+  </div>
+
+  <div
+    *ngIf="!isCollapsed"
+    class="fixed inset-0 bg-black bg-opacity-50 z-10 md:hidden"
+    (click)="toggleSidebar()"></div>
 </div>
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 aec9cfb..2da5013 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
@@ -3,14 +3,15 @@ import {
   ChangeDetectionStrategy,
   Component,
   HostListener,
+  OnInit,
 } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 interface MenuItem {
   name: string;
   icon: SafeHtml;
-  subItems: string[];
   open?: boolean;
+  active?: boolean;
 }
 
 @Component({
@@ -22,7 +23,7 @@ interface MenuItem {
   styleUrl: './dashboard-root.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DashboardRootComponent {
+export class DashboardRootComponent implements OnInit {
   public isCollapsed: boolean = false;
   public isDesktopCollapsed: boolean = false;
   public showMobileMenu: boolean = false;
@@ -34,37 +35,38 @@ export class DashboardRootComponent {
         .bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
       </svg>`),
-      subItems: [],
     },
   ];
 
   public constructor(private sanitizer: DomSanitizer) {}
 
+  public ngOnInit(): void {
+    this.onResize();
+  }
+
   @HostListener('window:resize', ['$event'])
   public onResize(): void {
-    if (!this.userHasInteracted) {
-      this.isCollapsed = window.innerWidth < 768;
+    if (window.innerWidth >= 768) {
+      this.showMobileMenu = false;
+      this.isCollapsed = false;
     } else {
-      if (window.innerWidth > 768) {
-        this.isCollapsed = false;
-        this.userHasInteracted = false;
-      }
+      this.isDesktopCollapsed = false;
+      this.isCollapsed = true;
+      this.showMobileMenu = false;
     }
   }
 
   public toggleSidebar(): void {
-    this.isCollapsed = !this.isCollapsed;
-    this.showMobileMenu = !this.isCollapsed;
+    if (window.innerWidth < 768) {
+      this.showMobileMenu = !this.showMobileMenu;
+      this.isCollapsed = !this.showMobileMenu;
+    } else {
+      this.isDesktopCollapsed = !this.isDesktopCollapsed;
+    }
     this.userHasInteracted = true;
   }
 
   public toggleDesktopSidebar(): void {
     this.isDesktopCollapsed = !this.isDesktopCollapsed;
   }
-
-  public toggleSubMenu(item: any): void {
-    if (item.subItems.length) {
-      item.open = !item.open;
-    }
-  }
 }
-- 
2.40.1


From 062344f65ddb420f30861f47162ee690f1857813 Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Thu, 18 Jul 2024 16:22:33 +0200
Subject: [PATCH 4/7] set active state to nav

---
 .../dashboard-root.component.html             | 11 +++++--
 .../dashboard-root.component.ts               | 31 +++++++++++++++++--
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
index e7728ac..d337baf 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
@@ -56,7 +56,12 @@
     </div>
     <ul class="m-1">
       <li
-        class="hover:bg-accent-content cursor-pointer hover:text-accent text-primary-content rounded-btn"
+        class="cursor-pointer rounded-btn"
+        [ngClass]="{
+          'bg-base-100 text-primary': item.active,
+          'text-primary-content hover:text-base-content': !item.active
+        }"
+        (click)="setActive(item)"
         *ngFor="let item of menuItems">
         <div
           class="flex justify-center p-2"
@@ -65,9 +70,9 @@
         </div>
 
         <div
-          class="flex items-center rounded-btn justify-between cursor-pointer px-1 py-2 hover:bg-accent-content hover:text-accent text-primary-content"
+          class="flex items-center rounded-btn justify-between cursor-pointer px-1 py-2"
           *ngIf="!isDesktopCollapsed || showMobileMenu">
-          <div class="flex items-center hover:bold">
+          <div class="flex items-center">
             <span [innerHTML]="item.icon" class="mx-2"></span>
             <span>{{ item.name }}</span>
           </div>
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 2da5013..82b2aba 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
@@ -6,11 +6,12 @@ import {
   OnInit,
 } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { Router, ActivatedRoute } from '@angular/router';
 
 interface MenuItem {
   name: string;
   icon: SafeHtml;
-  open?: boolean;
+  route: string;
   active?: boolean;
 }
 
@@ -31,6 +32,7 @@ export class DashboardRootComponent implements OnInit {
   public menuItems: MenuItem[] = [
     {
       name: 'Dashboard',
+      route: '/dashboard',
       icon: this.sanitizer
         .bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
@@ -38,9 +40,19 @@ export class DashboardRootComponent implements OnInit {
     },
   ];
 
-  public constructor(private sanitizer: DomSanitizer) {}
+  public constructor(
+    private readonly sanitizer: DomSanitizer,
+    private readonly router: Router,
+    private readonly route: ActivatedRoute
+  ) {}
 
   public ngOnInit(): void {
+    this.setActiveItemBasedOnRoute();
+    this.router.events.subscribe(() => {
+      console.log('router event');
+
+      this.setActiveItemBasedOnRoute();
+    });
     this.onResize();
   }
 
@@ -69,4 +81,19 @@ export class DashboardRootComponent implements OnInit {
   public toggleDesktopSidebar(): void {
     this.isDesktopCollapsed = !this.isDesktopCollapsed;
   }
+
+  public setActive(item: MenuItem): void {
+    this.menuItems.forEach((menu: MenuItem) => {
+      menu.active = false;
+    });
+    item.active = true;
+  }
+
+  private setActiveItemBasedOnRoute(): void {
+    const url = this.router.url;
+
+    this.menuItems.forEach((item: MenuItem) => {
+      item.active = url.startsWith(item.route);
+    });
+  }
 }
-- 
2.40.1


From 8a4800748b59b6e52c36058f3f6bb702376356c7 Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Thu, 18 Jul 2024 17:26:43 +0200
Subject: [PATCH 5/7] added background pattern

---
 .../dashboard-root.component.html             | 10 +++-
 .../dashboard-root.component.ts               | 51 +++++++++++++++++--
 2 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
index d337baf..e202683 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
+++ b/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>
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 {
       </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;
-- 
2.40.1


From ab9fa5265301cdd2d8d471d68f4d924b16a0596c Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Thu, 18 Jul 2024 17:43:51 +0200
Subject: [PATCH 6/7] fix stylings

---
 .../app/pages/dashboard-root/dashboard-root.component.html    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
index e202683..1adfd5f 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
@@ -115,9 +115,7 @@
       </div>
     </header>
 
-    <div
-      [ngStyle]="mainContent"
-      class="flex-grow p-10 text-2xl font-bold overflow-y-auto">
+    <div [ngStyle]="mainContent" class="px-8 py-4 flex-grow text-2xl p-4">
       <p>isCollapsed: {{ isCollapsed }}</p>
       <p>showMobileMenu: {{ showMobileMenu }}</p>
       <p>isDesktopCollapsed: {{ isDesktopCollapsed }}</p>
-- 
2.40.1


From 09cc4cf0e7baae01785a4f7fa9182a4f04ac6039 Mon Sep 17 00:00:00 2001
From: Igor Propisnov <info@igor-propisnov.com>
Date: Thu, 18 Jul 2024 18:29:51 +0200
Subject: [PATCH 7/7] added seperate layouts for content

---
 frontend/src/app/app.component.spec.ts        |  36 -----
 frontend/src/app/app.component.ts             |  12 +-
 frontend/src/app/app.routes.ts                |  32 ++--
 .../layout/main-layout/layout.component.html  | 127 ++++++++++++++++
 .../layout/main-layout/layout.component.ts    | 139 ++++++++++++++++++
 .../simple-layout/simple-layout.component.ts  |  12 ++
 .../dashboard-root.component.html             | 130 +---------------
 .../dashboard-root.component.ts               | 133 +----------------
 8 files changed, 307 insertions(+), 314 deletions(-)
 delete mode 100644 frontend/src/app/app.component.spec.ts
 create mode 100644 frontend/src/app/layout/main-layout/layout.component.html
 create mode 100644 frontend/src/app/layout/main-layout/layout.component.ts
 create mode 100644 frontend/src/app/layout/simple-layout/simple-layout.component.ts

diff --git a/frontend/src/app/app.component.spec.ts b/frontend/src/app/app.component.spec.ts
deleted file mode 100644
index d300ba8..0000000
--- a/frontend/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-
-    expect(app).toBeTruthy();
-  });
-
-  it('should have the "frontend" title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-
-    expect(app.title).toEqual('frontend');
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-
-    expect(compiled.querySelector('h1')?.textContent).toContain(
-      'Hello, frontend'
-    );
-  });
-});
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 7b793bb..b43877d 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -1,16 +1,14 @@
-import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
-import { ThemeService } from './shared/service';
-
 @Component({
   selector: 'app-root',
   standalone: true,
   providers: [],
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, CommonModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent {
-  public constructor(private readonly themeService: ThemeService) {}
-}
+export class AppComponent {}
diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts
index 3f90917..248a466 100644
--- a/frontend/src/app/app.routes.ts
+++ b/frontend/src/app/app.routes.ts
@@ -1,15 +1,8 @@
 import { Routes } from '@angular/router';
 
-const publicRoutes: Routes = [
+const simpleLayoutRoutes: Routes = [
   {
     path: '',
-    loadComponent: () =>
-      import('./pages/home-root/home-root.component').then(
-        (m) => m.HomeComponent
-      ),
-  },
-  {
-    path: 'welcome',
     loadComponent: () =>
       import('./pages/register-root/register-root.component').then(
         (m) => m.RegisterRootComponent
@@ -38,10 +31,27 @@ const protectedRoutes: Routes = [
 export const routes: Routes = [
   {
     path: '',
+    loadComponent: () =>
+      import('./layout/simple-layout/simple-layout.component').then(
+        (m) => m.LayoutSimpleComponent
+      ),
+    children: simpleLayoutRoutes,
+  },
+  {
+    path: '',
+    loadComponent: () =>
+      import('./layout/main-layout/layout.component').then(
+        (m) => m.LayoutComponent
+      ),
     children: [
-      ...publicRoutes,
-      ...protectedRoutes,
-      { path: '', redirectTo: '', pathMatch: 'full' },
+      {
+        path: '',
+        children: [
+          ...protectedRoutes,
+          { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
+        ],
+      },
     ],
   },
+  { path: '**', redirectTo: '' },
 ];
diff --git a/frontend/src/app/layout/main-layout/layout.component.html b/frontend/src/app/layout/main-layout/layout.component.html
new file mode 100644
index 0000000..e0ec047
--- /dev/null
+++ b/frontend/src/app/layout/main-layout/layout.component.html
@@ -0,0 +1,127 @@
+<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'
+        : showMobileMenu
+          ? 'bg-primary w-64 transition-all duration-300 ease-in-out'
+          : isDesktopCollapsed
+            ? 'bg-primary w-48 md:w-16 transition-all duration-300 ease-in-out'
+            : 'bg-primary w-48 md:w-48 transition-all duration-300 ease-in-out'
+    "
+    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">
+          @if (!isCollapsed && !isDesktopCollapsed) {
+            <div class="text-primary">Logo</div>
+          }
+
+          @if (!isCollapsed && !showMobileMenu) {
+            <button
+              (click)="toggleDesktopSidebar()"
+              class="flex items-center justify-center w-10 h-10 rounded-full">
+              @if (isDesktopCollapsed) {
+                <svg
+                  class="stroke-current text-primary w-6 h-6"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="3">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+                </svg>
+              } @else {
+                <svg
+                  class="stroke-current text-primary w-6 h-6"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="3">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M15.75 19.5 8.25 12l7.5-7.5" />
+                </svg>
+              }
+            </button>
+          }
+        </div>
+      </div>
+    </div>
+    <ul class="m-1">
+      <li
+        class="cursor-pointer rounded-btn"
+        [ngClass]="{
+          'bg-base-100 text-primary': item.active,
+          'text-primary-content hover:text-base-content': !item.active
+        }"
+        (click)="setActive(item)"
+        *ngFor="let item of menuItems">
+        <div
+          class="flex justify-center p-2"
+          *ngIf="isDesktopCollapsed && !showMobileMenu">
+          <span class="p-1" [innerHTML]="item.icon"></span>
+        </div>
+
+        <div
+          class="flex items-center rounded-btn justify-between cursor-pointer px-1 py-2"
+          *ngIf="!isDesktopCollapsed || showMobileMenu">
+          <div class="flex items-center">
+            <span [innerHTML]="item.icon" class="mx-2"></span>
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+
+  <div class="flex flex-col flex-grow">
+    <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
+            type="checkbox"
+            (change)="toggleSidebar()"
+            [checked]="!isCollapsed" />
+          <svg
+            class="swap-off fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 512 512">
+            <path
+              d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
+          </svg>
+          <svg
+            class="swap-on fill-current"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 512 512">
+            <polygon
+              points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
+          </svg>
+        </label>
+      </div>
+    </header>
+
+    <div [ngStyle]="mainContent" class="px-8 py-4 flex-grow text-2xl p-4">
+      <router-outlet></router-outlet>
+    </div>
+  </div>
+
+  <div
+    *ngIf="!isCollapsed"
+    class="fixed inset-0 bg-black bg-opacity-50 z-10 md:hidden"
+    (click)="toggleSidebar()"></div>
+</div>
diff --git a/frontend/src/app/layout/main-layout/layout.component.ts b/frontend/src/app/layout/main-layout/layout.component.ts
new file mode 100644
index 0000000..f7afb6e
--- /dev/null
+++ b/frontend/src/app/layout/main-layout/layout.component.ts
@@ -0,0 +1,139 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  HostListener,
+  OnInit,
+} from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { Router, RouterOutlet } from '@angular/router';
+
+import { BackgroundPatternService, ThemeService } from '../../shared/service';
+
+interface MenuItem {
+  name: string;
+  icon: SafeHtml;
+  route: string;
+  active?: boolean;
+}
+
+@Component({
+  selector: 'app-layout',
+  standalone: true,
+  providers: [],
+  imports: [RouterOutlet, CommonModule],
+  templateUrl: './layout.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LayoutComponent implements OnInit {
+  public isCollapsed: boolean = false;
+  public isDesktopCollapsed: boolean = false;
+  public showMobileMenu: boolean = false;
+  public userHasInteracted: boolean = false;
+  public menuItems: MenuItem[] = [
+    {
+      name: 'Dashboard',
+      route: '/dashboard',
+      icon: this.sanitizer
+        .bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+      </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 backgroundPatternService: BackgroundPatternService,
+    private readonly themeService: ThemeService,
+    private readonly el: ElementRef
+  ) {}
+
+  public ngOnInit(): void {
+    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 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
+    );
+
+    this.mainContent = {
+      'background-image': `url("${svgUrlMainContent}")`,
+    };
+    this.navigation = {
+      'background-image': `url("${svgUrlNavigation}")`,
+    };
+  }
+
+  public toggleSidebar(): void {
+    if (window.innerWidth < 768) {
+      this.showMobileMenu = !this.showMobileMenu;
+      this.isCollapsed = !this.showMobileMenu;
+    } else {
+      this.isDesktopCollapsed = !this.isDesktopCollapsed;
+    }
+    this.userHasInteracted = true;
+  }
+
+  public toggleDesktopSidebar(): void {
+    this.isDesktopCollapsed = !this.isDesktopCollapsed;
+  }
+
+  public setActive(item: MenuItem): void {
+    this.menuItems.forEach((menu: MenuItem) => {
+      menu.active = false;
+    });
+    item.active = true;
+  }
+
+  private setActiveItemBasedOnRoute(): void {
+    const url = this.router.url;
+
+    this.menuItems.forEach((item: MenuItem) => {
+      item.active = url.startsWith(item.route);
+    });
+  }
+}
diff --git a/frontend/src/app/layout/simple-layout/simple-layout.component.ts b/frontend/src/app/layout/simple-layout/simple-layout.component.ts
new file mode 100644
index 0000000..5d6fca1
--- /dev/null
+++ b/frontend/src/app/layout/simple-layout/simple-layout.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-simple-layout',
+  standalone: true,
+  imports: [RouterOutlet],
+  template: `
+    <router-outlet></router-outlet>
+  `,
+})
+export class LayoutSimpleComponent {}
diff --git a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
index 1adfd5f..4b9b192 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.html
@@ -1,129 +1 @@
-<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'
-        : showMobileMenu
-          ? 'bg-primary w-64 transition-all duration-300 ease-in-out'
-          : isDesktopCollapsed
-            ? 'bg-primary w-48 md:w-16 transition-all duration-300 ease-in-out'
-            : 'bg-primary w-48 md:w-48 transition-all duration-300 ease-in-out'
-    "
-    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">
-          @if (!isCollapsed && !isDesktopCollapsed) {
-            <div class="text-primary">Logo</div>
-          }
-
-          @if (!isCollapsed && !showMobileMenu) {
-            <button
-              (click)="toggleDesktopSidebar()"
-              class="flex items-center justify-center w-10 h-10 rounded-full">
-              @if (isDesktopCollapsed) {
-                <svg
-                  class="stroke-current text-primary w-6 h-6"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke-width="3">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="m8.25 4.5 7.5 7.5-7.5 7.5" />
-                </svg>
-              } @else {
-                <svg
-                  class="stroke-current text-primary w-6 h-6"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke-width="3">
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M15.75 19.5 8.25 12l7.5-7.5" />
-                </svg>
-              }
-            </button>
-          }
-        </div>
-      </div>
-    </div>
-    <ul class="m-1">
-      <li
-        class="cursor-pointer rounded-btn"
-        [ngClass]="{
-          'bg-base-100 text-primary': item.active,
-          'text-primary-content hover:text-base-content': !item.active
-        }"
-        (click)="setActive(item)"
-        *ngFor="let item of menuItems">
-        <div
-          class="flex justify-center p-2"
-          *ngIf="isDesktopCollapsed && !showMobileMenu">
-          <span class="p-1" [innerHTML]="item.icon"></span>
-        </div>
-
-        <div
-          class="flex items-center rounded-btn justify-between cursor-pointer px-1 py-2"
-          *ngIf="!isDesktopCollapsed || showMobileMenu">
-          <div class="flex items-center">
-            <span [innerHTML]="item.icon" class="mx-2"></span>
-            <span>{{ item.name }}</span>
-          </div>
-        </div>
-      </li>
-    </ul>
-  </div>
-
-  <div class="flex flex-col flex-grow">
-    <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
-            type="checkbox"
-            (change)="toggleSidebar()"
-            [checked]="!isCollapsed" />
-          <svg
-            class="swap-off fill-current"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 512 512">
-            <path
-              d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
-          </svg>
-          <svg
-            class="swap-on fill-current"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 512 512">
-            <polygon
-              points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
-          </svg>
-        </label>
-      </div>
-    </header>
-
-    <div [ngStyle]="mainContent" class="px-8 py-4 flex-grow text-2xl p-4">
-      <p>isCollapsed: {{ isCollapsed }}</p>
-      <p>showMobileMenu: {{ showMobileMenu }}</p>
-      <p>isDesktopCollapsed: {{ isDesktopCollapsed }}</p>
-    </div>
-  </div>
-
-  <div
-    *ngIf="!isCollapsed"
-    class="fixed inset-0 bg-black bg-opacity-50 z-10 md:hidden"
-    (click)="toggleSidebar()"></div>
-</div>
+<h1>Dashboard Works</h1>
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 3d88fdb..bcce9d1 100644
--- a/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
+++ b/frontend/src/app/pages/dashboard-root/dashboard-root.component.ts
@@ -1,22 +1,5 @@
 import { CommonModule } from '@angular/common';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ElementRef,
-  HostListener,
-  OnInit,
-} from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { Router } from '@angular/router';
-
-import { BackgroundPatternService, ThemeService } from '../../shared/service';
-
-interface MenuItem {
-  name: string;
-  icon: SafeHtml;
-  route: string;
-  active?: boolean;
-}
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
   selector: 'app-dashboard-root',
@@ -27,116 +10,4 @@ interface MenuItem {
   styleUrl: './dashboard-root.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DashboardRootComponent implements OnInit {
-  public isCollapsed: boolean = false;
-  public isDesktopCollapsed: boolean = false;
-  public showMobileMenu: boolean = false;
-  public userHasInteracted: boolean = false;
-  public menuItems: MenuItem[] = [
-    {
-      name: 'Dashboard',
-      route: '/dashboard',
-      icon: this.sanitizer
-        .bypassSecurityTrustHtml(`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-        <path stroke-linecap="round" stroke-linejoin="round" d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
-      </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 backgroundPatternService: BackgroundPatternService,
-    private readonly themeService: ThemeService,
-    private readonly el: ElementRef
-  ) {}
-
-  public ngOnInit(): void {
-    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 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;
-      this.isCollapsed = !this.showMobileMenu;
-    } else {
-      this.isDesktopCollapsed = !this.isDesktopCollapsed;
-    }
-    this.userHasInteracted = true;
-  }
-
-  public toggleDesktopSidebar(): void {
-    this.isDesktopCollapsed = !this.isDesktopCollapsed;
-  }
-
-  public setActive(item: MenuItem): void {
-    this.menuItems.forEach((menu: MenuItem) => {
-      menu.active = false;
-    });
-    item.active = true;
-  }
-
-  private setActiveItemBasedOnRoute(): void {
-    const url = this.router.url;
-
-    this.menuItems.forEach((item: MenuItem) => {
-      item.active = url.startsWith(item.route);
-    });
-  }
-}
+export class DashboardRootComponent {}
-- 
2.40.1