finish menu animations

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',

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()}">
+      <span class="material-symbols-outlined menu-icon" [ngClass]="{'active': !isCollapsed()}">
-      &#xE5D2;
-    </span>
-      <span class="material-symbols-outlined open-icon" [ngClass]="{'active': !isCollapsed()}">
       &#xE9BD;
     </span>
     </button>

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 {
+  .material-symbols-outlined.menu-icon {
-    display: none;
+    transform: scaleX(1);
-  }
+    transition: transform var(--menu-trasition-duration) linear;
-  .material-symbols-outlined.open-icon {
-    display: inline-block;
   }
 
   &:has(.drawer-wrapper.collapsed) {
-    .material-symbols-outlined.collapsed-icon {
+    .material-symbols-outlined.menu-icon {
-      display: inline-block;
+      transform: scaleX(-1);
-    }
-    .material-symbols-outlined.open-icon {
-      display: none;
     }
   }
 
@@ -31,17 +26,7 @@
     flex-shrink: 0;
     //overflow: hidden;
 
-    transition:
+    transition: width var(--transition-duration) linear;
-      width var(--transition-duration) linear;
-
-    transition-behavior: allow-discrete;
-
-    //&.ready {
-    //  @starting-style {
-    //    width: 0;
-    //    display: block;
-    //  }
-    //}
 
     .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 {

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(() => {
+    // requestAnimationFrame(() => {
-      this.viewInitialized = true;
+    //   this.viewInitialized = true;
-    })
+    // })
   }
 
   handleMenuButton(_: PointerEvent) {

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">
+        <app-link [href]="link.url" title="{{link.label}}">
-          <span [ngClass]="{'active': activeTopLevelUrl() === link.url}" class="nav-link">{{link.label}}</span>
+          <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>

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;
+        }
+      }
+    }
+  }
+}
+

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;
 }