Merge remote-tracking branch 'origin/main' into issue-29498-migrate-I…

…mportContentletsAction-to-job-processor

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>