Chocobozzz/PeerTube

<ul class="sub-menu" [ngClass]="{ 'sub-menu-fixed': !isBroadcastMessageDisplayed, 'no-scroll': isModalOpened }">
  <ng-container *ngFor="let menuEntry of menuEntries; index as id">
    @if (isDisplayed(menuEntry)) {
      @if (menuEntry.routerLink) {
        <li>
          <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 }}

            <span class="chevron-down"></span>
          </button>
        </li>
      } @else {
        <!-- On desktop, use a classic dropdown -->
        <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">
              <a
                *ngIf="isDisplayed(menuChild)" ngbDropdownItem
                routerLinkActive="active" ariaCurrentWhenActive="page"
                [routerLink]="menuChild.routerLink" #routerLink (click)="onActiveLinkScrollToTop(routerLink)"
                [queryParams]="menuChild.queryParams"
              >
                <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>

                {{ menuChild.label }}
              </a>
            </li>
          </ul>
        </li>
      }
    }
  </ng-container>
</ul>

<ng-template #modal let-close="close" let-dismiss="dismiss">
  <div class="modal-body">
    <ng-container *ngFor="let menuEntry of menuEntries; index as id">

      <div [ngClass]="{ hidden: id !== currentMenuEntryIndex }">
        <ng-container *ngFor="let menuChild of menuEntry.children">
          <a
            *ngIf="isDisplayed(menuChild)" [ngClass]="{ icon: hasIcons }" [routerLink]="menuChild.routerLink" routerLinkActive="active"
            #routerLink (click)="dismissOtherModals(); onActiveLinkScrollToTop(routerLink)" ariaCurrentWhenActive="page"
          >
            <my-global-icon *ngIf="menuChild.iconName" [iconName]="menuChild.iconName" aria-hidden="true"></my-global-icon>

            {{ menuChild.label }}
          </a>
        </ng-container>
      </div>

    </ng-container>
  </div>
</ng-template>