opt-cc/static/src/app/common/navigation/navigation-header.component.html

<mat-toolbar color="primary">
  <div fxHide.gt-sm style="position:absolute;">
    <button mat-icon-button (click)="onToggleSidenav()">
      <mat-icon svgIcon="menu"></mat-icon>
    </button>
  </div>
  <div class="brand-logo">
    <a href="#">
      <mat-icon svgIcon="opt-logo"></mat-icon>
    </a>
    <span class="version-label">v{{version}}</span>
  </div>
  <div fxHide.lt-md>
    <ul fxLayout="row" class="navigation-items">
      <li routerLinkActive="active">
        <a href="https://www.opt4.net/dashboard" class="link">{{'navigation.top.board' | translate}}</a>
      </li>
      <li routerLinkActive="active">
        <a routerLink='{{config.overviewPath}}' class="link">{{'navigation.top.overview' | translate}}</a>
      </li>
      <li routerLinkActive="active">
        <a [routerLink]="[config.publicPath.concat('/').concat(config.rankPath)]"
          class="link">{{'navigation.top.ranks' | translate}}</a>
      </li>
      <li routerLinkActive="active">
        <a [routerLink]="[config.publicPath.concat('/').concat(config.decorationPath)]"
          class="link">{{'navigation.top.decorations' | translate}}</a>
      </li>
      <li routerLinkActive="active">
        <a routerLink='{{config.statsPath}}' class="link">{{'navigation.top.statistics' | translate}}</a>
      </li>
      <li *ngIf="loginService.hasPermission(2)"
        [ngClass]="{'active': currentUrl.includes('/manage/')}">
        <mat-list-item [matMenuTriggerFor]="menuManagement">
          <a matline>
            {{'navigation.top.management' | translate}}
            <span class="caret"></span>
          </a>
        </mat-list-item>
        <mat-menu #menuManagement="matMenu">
          <button routerLink='{{config.manageUserPath}}'
            routerLinkActive="active" mat-menu-item>
            {{'navigation.top.management.users' | translate}}
          </button>
          <button routerLink='{{config.manageSquadPath}}'
            routerLinkActive="active" mat-menu-item>
            {{'navigation.top.management.squads' | translate}}
          </button>
          <button routerLink='{{config.manageDecorationPath}}'
            routerLinkActive="active" mat-menu-item>
            {{'navigation.top.management.decorations' | translate}}
          </button>
          <button routerLink='{{config.manageRankPath}}'
            routerLinkActive="active" mat-menu-item>
            {{'navigation.top.management.ranks' | translate}}
          </button>
        </mat-menu>
      </li>
      <li *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()"
        [ngClass]="{'active': currentUrl.includes('/request/')}">
        <mat-list-item [matMenuTriggerFor]="menuSqlRequest">
          <a matline>
            {{'navigation.top.request' | translate}}
            <span class="caret"></span>
          </a>
        </mat-list-item>
        <mat-menu #menuSqlRequest="matMenu">
          <button routerLink="{{config.request}}/{{config.sqlDashboardPath}}"
            routerLinkActive="active" mat-menu-item>
            {{'navigation.top.request.open' | translate}}
          </button>
          <button routerLink="{{config.request}}/{{config.requestPromotionPath}}"
            routerLinkActive="active" mat-menu-item>
            {{'navigation.top.request.promotion' | translate}}
          </button>
          <button routerLink="{{config.request}}/{{config.requestAwardPath}}"
            routerLinkActive="active" mat-menu-item>
            {{'navigation.top.request.award' | translate}}
          </button>
        </mat-menu>
      </li>
      <li *ngIf="loginService.hasPermission(2) && loginService.hasSquad()"
        [ngClass]="{'active': currentUrl.includes('/request/')}">
        <mat-list-item [matMenuTriggerFor]="menuRequests">
          <a [ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}"
            matline>
            {{'navigation.top.request.manage' | translate}}
            <span class="caret"></span>
          </a>
        </mat-list-item>
        <mat-menu #menuRequests="matMenu">
          <button [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}"
            routerLinkActive="active"
            routerLink="{{config.request}}/{{config.confirmPromotionPath}}" mat-menu-item>
            {{'navigation.top.request.promotion' | translate}}
          </button>
          <button [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}"
            routerLinkActive="active"
            routerLink="{{config.request}}/{{config.confirmAwardPath}}" mat-menu-item>
            {{'navigation.top.request.award' | translate}}
          </button>
        </mat-menu>
      </li>
    </ul>
  </div>
  <div fxFlex fxLayout fxLayoutAlign="end" fxHide.lt-md>
    <ul fxLayout fxLayoutGap="15px" class="navigation-items">
      <li *ngIf="loginService.hasPermission(4)"
        [ngClass]="{'active': currentUrl.includes('/admin-panel/')}">
        <mat-list-item [matMenuTriggerFor]="menuAdmin">
          <a matline>
            {{'navigation.top.admin' | translate}}
            <span class="caret"></span>
          </a>
        </mat-list-item>
        <mat-menu #menuAdmin="matMenu">
          <button routerLinkActive="active" routerLink='{{config.adminPanelAppUsersPath}}' mat-menu-item>
            {{'navigation.top.management.users' | translate}}
          </button>
        </mat-menu>
      </li>
      <li *ngIf="loginService.isLoggedIn()" class="link" style="cursor: pointer">
        <a (click)="doUserLogout()">{{'navigation.top.logout' | translate}}</a>
      </li>
      <li *ngIf="!loginService.isLoggedIn()" routerLinkActive="active">
        <a routerLink='{{config.loginPath}}' class="link">{{'navigation.top.login' | translate}}</a>
      </li>
      <li *ngIf="features.localization">
        <mat-list-item [matMenuTriggerFor]="menuLanguage">
          <a class="text-uppercase" matline>
            {{language}}
            <span class="caret"></span>
          </a>
        </mat-list-item>
        <mat-menu #menuLanguage="matMenu">
          <button mat-menu-item (click)="setLanguage(availableLanguages[0])">
            <mat-icon svgIcon="flag-{{availableLanguages[0]}}"></mat-icon>
            <span class="text-uppercase">{{availableLanguages[0]}}</span>
          </button>
          <button mat-menu-item (click)="setLanguage(availableLanguages[1])">
            <mat-icon svgIcon="flag-{{availableLanguages[1]}}"></mat-icon>
            <span class="text-uppercase">{{availableLanguages[1]}}</span>
          </button>
        </mat-menu>
      </li>
    </ul>
  </div>
</mat-toolbar>