fix(navbar-vertical): prevent initial animation

Author: dr-itz

projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.scss

@@ -7,13 +7,17 @@ $vertical-nav-transition-duration: all-variables.$element-default-transition-dur
 
 :host {
   display: block;
-  transition: padding-inline-start $vertical-nav-transition-duration;
   --si-layout-header-first-element-offset: 40px;
 
   // This prevents applying the wrong padding-inline-start before the visible class is applied. This would trigger the animation
   &.ready:not(.visible) {
     padding-inline-start: 0 !important; // stylelint-disable-line declaration-no-important
   }
+
+  // only animate after initial state is set
+  &.ready {
+    transition: padding-inline-start $vertical-nav-transition-duration;
+  }
 }
 
 nav {
@@ -28,7 +32,7 @@ nav {
   inset-block-end: 0;
   inset-inline-start: 0;
   inline-size: 0;
-  transition: inline-size all-variables.element-transition-duration(0.5s) ease;
+  transition: inline-size $vertical-nav-transition-duration ease;
 
   :host(.nav-collapsed) & {
     z-index: all-variables.$zindex-vertical-nav-collapsed;
@@ -52,9 +56,9 @@ nav {
   border-end-end-radius: all-variables.$border-radius;
 
   transition:
-    inline-size all-variables.element-transition-duration(0.5s) ease,
-    background-color all-variables.element-transition-duration(0.5s) ease,
-    box-shadow all-variables.element-transition-duration(0.5s) ease;
+    inline-size $vertical-nav-transition-duration ease,
+    background-color $vertical-nav-transition-duration ease,
+    box-shadow $vertical-nav-transition-duration ease;
 
   :host(:not(.nav-collapsed)) & {
     inline-size: $vertical-nav-width;

projects/element-ng/navbar-vertical-next/si-navbar-vertical-next.component.ts

@@ -4,10 +4,12 @@
  */
 import { BreakpointObserver } from '@angular/cdk/layout';
 import {
+  afterNextRender,
   booleanAttribute,
   ChangeDetectionStrategy,
   Component,
   inject,
+  Injector,
   input,
   model,
   OnChanges,
@@ -43,7 +45,8 @@ interface UIState {
     class: 'si-layout-inner ready',
     '[class.nav-collapsed]': 'collapsed()',
     '[class.nav-text-only]': 'textOnly()',
-    '[class.visible]': 'visible()'
+    '[class.visible]': 'visible()',
+    '[class.ready]': 'ready()'
   }
 })
 export class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
@@ -123,7 +126,9 @@ export class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
   );
   private uiStateService = inject(SI_UI_STATE_SERVICE, { optional: true });
   private breakpointObserver = inject(BreakpointObserver);
+  private injector = inject(Injector);
 
+  protected readonly ready = signal(false);
   protected readonly smallScreen = signal(false);
 
   /**
@@ -164,7 +169,10 @@ export class SiNavbarVerticalNextComponent implements OnChanges, OnInit {
             this.uiStateExpandedItems.set(uiState.expandedItems);
           }
         }
+        afterNextRender(() => this.ready.set(true), { injector: this.injector });
       });
+    } else {
+      this.ready.set(true);
     }
   }
 

projects/element-ng/navbar-vertical/si-navbar-vertical.component.scss

@@ -7,13 +7,17 @@ $vertical-nav-transition-duration: all-variables.$element-default-transition-dur
 
 :host {
   display: block;
-  transition: padding-inline-start $vertical-nav-transition-duration;
   --si-layout-header-first-element-offset: 40px;
 
   // This prevents applying the wrong padding-inline-start before the visible class is applied. This would trigger the animation
   &.ready:not(.visible) {
     padding-inline-start: 0 !important; // stylelint-disable-line declaration-no-important
   }
+
+  // only animate after initial state is set
+  &.ready {
+    transition: padding-inline-start $vertical-nav-transition-duration;
+  }
 }
 
 nav {
@@ -28,7 +32,7 @@ nav {
   inset-block-end: 0;
   inset-inline-start: 0;
   inline-size: 0;
-  transition: inline-size all-variables.element-transition-duration(0.5s) ease;
+  transition: inline-size $vertical-nav-transition-duration ease;
 
   :host(.nav-collapsed) & {
     z-index: all-variables.$zindex-vertical-nav-collapsed;
@@ -64,9 +68,9 @@ nav {
   border-end-end-radius: all-variables.$border-radius;
 
   transition:
-    inline-size all-variables.element-transition-duration(0.5s) ease,
-    background-color all-variables.element-transition-duration(0.5s) ease,
-    box-shadow all-variables.element-transition-duration(0.5s) ease;
+    inline-size $vertical-nav-transition-duration ease,
+    background-color $vertical-nav-transition-duration ease,
+    box-shadow $vertical-nav-transition-duration ease;
 
   :host(:not(.nav-collapsed)) & {
     inline-size: $vertical-nav-width;

projects/element-ng/navbar-vertical/si-navbar-vertical.component.ts

@@ -5,11 +5,13 @@
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { NgTemplateOutlet } from '@angular/common';
 import {
+  afterNextRender,
   booleanAttribute,
   Component,
   computed,
   Directive,
   inject,
+  Injector,
   input,
   model,
   OnChanges,
@@ -79,10 +81,11 @@ export class SiNavbarVerticalItemGuardDirective {
   styleUrl: './si-navbar-vertical.component.scss',
   providers: [{ provide: SI_NAVBAR_VERTICAL, useExisting: SiNavbarVerticalComponent }],
   host: {
-    class: 'si-layout-inner ready',
+    class: 'si-layout-inner',
     '[class.nav-collapsed]': 'collapsed()',
     '[class.nav-text-only]': 'textOnly()',
-    '[class.visible]': 'visible()'
+    '[class.visible]': 'visible()',
+    '[class.ready]': 'ready()'
   }
 })
 export class SiNavbarVerticalComponent implements OnChanges, OnInit {
@@ -209,6 +212,7 @@ export class SiNavbarVerticalComponent implements OnChanges, OnInit {
   protected readonly activatedRoute = inject(ActivatedRoute, { optional: true });
   private uiStateService = inject(SI_UI_STATE_SERVICE, { optional: true });
   private breakpointObserver = inject(BreakpointObserver);
+  private injector = inject(Injector);
   private readonly navbarItems = viewChildren(SiNavbarVerticalItemComponent);
   private readonly navbarItemsLegacy = viewChildren(SiNavbarVerticalItemLegacyComponent);
   private readonly itemsToComponents = computed(
@@ -221,6 +225,7 @@ export class SiNavbarVerticalComponent implements OnChanges, OnInit {
       )
   );
 
+  protected readonly ready = signal(false);
   protected readonly smallScreen = signal(false);
   protected readonly uiStateExpandedItems = signal<Record<string, boolean>>({});
 
@@ -252,7 +257,10 @@ export class SiNavbarVerticalComponent implements OnChanges, OnInit {
           this.collapsed.set(this.smallScreen() ? this.collapsed() : this.preferCollapse);
           this.uiStateExpandedItems.set(uiState.expandedItems);
         }
+        afterNextRender(() => this.ready.set(true), { injector: this.injector });
       });
+    } else {
+      this.ready.set(true);
     }
   }