feat(navigation): the deepest levels of the navigation will be opened after the initialization

projects/demo/src/app/components/nav/nav.component.html

@@ -1,5 +1,5 @@
 <nav idsSideNav>
-  @for (menuConfig of menu(); track $index; let i = $index) {
+  @for (menuConfig of _menu(); track $index; let i = $index) {
     <ids-side-nav-section>
       @if (!menuConfig.slug && !menuConfig.path) {
         <ids-side-nav-title [label]="menuConfig.name!" />
@@ -9,6 +9,7 @@
             [id]="'menu-item-' + i + '-child-' + j"
             [label]="menuItem.name!"
             [target]="menuItem.path ?? ''"
+            [expanded]="menuItem.$open ?? false"
             [hasTooltip]="_menuItemsOverflow['menu-item-' + i + '-child-' + j]"
             [isActiveMatchOptions]="subsetMatchOptions"
           >
@@ -21,12 +22,28 @@
                 [id]="'menu-item-' + i + '-child-' + j + '-sub-' + k"
                 [label]="subItem.name!"
                 [target]="subItem.path ?? ''"
+                [expanded]="subItem.$open ?? false"
                 [hasTooltip]="_menuItemsOverflow['menu-item-' + i + '-child-' + j + '-sub-' + k]"
                 [isActiveMatchOptions]="subsetMatchOptions"
               >
                 @if (subItem.icon) {
                   <ids-icon icon-leading [fontIcon]="subItem.icon" />
                 }
+
+                @for (subSubItem of subItem.children; track $index; let l = $index) {
+                  <ids-side-nav-item
+                    [id]="'menu-item-' + i + '-child-' + j + '-sub-' + k + '-subsub-' + l"
+                    [label]="subSubItem.name!"
+                    [target]="subSubItem.path ?? ''"
+                    [expanded]="subSubItem.$open ?? false"
+                    [hasTooltip]="_menuItemsOverflow['menu-item-' + i + '-child-' + j + '-sub-' + k + '-subsub-' + l]"
+                    [isActiveMatchOptions]="subsetMatchOptions"
+                  >
+                    @if (subSubItem.icon) {
+                      <ids-icon icon-leading [fontIcon]="subSubItem.icon" />
+                    }
+                  </ids-side-nav-item>
+                }
               </ids-side-nav-item>
             }
           </ids-side-nav-item>
@@ -36,6 +53,7 @@
           [id]="'menu-item-' + i"
           [label]="menuConfig.name!"
           [target]="menuConfig.path ?? ''"
+          [expanded]="menuConfig.$open ?? false"
           [hasTooltip]="_menuItemsOverflow['menu-item-' + i]"
           [isActiveMatchOptions]="subsetMatchOptions"
         >
@@ -48,6 +66,7 @@
               [id]="'menu-item-' + i + '-child-' + j"
               [label]="childItem.name!"
               [target]="childItem.path ?? ''"
+              [expanded]="childItem.$open ?? false"
               [hasTooltip]="_menuItemsOverflow['menu-item-' + i + '-child-' + j]"
               [isActiveMatchOptions]="subsetMatchOptions"
             >
@@ -60,12 +79,27 @@
                   [id]="'menu-item-' + i + '-child-' + j + '-sub-' + k"
                   [label]="subItem.name!"
                   [target]="subItem.path ?? ''"
+                  [expanded]="subItem.$open ?? false"
                   [hasTooltip]="_menuItemsOverflow['menu-item-' + i + '-child-' + j + '-sub-' + k]"
                   [isActiveMatchOptions]="subsetMatchOptions"
                 >
                   @if (subItem.icon) {
                     <ids-icon icon-leading [fontIcon]="subItem.icon" />
                   }
+                  @for (subSubItem of subItem.children; track $index; let l = $index) {
+                    <ids-side-nav-item
+                      [id]="'menu-item-' + i + '-child-' + j + '-sub-' + k + '-subsub-' + l"
+                      [label]="subSubItem.name!"
+                      [target]="subSubItem.path ?? ''"
+                      [expanded]="subSubItem.$open ?? false"
+                      [hasTooltip]="_menuItemsOverflow['menu-item-' + i + '-child-' + j + '-sub-' + k + '-subsub-' + l]"
+                      [isActiveMatchOptions]="subsetMatchOptions"
+                    >
+                      @if (subSubItem.icon) {
+                        <ids-icon icon-leading [fontIcon]="subSubItem.icon" />
+                      }
+                    </ids-side-nav-item>
+                  }
                 </ids-side-nav-item>
               }
             </ids-side-nav-item>

projects/demo/src/app/components/nav/nav.component.ts

@@ -1,53 +1,51 @@
 import { Menu } from './menu.interface';
 
-import { CdkMenuModule } from '@angular/cdk/menu';
 import {
-  AfterViewInit,
+  afterNextRender,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  computed,
+  effect,
   ElementRef,
   HostListener,
   inject,
+  Injector,
   input,
   ViewEncapsulation,
 } from '@angular/core';
-import { IsActiveMatchOptions, RouterModule } from '@angular/router';
+import { IsActiveMatchOptions } from '@angular/router';
 import { IdsIconComponent } from '@i-cell/ids-angular/icon';
 import {
   IdsSideNavComponent,
+  IdsSideNavItemComponent,
   IdsSideNavSectionComponent,
   IdsSideNavTitleComponent,
-  IdsSideNavItemComponent,
 } from '@i-cell/ids-angular/side-nav';
-import { TranslateModule } from '@ngx-translate/core';
 
 const EXPAND_ANIMATION_DELAY = 300;
 
 @Component({
   selector: 'ids-nav',
   imports: [
-    RouterModule,
-    TranslateModule,
     IdsIconComponent,
     IdsSideNavComponent,
     IdsSideNavSectionComponent,
     IdsSideNavTitleComponent,
     IdsSideNavItemComponent,
-    CdkMenuModule,
   ],
   templateUrl: './nav.component.html',
   styleUrls: ['./nav.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class NavComponent implements AfterViewInit {
+export class NavComponent {
   private readonly _elementRef = inject(ElementRef);
   private readonly _cdr = inject(ChangeDetectorRef);
+  private readonly _injector = inject(Injector);
 
   protected _menuItemsOverflow: Record<string, boolean> = {};
   public menu = input<Menu[]>([]);
-  public open = false;
 
   public subsetMatchOptions: IsActiveMatchOptions = {
     paths: 'subset',
@@ -56,8 +54,13 @@ export class NavComponent implements AfterViewInit {
     matrixParams: 'ignored',
   };
 
-  public ngAfterViewInit(): void {
-    this.checkMenuItemOverflows();
+  protected readonly _menu = computed(() => this._markLeafExpandablesOpen(this.menu()));
+
+  constructor() {
+    effect(() => {
+      this._menu();
+      afterNextRender(() => this.checkMenuItemOverflows(), { injector: this._injector });
+    });
   }
 
   @HostListener('window:resize')
@@ -71,18 +74,45 @@ export class NavComponent implements AfterViewInit {
   }
 
   public checkMenuItemOverflows(delay = 0): void {
-    setTimeout(() => {
+    this._runAfter(() => {
       const menuItems = this._elementRef.nativeElement.querySelectorAll('ids-side-nav-item') as NodeListOf<HTMLElement>;
+      const overflow: Record<string, boolean> = {};
 
-      this._menuItemsOverflow = Array.from(menuItems).reduce((items: Record<string, boolean>, menuItem: HTMLElement) => {
-        const menuLabel = menuItem.querySelector(':scope > a > .ids-side-nav-item-label') as HTMLElement;
+      for (const menuItem of Array.from(menuItems)) {
+        if (!menuItem.id) {
+          continue;
+        }
+        const menuLabel = menuItem.querySelector(':scope > a > .ids-side-nav-item-label') as HTMLElement | null;
         if (!menuLabel || menuLabel.offsetWidth === 0) {
-          return items;
+          continue;
         }
-        const hasOverflow = menuLabel.scrollWidth > menuLabel.offsetWidth;
-        return { ...items, [menuItem.id]: hasOverflow };
-      }, {});
+        overflow[menuItem.id] = menuLabel.scrollWidth > menuLabel.offsetWidth;
+      }
+
+      this._menuItemsOverflow = overflow;
       this._cdr.markForCheck();
     }, delay);
   }
+
+  private _markLeafExpandablesOpen(items: Menu[]): Menu[] {
+    return items.map((item) => {
+      const children = item.children?.length ? this._markLeafExpandablesOpen(item.children) : [];
+      const isExpandable = children.length > 0;
+      const hasNestedExpandable = children.some((child) => (child.children?.length ?? 0) > 0);
+
+      return {
+        ...item,
+        children,
+        $open: isExpandable && !hasNestedExpandable,
+      };
+    });
+  }
+
+  private _runAfter(callback: () => void, delay = 0): void {
+    if (delay <= 0) {
+      requestAnimationFrame(callback);
+      return;
+    }
+    window.setTimeout(callback, delay);
+  }
 }

projects/demo/src/app/queries/get-navigation.query.ts

@@ -43,6 +43,12 @@ export const GET_NAVIGATION = gql`
                 generated
               }
             }
+            children {
+              depth
+              page {
+                title
+              }
+            }
           }
         }
       }

projects/widgets/side-nav/side-nav-item.component.ts

@@ -105,15 +105,30 @@ export class IdsSideNavItemComponent {
   });
 
   public active = computed(() => (this.target() ? isActive(this.target(), this._router, this.isActiveMatchOptions())() : false));
+  public expanded = input(false, { transform: booleanAttribute });
 
   protected _expandable = computed(() => this._contentChildren().length > 0 || this._contentTemplate());
-  protected _expanded = linkedSignal(() => this._contentChildren().some((child) => child.active()));
+  protected _expanded = linkedSignal({
+    source: () => ({
+      fromInput: this.expanded(),
+      hasActiveChild: this._contentChildren().some((contentChild) => contentChild.active()),
+    }),
+    computation: ({ fromInput, hasActiveChild }, previous) => {
+      if (hasActiveChild) {
+        return true;
+      }
+      if (previous !== undefined && previous.source.fromInput === fromInput) {
+        return previous.value;
+      }
+      return fromInput;
+    },
+  });
+
   protected _iconLeading = contentChildren<IdsIconComponent>('[icon-leading]');
   protected _iconTrailing = contentChildren<IdsIconComponent>('[icon-trailing]');
   protected readonly _contentTemplate = contentChild('idsSideNavItemChildren', { read: TemplateRef });
   private readonly _contentChildren = contentChildren(IdsSideNavItemComponent);
   private _elementRef = inject(ElementRef);
-
   constructor() {
     effect(() => {
       const contentLength = this._contentChildren().length;