src/app/features/navigation/components/nav-header/nav-header.component.html

<!-------------------------------------------------------------------------------
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 -------------------------------------------------------------------------------->

<div class="nav-header">

  <div class="nav-header-menu">
    <a [routerLinkActiveOptions]="{exact: true}"
       [routerLinkActive]="'nav-header-title-active'"
       [routerLink]="'/'"
       class="nav-header-title cursor-pointer user-select-none"
       tabindex="-1">
      <img alt="" class="nav-header-title-logo" src="./assets/logo.png">

      <span class="nav-header-title-open">
        open
      </span>

      <span class="nav-header-title-konsequenz">
        KONSEQUENZ
      </span>
    </a>

    <div *ngIf="!appMenuHidden" class="nav-header-menu">

      <ng-container *ngFor="let route of appRoutes">
        <a *ngIf="isLinkDisplayed(route.roles)"
           [class.nav-header-menu-anchor---large-icon]="route.largeIcon"
           [class.openk-info]="!isLinkActive(route.link, route.exact)"
           [class.openk-primary]="isLinkActive(route.link, route.exact)"
           [routerLink]="route.link"
           [target]="route.target"
           [title]="route.tooltip?.length > 0 ? (route.tooltip | translate) : ''"
           class="openk-button openk-button-rounded nav-header-menu-anchor">
          <mat-icon>{{route.icon}}</mat-icon>
        </a>
      </ng-container>

      <app-nav-drop-down
        (appLogOut)="logOut()">
        {{appUserName}}
      </app-nav-drop-down>
    </div>

  </div>

  <div class="nav-header-border"></div>
</div>