From a1ba6b35f1ea69eeef3a0f9e358b40a748001e71 Mon Sep 17 00:00:00 2001
From: chris <cwer542@gmail.com>
Date: Sat, 15 Nov 2025 03:59:34 +0100
Subject: [PATCH] finish menu animations

---
 src/angular/frontend/src/app/app.routes.ts    |  8 +--
 .../shell/drawer/drawer.component.html        |  7 +--
 .../shell/drawer/drawer.component.scss        | 60 ++++++++++++-------
 .../shell/drawer/drawer.component.ts          |  7 +--
 .../app/components/shell/shell.component.html |  7 ++-
 .../app/components/shell/shell.component.scss | 43 ++++++++++++-
 .../app/components/shell/shell.component.ts   |  4 +-
 7 files changed, 96 insertions(+), 40 deletions(-)

diff --git a/src/angular/frontend/src/app/app.routes.ts b/src/angular/frontend/src/app/app.routes.ts
index cb57b58..aef4e4d 100644
--- a/src/angular/frontend/src/app/app.routes.ts
+++ b/src/angular/frontend/src/app/app.routes.ts
@@ -26,13 +26,13 @@ export const routes: Routes = [
         title: 'Home',
         path: '',
         component: HomeComponent,
-        data: { showInNav: true }
+        data: { showInNav: true, icon: 'home' }
       },
       {
         title: 'Dashboard',
         path: 'dashboard',
         component: DashboardComponent,
-        data: { showInNav: true },
+        data: { showInNav: true, icon: 'dashboard' },
         children: [
           {
             title: 'Test',
@@ -74,13 +74,13 @@ export const routes: Routes = [
         title: 'Users',
         path: 'users',
         component: HomeComponent,
-        data: { showInNav: true }
+        data: { showInNav: true, icon: 'groups' }
       },
       {
         title: 'Tenants',
         path: 'tenants',
         component: OutletComponent,
-        data: { showInNav: true },
+        data: { showInNav: true, icon: 'domain' },
         children: [
           {
             title: 'Grid',
diff --git a/src/angular/frontend/src/app/components/shell/drawer/drawer.component.html b/src/angular/frontend/src/app/components/shell/drawer/drawer.component.html
index 61fb75e..711c91b 100644
--- a/src/angular/frontend/src/app/components/shell/drawer/drawer.component.html
+++ b/src/angular/frontend/src/app/components/shell/drawer/drawer.component.html
@@ -1,11 +1,8 @@
-<div class="drawer-wrapper" [ngClass]="{'ready': viewInitialized, 'collapsed': isCollapsed()}">
+<div class="drawer-wrapper" [ngClass]="{'collapsed': isCollapsed()}">
   <div class="drawer-container">
     <ng-content select="drawer-content"></ng-content>
     <button class="menu-button secondary" (click)="handleMenuButton($event)">
-    <span class="material-symbols-outlined collapsed-icon" [ngClass]="{'active': isCollapsed()}">
-      &#xE5D2;
-    </span>
-      <span class="material-symbols-outlined open-icon" [ngClass]="{'active': !isCollapsed()}">
+      <span class="material-symbols-outlined menu-icon" [ngClass]="{'active': !isCollapsed()}">
       &#xE9BD;
     </span>
     </button>
diff --git a/src/angular/frontend/src/app/components/shell/drawer/drawer.component.scss b/src/angular/frontend/src/app/components/shell/drawer/drawer.component.scss
index 0087e12..1d50fed 100644
--- a/src/angular/frontend/src/app/components/shell/drawer/drawer.component.scss
+++ b/src/angular/frontend/src/app/components/shell/drawer/drawer.component.scss
@@ -6,19 +6,14 @@
   --transition-duration: .2s;
   --menu-trasition-duration: calc(var(--transition-duration) / 2);
 
-  .material-symbols-outlined.collapsed-icon {
-    display: none;
-  }
-  .material-symbols-outlined.open-icon {
-    display: inline-block;
+  .material-symbols-outlined.menu-icon {
+    transform: scaleX(1);
+    transition: transform var(--menu-trasition-duration) linear;
   }
 
   &:has(.drawer-wrapper.collapsed) {
-    .material-symbols-outlined.collapsed-icon {
-      display: inline-block;
-    }
-    .material-symbols-outlined.open-icon {
-      display: none;
+    .material-symbols-outlined.menu-icon {
+      transform: scaleX(-1);
     }
   }
 
@@ -31,17 +26,7 @@
     flex-shrink: 0;
     //overflow: hidden;
 
-    transition:
-      width var(--transition-duration) linear;
-
-    transition-behavior: allow-discrete;
-
-    //&.ready {
-    //  @starting-style {
-    //    width: 0;
-    //    display: block;
-    //  }
-    //}
+    transition: width var(--transition-duration) linear;
 
     .drawer-container {
 
@@ -62,7 +47,7 @@
 
       box-sizing: border-box;
 
-      transition: left var(--transition-duration) linear;
+      transition: left var(--transition-duration) linear, width var(--transition-duration) linear, min-width var(--transition-duration) linear;
 
       .menu-button {
         position: absolute;
@@ -89,13 +74,40 @@
 
     }
 
+    @media (min-width: 768px) {
+      &.collapsed {
+
+        width: 78px;
+
+        .drawer-container {
+          width: 78px;
+          min-width: 78px;
+        }
+
+
+      }
+    }
 
     @media (max-width: 768px) {
       width: 0;
 
+      .drawer-container {
+        @starting-style {
+          left: -78px;
+          width: 78px;
+          min-width: 78px;
+
+          .menu-button {
+            right: -3rem;
+          }
+        }
+      }
+
       &.collapsed {
         .drawer-container {
-          left: -250px;
+          left: -78px;
+          width: 78px;
+          min-width: 78px;
 
           .menu-button {
             right: -3rem;
@@ -103,6 +115,8 @@
         }
       }
     }
+
+
   }
 
   .main-content-container {
diff --git a/src/angular/frontend/src/app/components/shell/drawer/drawer.component.ts b/src/angular/frontend/src/app/components/shell/drawer/drawer.component.ts
index 811078e..152c9fe 100644
--- a/src/angular/frontend/src/app/components/shell/drawer/drawer.component.ts
+++ b/src/angular/frontend/src/app/components/shell/drawer/drawer.component.ts
@@ -13,7 +13,6 @@ import {NgClass} from '@angular/common';
 })
 export class DrawerComponent implements AfterViewInit, OnInit {
 
-  protected viewInitialized = false;
   protected isCollapsed = signal<boolean>(true);
   private router = inject(Router);
 
@@ -32,9 +31,9 @@ export class DrawerComponent implements AfterViewInit, OnInit {
   }
 
   ngAfterViewInit(): void {
-    requestAnimationFrame(() => {
-      this.viewInitialized = true;
-    })
+    // requestAnimationFrame(() => {
+    //   this.viewInitialized = true;
+    // })
   }
 
   handleMenuButton(_: PointerEvent) {
diff --git a/src/angular/frontend/src/app/components/shell/shell.component.html b/src/angular/frontend/src/app/components/shell/shell.component.html
index ef2e3d2..f183c41 100644
--- a/src/angular/frontend/src/app/components/shell/shell.component.html
+++ b/src/angular/frontend/src/app/components/shell/shell.component.html
@@ -5,8 +5,11 @@
 
     <div class="nav-links">
       @for (link of navLinks(); track link.label) {
-        <app-link [href]="link.url">
-          <span [ngClass]="{'active': activeTopLevelUrl() === link.url}" class="nav-link">{{link.label}}</span>
+        <app-link [href]="link.url" title="{{link.label}}">
+          <span [ngClass]="{'active': activeTopLevelUrl() === link.url}" class="nav-link">
+            <span class="material-symbols-outlined">{{ link.iconName ?? 'bolt' }}</span>
+            <span class="label">{{link.label}}</span>
+          </span>
         </app-link>
       }
     </div>
diff --git a/src/angular/frontend/src/app/components/shell/shell.component.scss b/src/angular/frontend/src/app/components/shell/shell.component.scss
index 0953ab5..cc40bb7 100644
--- a/src/angular/frontend/src/app/components/shell/shell.component.scss
+++ b/src/angular/frontend/src/app/components/shell/shell.component.scss
@@ -35,10 +35,20 @@
       width: 100%;
       padding-bottom: 1rem;
       border-bottom: 1px solid var(--neutral-60);
+      overflow: clip;
+
+      transition:
+        width var(--transition-duration) linear,
+        height var(--transition-duration) linear,
+        padding-bottom var(--transition-duration) linear;
 
       & ::ng-deep .icon {
         height: $height;
         width: #{$height * 3.356876171875};
+
+        transition:
+          width var(--transition-duration) linear,
+          height var(--transition-duration) linear;
       }
     }
 
@@ -48,10 +58,14 @@
       flex-direction: column;
 
       .nav-link {
-        width: 100%;
 
+        display: flex;
+        align-items: center;
+        width: 100%;
         padding: 0.5rem;
         border-radius: 0.25rem;
+        gap: 0.5ch;
+        overflow: clip;
 
         &:hover, &.active {
           background-color: var(--neutral-60);
@@ -77,3 +91,30 @@
     margin-left: auto;
   }
 }
+
+::ng-deep app-drawer {
+  .drawer-wrapper.collapsed {
+
+    ::ng-deep app-icon.logo {
+
+      width: 44px !important;
+      height: 44px !important;
+      padding-bottom: 28px !important;
+
+      .icon {
+        height: 44px !important;
+        width: calc(44px * 3.356876171875) !important;
+      }
+
+    }
+
+    .nav-links {
+      .nav-link {
+        .label {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
diff --git a/src/angular/frontend/src/app/components/shell/shell.component.ts b/src/angular/frontend/src/app/components/shell/shell.component.ts
index d3c5e92..734736e 100644
--- a/src/angular/frontend/src/app/components/shell/shell.component.ts
+++ b/src/angular/frontend/src/app/components/shell/shell.component.ts
@@ -72,7 +72,8 @@ export class ShellComponent implements OnInit {
       .map((r, id) => ({
         id,
         label: r.data?.['title'] || r.title || '',
-        url: '/' + (r.path ?? '')
+        url: '/' + (r.path ?? ''),
+        iconName: r.data?.['icon']
       }));
   }
 
@@ -118,4 +119,5 @@ export class Breadcrumb {
   id: number = 0;
   label: string = 'undefined';
   url: string = '';
+  iconName?: string;
 }