All files / src/app/shell/header/header-navigation header-navigation.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->
<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
<ul class="navbar-nav main-navigation-list">
  <li
    *ngFor="let category of categories$ | async; first as isFirst"
    #subMenu
    class="dropdown"
    [ngClass]="{ open: isOpened(category.uniqueId), first: isFirst }"
    (mouseenter)="subMenuShow(subMenu)"
    (mouseleave)="subMenuHide(subMenu)"
    (click)="subMenuHide(subMenu)"
  >
    <a
      [routerLink]="category.url"
      [attr.data-testing-id]="category.uniqueId + '-link'"
      [ngStyle]="{ width: !(0 < mainNavigationMaxSubCategoriesDepth && category.hasChildren) ? '100%' : '' }"
      class="main-navigation-link"
    >
      {{ category.name }}
    </a>
    <ng-container *ngIf="isBrowser && mainNavigationMaxSubCategoriesDepth > 0 && category.hasChildren">
      <a
        class="dropdown-toggle"
        (click)="toggleOpen(category.uniqueId)"
        (keydown.enter)="toggleOpen(category.uniqueId)"
        [attr.aria-label]="
          isOpened(category.uniqueId)
            ? ('header.navigation.collapse_category.aria_label' | translate : { '0': category.name })
            : ('header.navigation.expand_category.aria_label' | translate : { '0': category.name })
        "
        tabindex="0"
      >
        <fa-icon *ngIf="isOpened(category.uniqueId); else closed" [icon]="['fas', 'minus']" />
        <ng-template #closed> <fa-icon [icon]="['fas', 'plus']" /> </ng-template>
      </a>
      <ish-sub-category-navigation [categoryUniqueId]="category.uniqueId" [subCategoriesDepth]="1" [view]="view" />
    </ng-container>
  </li>
  <ish-lazy-content-include includeId="include.header.navigation.pagelet2-Include" role="listitem" />
</ul>