<div class=“pos-f-t fixed-top header”>

<nav class="navbar navbar-inverse bg-inverse navbar-toggleable-md">
  <button class="navbar-toggler navbar-toggler-right" (click)="toggleSidebar()">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">
    <img class="header-logo" src="/assets/images/teneo.png">
  </a>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav ml-auto mt-2 mt-md-0">
      <li class="nav-item dropdown" ngbDropdown>
        <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
          <i class="fa fa-language"></i> {{ 'language' | translate }} <b class="caret"></b>
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="javascript:void(0)" (click)="changeLang('en')">English</a>
          <a class="dropdown-item" href="javascript:void(0)" (click)="changeLang('fr')">Français</a>
          <a class="dropdown-item" href="javascript:void(0)" (click)="changeLang('nl')">Nederlands</a>
        </div>
      </li>
      <li class="nav-item dropdown" ngbDropdown>
        <a href="javascript:void(0)" class="nav-link" ngbDropdownToggle>
          <i class="fa fa-user"></i> {{userName}} <b class="caret"></b>
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="javascript:void(0)"><i class="fa fa-fw fa-user"></i> Profile</a>
          <a class="dropdown-item" href="javascript:void(0)"><i class="fa fa-fw fa-envelope"></i> Inbox</a>
          <a class="dropdown-item" href="javascript:void(0)"><i class="fa fa-fw fa-gear"></i> Settings</a>
          <a class="dropdown-item" [routerLink]="['/login']" (click)="onLoggedout()"><i
            class="fa fa-fw fa-power-off"></i> Log Out</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

</div>