Fix nested lists HTML markup

Chocobozzz · Sep 26, 2024 · bc2a055 · bc2a055
1 parent fe62406
commit bc2a055
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 23 deletions.
diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html
@@ -123,14 +123,16 @@
         <ul [ngClass]="[ menuSection.key, 'menu-block' ]">
           <li i18n class="block-title">{{ menuSection.title }}</li>
 
-          <ul>
-            <li *ngFor="let link of menuSection.links">
-              <a class="menu-link" [routerLink]="link.path" routerLinkActive="active">
-                <my-global-icon *ngIf="link.icon" [iconName]="link.icon" [ngClass]="link.iconClass" aria-hidden="true"></my-global-icon>
-                <ng-container>{{ link.shortLabel }}</ng-container>
-              </a>
-            </li>
-          </ul>
+          <li>
+            <ul>
+              <li *ngFor="let link of menuSection.links">
+                <a class="menu-link" [routerLink]="link.path" routerLinkActive="active">
+                  <my-global-icon *ngIf="link.icon" [iconName]="link.icon" [ngClass]="link.iconClass" aria-hidden="true"></my-global-icon>
+                  <ng-container>{{ link.shortLabel }}</ng-container>
+                </a>
+              </li>
+            </ul>
+          </li>
         </ul>
       </ng-container>
     </div>

diff --git a/client/src/app/shared/shared-main/menu/top-menu-dropdown.component.html b/client/src/app/shared/shared-main/menu/top-menu-dropdown.component.html
@@ -1,16 +1,16 @@
 <div class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed, 'no-scroll': isModalOpened }">
   <ul *ngFor="let menuEntry of menuEntries; index as id">
 
-    <li *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)">
-      <a
-        class="sub-menu-entry" [routerLink]="menuEntry.routerLink" routerLinkActive="active"
-        #routerLink (click)="onActiveLinkScrollToTop(routerLink)" ariaCurrentWhenActive="page"
-      >{{ menuEntry.label }}</a>
-    </li>
+    @if (isDisplayed(menuEntry)) {
 
-    <ng-container *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)">
-      <!-- On mobile, use a modal to display sub menu items -->
-      @if (isInSmallView) {
+      @if (menuEntry.routerLink) {
+        <li *ngIf="menuEntry.routerLink && isDisplayed(menuEntry)">
+          <a
+            class="sub-menu-entry" [routerLink]="menuEntry.routerLink" routerLinkActive="active"
+            #routerLink (click)="onActiveLinkScrollToTop(routerLink)" ariaCurrentWhenActive="page"
+          >{{ menuEntry.label }}</a>
+        </li>
+      } @else if (isInSmallView) { <!-- On mobile, use a modal to display sub menu items -->
         <li>
           <button class="sub-menu-entry" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" (click)="openModal(id)">
             {{ menuEntry.label }}
@@ -20,10 +20,8 @@
         </li>
       } @else {
         <!-- On desktop, use a classic dropdown -->
-        <div ngbDropdown #dropdown="ngbDropdown" autoClose="true" container="body">
-          <li>
-            <button ngbDropdownToggle class="sub-menu-entry" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }">{{ menuEntry.label }}</button>
-          </li>
+        <li ngbDropdown #dropdown="ngbDropdown" autoClose="true" container="body">
+          <button ngbDropdownToggle class="sub-menu-entry" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }">{{ menuEntry.label }}</button>
 
           <ul ngbDropdownMenu>
             <li *ngFor="let menuChild of menuEntry.children">
@@ -39,9 +37,9 @@
               </a>
             </li>
           </ul>
-        </div>
+        </li>
       }
-    </ng-container>
+    }
   </ul>
 </div>