eHealthAfrica/direct-delivery-dashboard

<nav class="navbar navbar-static-top navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button
        type="button"
        class="navbar-toggle"
        ng-if="navbarState.items.length"
        ng-click="toggleCollapse()"
      >
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a
        class="navbar-brand"
        ui-sref="home"
      >
        <span class="fa fa-home"></span>
        <span ng-bind="::name"></span>
      </a>
    </div>

    <div
      ng-if="navbarState.items.length"
      class="collapse navbar-collapse"
      collapse="navbarState.collapsed"
    >
      <ul class="nav navbar-nav">
        <li
          ng-repeat="item in navbarState.items track by item.name"
          ui-sref-active="active"
          eha-show-for-role="item.roles"
        >
          <a
            ng-click="toggleCollapse()"
            ui-sref="{{item.name}}"
            ng-bind="::item.label"
          ></a>
        </li>
      </ul>

      <eha-dropdown-menu
        items="['Logout']"
        on-select="logout"
        selected-item="navbarState.username"
        selected-item-as-label="true"
        icon-class="fa fa-user fa-lg"
      ></eha-dropdown-menu>

      <eha-dropdown-menu
        items="stateMap.states"
        on-select="selectState"
        selected-item="stateMap.selectedState"
        icon-class="fa fa-plus-square fa-lg"
      ></eha-dropdown-menu>

    </div>
  </div>
</nav>