src/app/common-components/main-navigation/main-navigation.component.html

<nav class="navbar navbar-default navbar-fixed-top masthead overview-navbar" role="banner">
  <div class="container-fluid">
    <div class="navbar-header">
      <a href="#/overview" class="navbar-brand"><span class="open">Open</span><span class="konsequenz">KONSEQUENZ</span></a>
    </div>
    <div class="nav navbar-nav navbar-right">
      <div>
        <button style="float: right" type="button" class="btn btn-link navbar-btn" *ngIf="(router.url === '/overview' || router.url === '/reminders')"
          data-toggle="collapse" href="#collapse9" (click)="setFilterExpansionState()">
          <span class="glyphicon glyphicon-filter" data-toggle="tooltip" data-placement="bottom" data-delay='{"show":"1500", "hide":"300"}' data-html="true" title="Filterung nach<br>Verantwortlichkeiten"></span>
        </button>
      </div>
      <div *ngIf="router.url === '/overview' || router.url === '/reminders'" style="border-right: solid 1px #c3c3c3; margin: 10px 0 10px 0">
      </div>
      <div>
        <button style="float: right" type="button" class="btn btn-link navbar-btn" (click)="goToOverview()">
              <span class="glyphicon glyphicon-home active-navitem-hover" [ngClass]="{'active-navitem': router.url === '/overview'}"></span>
            </button>
      </div>
      <div>
        <button style="float: right" type="button" class="btn btn-link navbar-btn" data-toggle="tooltip" data-placement="bottom" data-delay='{"show":"1500", "hide":"300"}' title="Suche" (click)="goToSearchPage()">
            <span class="glyphicon glyphicon-search" [ngClass]="{'active-navitem': router.url === '/search'}"></span>
          </button>
      </div>
      <div>
        <button type="button" class="btn btn-link navbar-btn" data-toggle="tooltip" data-placement="bottom" data-delay='{"show":"1500", "hide":"300"}' title="Aktuelle Erinnerungen" (click)="goToReminderPage()">
            <span class="glyphicon glyphicon-calendar" [ngClass]="{'active-navitem': router.url.startsWith('/reminders'), 'text-danger': sessionContext.reminderAvailable }"></span>            
          </button>
      </div>
      <div style="overflow: hidden" *ngIf="goToShiftChangeOverview">
        <button type="button" class="btn btn-link navbar-btn" data-toggle="tooltip" data-placement="bottom" data-delay='{"show":"1500", "hide":"300"}' data-html="true" title="Archivierte<br>Schichtübergaben" (click)="goToShiftChangeOverview()">
          <span class="glyphicon glyphicon glyphicon-time" [ngClass]="{'active-navitem': router.url === '/shiftChangeOverview'}"></span>
        </button>
      </div>
      <div class="btn btn-link navbar-btn">
        <a href="{{sessionContext.settings?.HELPURL}}" title="Hilfe" target="_blank">
            <span class="glyphicon glyphicon-question-sign"></span>            
        </a>
      </div>
      <div class="dropdown-open nav-user nav-overview-user" style="padding-top: 10px">
        <a class="btn btn-logout dropdown-toggle" style="min-width: 160px;" type="button" data-toggle="dropdown" href="#" aria-expanded="true">
          {{sessionContext.getAccessTokenDecoded()?.name}}<span class="caret"></span>
        </a>
        <ul class="dropdown-menu" style="left: auto; right: auto; top: 40px;">
          <li class="dropdown">
            <a (click)="openDialogShiftChange(false)">Schicht übergeben</a>
          </li>
          <li class="dropdown">
            <a (click)="openDialogShiftChange(true)">Schicht holen</a>
          </li>
          <li class="dropdown">
            <a (click)="openDialogLogout()">Abmelden</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</nav>