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">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" style="padding-top: 2px">
          <img height="40px" src="assets/opt-logo-klein.png">
        </a>
      </div>
      <div class="collapse navbar-collapse" id="mynavbar">

        <ul class="nav navbar-nav">
          <li *ngIf="!loginService.isLoggedIn()" routerLinkActive="active">
            <a routerLink='/login' class="link">Login</a>
          </li>
          <li routerLinkActive="active">
            <a routerLink='/cc-overview' class="link">Armeeübersicht</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">
              Schlacht Statistik
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu scrollable-menu">
              <li *ngIf="loginService.hasPermission(3)">
                <a routerLink='/cc-wars' class="link">Hinzufügen...</a>
              </li>
              <li *ngFor="let war of wars">
                <a [routerLink]="['/cc-wars/' + war._id]">{{war.title}}
                  <small>{{war.date | date: 'dd.MM.yy'}}</small>
                </a>
              </li>
            </ul>
          </li>
          <li *ngIf="loginService.hasPermission(2)" routerLinkActive="active">
            <a routerLink='/cc-users' class="link">Teilnehmer</a>
          </li>
          <li *ngIf="loginService.hasPermission(2)" routerLinkActive="active">
            <a routerLink='/cc-squads' class="link">Squads</a>
          </li>
          <li *ngIf="loginService.hasPermission(2)" routerLinkActive="active">
            <a routerLink='/cc-decorations' class="link">Auszeichnungen</a>
          </li>
          <li *ngIf="loginService.hasPermission(2)" routerLinkActive="active">
            <a routerLink='/cc-ranks' class="link">Ränge</a>
          </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">
              Beantragen
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a [routerLink]="['/request-promotion']">Beförderung</a>
              </li>
              <li>
                <a [routerLink]="['/request-award']">Orden/ Auszeichnung</a>
              </li>
            </ul>
          </li>
          <li *ngIf="loginService.hasPermission(2) && loginService.hasSquad()" class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
               aria-expanded="false">
              Anträge
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li>
                <a [routerLink]="['/confirm-promotion']">Beförderung</a>
              </li>
              <li>
                <a [routerLink]="['/confirm-award']">Orden/ Auszeichnung</a>
              </li>
            </ul>
          </li>
        </ul>

        <ul class="nav navbar-nav" style="float: right">
          <li *ngIf="loginService.hasPermission(4)" routerLinkActive="active">
            <a routerLink='/admin-panel' class="link">Admin Panel</a>
          </li>
          <li *ngIf="authEnabled" class="link" style="cursor: pointer">
            <a *ngIf="loginService.isLoggedIn()" (click)="logout()">Abmelden</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

</div>
<div class="content">
  <div id="left">
    <router-outlet></router-outlet>
  </div>
  <div id="right">
    <router-outlet name="right"></router-outlet>
  </div>
  <div id="footer">
    <router-outlet name="bottom"></router-outlet>
  </div>
</div>