refactor(docs-infra): notify on data change inside OnPush component (#…

…55830)

The SecondaryNavigation component was updating state outside of an event handler
without notifying about this change. Modeling state as signal should take
care of proper UI updates (note that I did just a mechanical change here, maybe
there are better ways of dealing with this animations case).

PR Close #55830

adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.html

@@ -1,5 +1,5 @@
 <div [attr.id]="SECONDARY_NAV_ID" class="adev-secondary-nav-mask" [class.docs-nav-secondary--open]="isSecondaryNavVisible()" (docsClickOutside)="close()" [docsClickOutsideIgnore]="[PRIMARY_NAV_ID]">
-  <div class="docs-nav-secondary docs-scroll-track-transparent" [style.transform]="translateX()" [style.transition]="transition">
+  <div class="docs-nav-secondary docs-scroll-track-transparent" [style.transform]="translateX()" [style.transition]="transition()">
     <!-- Secondary Nav -->
     @if (navigationItems && navigationItems.length > 0) {
       <docs-navigation-list

adev/src/app/core/layout/secondary-navigation/secondary-navigation.component.ts

@@ -14,6 +14,7 @@ import {
   PLATFORM_ID,
   computed,
   inject,
+  signal,
 } from '@angular/core';
 import {takeUntilDestroyed, toObservable} from '@angular/core/rxjs-interop';
 import {
@@ -76,7 +77,7 @@ export class SecondaryNavigation implements OnInit {
     const level = this.navigationState.expandedItems()?.length ?? 0;
     return `translateX(${-level * 100}%)`;
   });
-  transition: string = '0ms';
+  transition = signal('0ms');
 
   readonly PRIMARY_NAV_ID = PRIMARY_NAV_ID;
   readonly SECONDARY_NAV_ID = SECONDARY_NAV_ID;
@@ -182,7 +183,7 @@ export class SecondaryNavigation implements OnInit {
       return;
     }
     setTimeout(() => {
-      this.transition = `${ANIMATION_DURATION}ms`;
+      this.transition.set(`${ANIMATION_DURATION}ms`);
     }, ANIMATION_DURATION);
   }