chore(edit-content): Use new Angular Syntax in DotNavigationComponent

core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-nav-icon/dot-nav-icon.component.html

@@ -1,8 +1,5 @@
-<i
-    *ngIf="isFaIcon(icon); else mdIcon"
-    [style.font-size.px]="18"
-    class="fa fa-th-list {{ icon }}"
-    aria-hidden="true"></i>
-<ng-template #mdIcon>
-    <dot-icon [size]="18" [name]="icon.toLocaleLowerCase()" inverted aria-hidden="true"></dot-icon>
-</ng-template>
+@if (isFaIcon(icon)) {
+    <i [style.font-size.px]="18" class="fa fa-th-list {{ icon }}" aria-hidden="true"></i>
+} @else {
+    <dot-icon [size]="18" [name]="icon.toLocaleLowerCase()" inverted aria-hidden="true" />
+}

core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/components/dot-sub-nav/dot-sub-nav.component.html

@@ -1,12 +1,14 @@
 <ul [class.dot-nav-sub__collapsed]="collapsed" #ul class="dot-nav-sub">
-    <li *ngFor="let subItem of data.menuItems" class="dot-nav-sub__item">
-        <a
-            (click)="onItemClick($event, subItem)"
-            [class.dot-nav-sub__link--active]="subItem.active"
-            [routerLink]="subItem.menuLink"
-            [state]="{ menuId: data.id }"
-            class="dot-nav-sub__link">
-            {{ subItem.label }}
-        </a>
-    </li>
+    @for (subItem of data.menuItems; track subItem) {
+        <li class="dot-nav-sub__item">
+            <a
+                (click)="onItemClick($event, subItem)"
+                [class.dot-nav-sub__link--active]="subItem.active"
+                [routerLink]="subItem.menuLink"
+                [state]="{ menuId: data.id }"
+                class="dot-nav-sub__link">
+                {{ subItem.label }}
+            </a>
+        </li>
+    }
 </ul>

core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/dot-navigation.component.html

@@ -1,14 +1,14 @@
-<nav [class.collapsed]="dotNavigationService.collapsed$ | async" role="navigation">
+@let isCollapsed = $isCollapsed();
+<nav [class.collapsed]="isCollapsed" role="navigation">
     <ul class="dot-nav">
-        <li
-            *ngFor="let item of menu$ | async"
-            [class.dot-nav__list-item--active]="item.isOpen"
-            class="dot-nav__list-item">
-            <dot-nav-item
-                (menuClick)="onMenuClick($event)"
-                (itemClick)="onItemClick($event)"
-                [data]="item"
-                [collapsed]="dotNavigationService.collapsed$ | async"></dot-nav-item>
-        </li>
+        @for (item of $menu(); track item) {
+            <li [class.dot-nav__list-item--active]="item.isOpen" class="dot-nav__list-item">
+                <dot-nav-item
+                    (menuClick)="onMenuClick($event)"
+                    (itemClick)="onItemClick($event)"
+                    [data]="item"
+                    [collapsed]="isCollapsed" />
+            </li>
+        }
     </ul>
 </nav>

core-web/apps/dotcms-ui/src/app/view/components/dot-navigation/dot-navigation.component.ts

@@ -1,6 +1,5 @@
-import { Observable } from 'rxjs';
-
-import { Component, HostBinding, HostListener, OnInit } from '@angular/core';
+import { Component, HostBinding, HostListener, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 import { IframeOverlayService } from '@components/_common/iframe/service/iframe-overlay.service';
 import { DotMenu, DotMenuItem } from '@dotcms/dotcms-models';
@@ -13,20 +12,46 @@ import { DotNavigationService } from './services/dot-navigation.service';
     styleUrls: ['./dot-navigation.component.scss'],
     templateUrl: 'dot-navigation.component.html'
 })
-export class DotNavigationComponent implements OnInit {
-    menu$: Observable<DotMenu[]>;
+export class DotNavigationComponent {
+    /**
+     * A private readonly instance of `DotNavigationService` injected into the component.
+     * This service is used to manage the navigation logic within the application.
+     */
+    readonly #dotNavigationService = inject(DotNavigationService);
 
-    @HostBinding('style.overflow-y') get overFlow() {
-        return this.dotNavigationService.collapsed$.getValue() ? '' : 'auto';
-    }
+    /**
+     * A readonly instance of the IframeOverlayService injected into the component.
+     * This service is used to manage the iframe overlay functionality within the application.
+     */
+    readonly #iframeOverlayService = inject(IframeOverlayService);
 
-    constructor(
-        public dotNavigationService: DotNavigationService,
-        public iframeOverlayService: IframeOverlayService
-    ) {}
+    /**
+     * Signal representing the menu items from the DotNavigationService.
+     *
+     * This signal is synchronized with the `items$` observable from the `DotNavigationService`.
+     * The `requireSync` option ensures that the signal is updated synchronously with the observable.
+     *
+     * @type {Signal<MenuItem[]>}
+     */
+    $menu = toSignal(this.#dotNavigationService.items$, {
+        requireSync: true
+    });
+
+    /**
+     * Signal indicating whether the navigation is collapsed.
+     *
+     * This signal is synchronized with the `collapsed$` observable from the
+     * `DotNavigationService`. It ensures that the state of the navigation
+     * (collapsed or expanded) is kept in sync with the service.
+     *
+     * @type {Signal<boolean>}
+     */
+    $isCollapsed = toSignal(this.#dotNavigationService.collapsed$, {
+        requireSync: true
+    });
 
-    ngOnInit() {
-        this.menu$ = this.dotNavigationService.items$;
+    @HostBinding('style.overflow-y') get overFlow() {
+        return this.#dotNavigationService.collapsed$.getValue() ? '' : 'auto';
     }
 
     /**
@@ -40,8 +65,8 @@ export class DotNavigationComponent implements OnInit {
         $event.originalEvent.stopPropagation();
 
         if (!$event.originalEvent.ctrlKey && !$event.originalEvent.metaKey) {
-            this.dotNavigationService.reloadCurrentPortlet($event.data.id);
-            this.iframeOverlayService.hide();
+            this.#dotNavigationService.reloadCurrentPortlet($event.data.id);
+            this.#iframeOverlayService.hide();
         }
     }
 
@@ -53,10 +78,10 @@ export class DotNavigationComponent implements OnInit {
      * @memberof DotNavigationComponent
      */
     onMenuClick(event: { originalEvent: MouseEvent; data: DotMenu }): void {
-        if (this.dotNavigationService.collapsed$.getValue()) {
-            this.dotNavigationService.goTo(event.data.menuItems[0].menuLink);
+        if (this.#dotNavigationService.collapsed$.getValue()) {
+            this.#dotNavigationService.goTo(event.data.menuItems[0].menuLink);
         } else {
-            this.dotNavigationService.setOpen(event.data.id);
+            this.#dotNavigationService.setOpen(event.data.id);
         }
     }
 
@@ -67,8 +92,8 @@ export class DotNavigationComponent implements OnInit {
      */
     @HostListener('document:click')
     handleDocumentClick(): void {
-        if (this.dotNavigationService.collapsed$.getValue()) {
-            this.dotNavigationService.closeAllSections();
+        if (this.#dotNavigationService.collapsed$.getValue()) {
+            this.#dotNavigationService.closeAllSections();
         }
     }
 }