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

<mat-nav-list>
  <a mat-list-item routerLinkActive="active" routerLink='{{config.overviewPath}}' (click)="onSidenavClose()">
    <span class="nav-caption">{{'navigation.top.overview' | translate}}</span>
  </a>
  <a mat-list-item routerLinkActive="active" [routerLink]="[config.publicPath.concat('/').concat(config.rankPath)]"
    (click)="onSidenavClose()">
    <span class="nav-caption">{{'navigation.top.ranks' | translate}}</span>
  </a>
  <a mat-list-item
     routerLinkActive="active" [routerLink]="[config.publicPath.concat('/').concat(config.decorationPath)]"
    (click)="onSidenavClose()">
    <span class="nav-caption">{{'navigation.top.decorations' | translate}}</span>
  </a>
  <a mat-list-item routerLinkActive="active" routerLink='{{config.statsPath}}' (click)="onSidenavClose()">
    <span class="nav-caption">{{'navigation.top.statistics' | translate}}</span>
  </a>

  <mat-list-item *ngIf="loginService.hasPermission(2)"
    [ngClass]="{'active': currentUrl.includes('/manage/')}"
    [matMenuTriggerFor]="menuManagement">
    <a matline>
      <span class="nav-caption">{{'navigation.top.management' | translate}}</span>
      <span class="caret"></span>
    </a>
  </mat-list-item>
  <mat-menu #menuManagement="matMenu">
    <button routerLink='{{config.manageUserPath}}' routerLinkActive="active" mat-menu-item (click)="onSidenavClose()">
      {{'navigation.top.management.users' | translate}}
    </button>
    <button routerLink='{{config.manageSquadPath}}' routerLinkActive="active" mat-menu-item (click)="onSidenavClose()">
      {{'navigation.top.management.squads' | translate}}
    </button>
    <button routerLink='{{config.manageDecorationPath}}' routerLinkActive="active"
                                                         mat-menu-item (click)="onSidenavClose()">
      {{'navigation.top.management.decorations' | translate}}
    </button>
    <button routerLink='{{config.manageRankPath}}' routerLinkActive="active" mat-menu-item (click)="onSidenavClose()">
      {{'navigation.top.management.ranks' | translate}}
    </button>
  </mat-menu>

  <mat-list-item *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()"
    [ngClass]="{'active': currentUrl.includes('/request/')}"
    [matMenuTriggerFor]="menuSqlRequest">
    <a matline>
      <span class="nav-caption">{{'navigation.top.request' | translate}}</span>
      <span class="caret"></span>
    </a>
  </mat-list-item>
  <mat-menu #menuSqlRequest="matMenu">
    <button routerLink="{{config.request}}/{{config.sqlDashboardPath}}" routerLinkActive="active"
                                                                        mat-menu-item (click)="onSidenavClose()">
      {{'navigation.top.request.open' | translate}}
    </button>
    <button routerLink="{{config.request}}/{{config.requestPromotionPath}}" routerLinkActive="active"
                                                                            mat-menu-item (click)="onSidenavClose()">
      {{'navigation.top.request.promotion' | translate}}
    </button>
    <button routerLink="{{config.request}}/{{config.requestAwardPath}}" routerLinkActive="active"
                                                                        mat-menu-item (click)="onSidenavClose()">
      {{'navigation.top.request.award' | translate}}
    </button>
  </mat-menu>

  <mat-list-item *ngIf="loginService.hasPermission(2) && loginService.hasSquad()"
    [ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards, 'active': currentUrl.includes('/request/')}"
    [matMenuTriggerFor]="menuRequests">
    <a matline>
      <span class="nav-caption">{{'navigation.top.request.manage' | translate}}</span>
      <span class="caret"></span>
    </a>
  </mat-list-item>
  <mat-menu #menuRequests="matMenu">
    <button [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}"
      routerLink="{{config.request}}/{{config.confirmPromotionPath}}" routerLinkActive="active"
                                                                      mat-menu-item (click)="onSidenavClose()">
      {{'navigation.top.request.promotion' | translate}}
    </button>
    <button [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}"
      routerLink="{{config.request}}/{{config.confirmAwardPath}}" routerLinkActive="active"
                                                                  mat-menu-item (click)="onSidenavClose()">
      {{'navigation.top.request.award' | translate}}
    </button>
  </mat-menu>

  <mat-divider></mat-divider>

  <mat-list-item *ngIf="loginService.hasPermission(4)"
    [ngClass]="{'active': currentUrl.includes('/admin-panel/')}"
    [matMenuTriggerFor]="menuAdmin">
    <a matline>
      <span class="nav-caption">{{'navigation.top.admin' | translate}}</span>
      <span class="caret"></span>
    </a>
  </mat-list-item>
  <mat-menu #menuAdmin="matMenu">
    <button routerLink='{{config.adminPanelAppUsersPath}}' routerLinkActive="active"
                                                           mat-menu-item (click)="onSidenavClose()">
      {{'navigation.top.management.users' | translate}}
    </button>
  </mat-menu>

  <mat-list-item *ngIf="features.localization" [matMenuTriggerFor]="menuLanguage">
    <a class="text-uppercase" matline>
      <span class="nav-caption">{{language}}</span>
      <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>


  <a mat-list-item *ngIf="loginService.isLoggedIn()"
    (click)="doUserLogout(); onSidenavClose()">
    <span class="nav-caption">{{'navigation.top.logout' | translate}}</span>
  </a>
  <a mat-list-item *ngIf="!loginService.isLoggedIn()"
     routerLinkActive="active" routerLink='{{config.loginPath}}' (click)="onSidenavClose()">
    <span class="nav-caption">{{'navigation.top.login' | translate}}</span>
  </a>

  <a mat-list-item href="https://www.opt4.net/dashboard">
    <span class="nav-caption">{{'navigation.top.board' | translate}}</span>
  </a>
</mat-nav-list>