opt-cc/static/src/app/app.component.html

<div class="container">
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">

      <div class="navbar-header">
        <a class="navbar-brand" href="#" style="padding-top: 2px">
          <img height="40px" src="assets/opt-logo-klein.png">
        </a>
        <span class="version-label">{{version}}</span>
      </div>
      <div class="collapse navbar-collapse" id="mynavbar">

        <ul class="nav navbar-nav">
          <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)"
              class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">
              {{'navigation.top.management' | translate}}
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li routerLinkActive="active">
                <a routerLink='{{config.manageUserPath}}' class="link">{{'navigation.top.management.users' | translate}}</a>
              </li>
              <li routerLinkActive="active">
                <a routerLink='{{config.manageSquadPath}}' class="link">{{'navigation.top.management.squads' | translate}}</a>
              </li>
              <li routerLinkActive="active">
                <a routerLink='{{config.manageDecorationPath}}' class="link">{{'navigation.top.management.decorations' | translate}}</a>
              </li>
              <li routerLinkActive="active">
                <a routerLink='{{config.manageRankPath}}' class="link">{{'navigation.top.management.ranks' | translate}}</a>
              </li>
            </ul>
          </li>
          <li *ngIf="loginService.hasPermission(1) && !loginService.hasPermission(2) && loginService.hasSquad()"
              class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">
              {{'navigation.top.request' | translate}}
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a routerLink="{{config.request}}/{{config.sqlDashboardPath}}">{{'navigation.top.request.open' | translate}}</a>
              </li>
              <li>
                <a routerLink="{{config.request}}/{{config.requestPromotionPath}}">{{'navigation.top.request.promotion' | translate}}</a>
              </li>
              <li>
                <a routerLink="{{config.request}}/{{config.requestAwardPath}}">{{'navigation.top.request.award' | translate}}</a>
              </li>
            </ul>
          </li>
          <li *ngIf="loginService.hasPermission(2) && loginService.hasSquad()" class="dropdown">
            <a href="#"
               [ngClass]="{'unprocessed': promotionService.hasUnprocessedPromotion || awardingService.hasUnprocessedAwards}"
               class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">
              {{'navigation.top.request.manage' | translate}}
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a [ngClass]="{'unprocessed-child': promotionService.hasUnprocessedPromotion}"
                   routerLink="{{config.request}}/{{config.confirmPromotionPath}}">{{'navigation.top.request.promotion' | translate}}</a>
              </li>
              <li>
                <a [ngClass]="{'unprocessed-child': awardingService.hasUnprocessedAwards}"
                   routerLink="{{config.request}}/{{config.confirmAwardPath}}">{{'navigation.top.request.award' | translate}}</a>
              </li>
            </ul>
          </li>
        </ul>

        <ul class="nav navbar-nav pull-right">
          <li *ngIf="loginService.hasPermission(4)" routerLinkActive="active">
            <a routerLink='{{config.adminPanelPath}}' class="link">{{'navigation.top.admin' | translate}}</a>
          </li>
          <li *ngIf="loginService.isLoggedIn()" class="link" style="cursor: pointer">
            <a (click)="logout()">{{'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 class="dropdown" *ngIf="features.localization">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false" style="padding: 12px 12px 10px 12px;">
              <mat-icon svgIcon="flag-{{language}}"></mat-icon>
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li *ngFor="let lang of languages" style="cursor: pointer">
                <a (click)="setLanguage(lang)"><mat-icon svgIcon="flag-{{lang}}"></mat-icon></a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

<div>
  <router-outlet></router-outlet>

  <div id="left">
    <router-outlet name="left"></router-outlet>
  </div>

  <div id="right">
    <router-outlet name="right"></router-outlet>
  </div>
</div>

<span *ngIf="loading" class="load-indicator load-arrow glyphicon-refresh-animate"></span>

<button mat-icon-button
        mat-mini-fab
        id="scrollTopBtn"
        *ngIf="scrollTopVisible"
        matTooltip="{{'navigation.button.scroll.top' | translate}}"
        (click)="scrollToTop()">
  <mat-icon svgIcon="arrow-up"></mat-icon>
</button>