finish menu animations

2025-11-15 03:59:34 +01:00 · 2025-11-15 03:59:34 +01:00 · a1ba6b35f1
commit a1ba6b35f1
parent 7fab8cfd8f
7 changed files with 96 additions and 40 deletions
--- 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',
--- 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>
--- 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 {
--- 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) {
--- 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>
--- 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;
+        }
+      }
+    }
+  }
+}
+
--- 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;
 }