PeerTube/client/src/app/shared/shared-main/misc/top-menu-dropdown.component.html

<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>

    <ng-container *ngIf="!menuEntry.routerLink && isDisplayed(menuEntry)">
      <!-- On mobile, use a modal to display sub menu items -->
      <li *ngIf="isInSmallView">
        <button class="sub-menu-entry" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }" (click)="openModal(id)">
          {{ menuEntry.label }}

          <span class="chevron-down"></span>
        </button>
      </li>

      <!-- On desktop, use a classic dropdown -->
      <div *ngIf="!isInSmallView" ngbDropdown #dropdown="ngbDropdown" autoClose="true" container="body">
        <li>
          <button ngbDropdownToggle class="sub-menu-entry" [ngClass]="{ active: !!suffixLabels[menuEntry.label] }">{{ menuEntry.label }}</button>
        </li>

        <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>
      </div>
    </ng-container>
  </ul>
</div>

<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>