pigallery2/frontend/app/ui/frame/frame.component.html

<ng2-slim-loading-bar [color]="'#337ab7'" [height]="'3px'"></ng2-slim-loading-bar>
<nav class="navbar  navbar-dark bg-dark  navbar-expand-md">
  <a class="navbar-brand" [routerLink]="['/gallery','/']"
     [queryParams]="queryService.getParams()">
    <img src="assets/icon_inv.png" width="30" height="30" class="d-inline-block align-top" alt="">
    <strong>{{title}}</strong>
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav"
          aria-expanded="false" aria-label="Toggle navigation" (click)="toggleState()">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarNav" [collapse]="collapsed">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item" [routerLinkActive]="['active']">
        <a class="nav-link"
           [routerLink]="['/gallery']"
           [queryParams]="queryService.getParams()">Gallery</a>
      </li>
      <li class="nav-item" [routerLinkActive]="['active']">
        <a class="nav-link" [routerLink]="['/faces']">Faces</a>
      </li>
    </ul>
    <ul class="navbar-nav navbar-right ml-auto">
      <ng-content select="[navbar]"></ng-content>
      <li class="nav-item divider-vertical">
      </li>
      <li class="nav-item mr-2 ml-2" *ngIf="authenticationRequired" style=" white-space: nowrap;">
        <span class="navbar-text" *ngIf="user.value">
          <span class="oi oi-person"></span> {{user.value.name}}</span>
      </li>
      <li class="nav-item ml-2">
        <app-language class="navbar-btn" isDark="true"></app-language>
      </li>
      <div class="btn-group" dropdown  placement="bottom"
           *ngIf="isAdmin() || authenticationRequired">
        <button id="button-alignment" dropdownToggle
                type="button" class="btn btn-dark dropdown-toggle"
                aria-controls="dropdown-alignment">
          <span class="oi oi-menu"></span>
          <span *ngIf="isAdmin() && notificationService.notifications.length>0"
                class="navbar-badge badge badge-warning">{{notificationService.notifications.length}}</span>
        </button>
        <ul id="dropdown-alignment" *dropdownMenu
            class="dropdown-menu dropdown-menu-right"
            role="menu" aria-labelledby="button-alignment">
          <ng-content select="[navbar-menu]"></ng-content>
          <li role="menuitem" *ngIf="isAdmin()">
            <a class="dropdown-item" href="#" [routerLink]="['/duplicates']">
              <span class="oi oi-layers"></span>
              <ng-container i18n>duplicates</ng-container>
            </a>
          </li>
          <li role="menuitem" *ngIf="isAdmin()">
            <a class="dropdown-item" href="#" [routerLink]="['/admin']">
              <span class="oi oi-wrench"></span>
              <span *ngIf="notificationService.notifications.length>0"
                    class="badge">{{notificationService.notifications.length}}</span>
              <ng-container i18n>Settings</ng-container>
            </a>
          </li>
          <li role="menuitem" *ngIf="authenticationRequired">
            <a class="dropdown-item" href="#" (click)="logout()">
              <span class="oi oi-account-logout"></span>
              <ng-container i18n>Logout</ng-container>
            </a>
          </li>
        </ul>
      </div>


    </ul>


  </div><!--/.nav-collapse -->

</nav>
<ng-content select="[body]"></ng-content>