frontend/src/app/app.routes.ts

@@ -26,7 +26,13 @@ const protectedRoutes: Routes = [
       import('./pages/dashboard-root/dashboard-root.component').then(
         (m) => m.DashboardRootComponent
       ),
-    canActivate: [],
+  },
+  {
+    path: 'event',
+    loadComponent: () =>
+      import('./pages/event-root/event-root.component').then(
+        (m) => m.EventRootComponent
+      ),
   },
 ];
 

frontend/src/app/layout/main-layout/layout.component.html

@@ -3,18 +3,18 @@
     [ngStyle]="navigation"
     [class]="
       isCollapsed
-        ? 'bg-primary w-0 md:w-20 transition-all duration-300 ease-in-out'
+        ? 'bg-primary w-0 md:w-20 transition-all duration-300 ease-in-out shadow-[5px_0_20px_rgba(0,0,0,0.5)]'
         : showMobileMenu
-          ? 'bg-primary w-64 transition-all duration-300 ease-in-out'
+          ? 'bg-primary w-64 transition-all duration-300 ease-in-out shadow-[5px_0_20px_rgba(0,0,0,0.5)]'
           : isDesktopCollapsed
-            ? 'bg-primary w-48 md:w-14 transition-all duration-300 ease-in-out'
+            ? 'bg-primary w-48 md:w-14 transition-all duration-300 ease-in-out shadow-[5px_0_20px_rgba(0,0,0,0.5)]'
-            : 'bg-primary w-48 md:w-48 transition-all duration-300 ease-in-out'
+            : 'bg-primary w-48 md:w-48 transition-all duration-300 ease-in-out shadow-[5px_0_20px_rgba(0,0,0,0.5)]'
     "
     class="transform h-full z-20 overflow-y-auto fixed md:relative flex flex-col">
     <div
       [ngClass]="showMobileMenu ? 'justify-center' : 'justify-between'"
       [ngStyle]="navigation"
-      class="p-1 w-full h-16 bg-base-100 flex items-center relative">
+      class="p-1 w-full h-16 z-50 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) {
@@ -60,7 +60,8 @@
         class="cursor-pointer rounded-btn mt-2"
         [ngClass]="{
           'bg-base-100 text-primary': item.active,
-          'text-primary-content hover:text-base-content': !item.active
+          'text-primary-content hover:text-accent-content hover:bg-accent':
+            !item.active
         }"
         (click)="setActive(item)"
         (keydown.enter)="setActive(item)"
@@ -114,7 +115,7 @@
   <div class="flex flex-col flex-grow">
     <header
       [ngStyle]="navigation"
-      class="p-4 bg-primary text-primary-content flex items-center h-16">
+      class="p-4 z-0 md:z-20 relative bg-primary text-primary-content flex items-center h-16 shadow-[0_5px_20px_rgba(0,0,0,0.5)]">
       <div class="w-10 flex items-center justify-center md:hidden">
         <label class="btn btn-ghost swap swap-rotate">
           <input
@@ -144,6 +145,9 @@
     </header>
 
     <div [ngStyle]="mainContent" class="px-8 py-4 flex-grow text-2xl p-4">
+      <p>isCollapsed: {{ isCollapsed }}</p>
+      <P>isDesktopCollapsed: {{ isDesktopCollapsed }}</P>
+      <P>showMobileMenu: {{ showMobileMenu }}</P>
       <router-outlet></router-outlet>
     </div>
   </div>

frontend/src/app/layout/main-layout/layout.component.ts

@@ -38,7 +38,6 @@ export class LayoutComponent implements OnInit {
   public isCollapsed: boolean = false;
   public isDesktopCollapsed: boolean = false;
   public showMobileMenu: boolean = false;
-  public userHasInteracted: boolean = false;
   public menuItems: TopMenuItem[] = [
     {
       name: 'Dashboard',
@@ -48,6 +47,14 @@ export class LayoutComponent implements OnInit {
         <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>`),
     },
+    {
+      name: 'Event',
+      route: '/event',
+      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="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z" />
+      </svg>`),
+    },
   ];
   public bottomMenuItems: BottomMenuItem[] = [
     {
@@ -134,7 +141,6 @@ export class LayoutComponent implements OnInit {
     } else {
       this.isDesktopCollapsed = !this.isDesktopCollapsed;
     }
-    this.userHasInteracted = true;
   }
 
   public toggleDesktopSidebar(): void {
@@ -145,7 +151,10 @@ export class LayoutComponent implements OnInit {
     this.menuItems.forEach((menu: TopMenuItem) => {
       menu.active = false;
     });
-    item.active = true;
+    this.router.navigate([item.route]);
+    if (!this.isCollapsed && this.showMobileMenu) {
+      this.toggleSidebar();
+    }
   }
 
   private setActiveItemBasedOnRoute(): void {

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

@@ -0,0 +1 @@
+<h1>Event Root Works</h1>

frontend/src/app/pages/event-root/event-root.component.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'app-event-root',
+  standalone: true,
+  imports: [CommonModule],
+  providers: [],
+  templateUrl: './event-root.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EventRootComponent {}