
  <div class="navbar-header">
    <a ng-click="toggleNavSize($event)" class="btn btn-link visible-xs" data-toggle="class:nav-off-screen" data-target="#nav"><i class="fa fa-bars"></i></a>
    <a ui-sref="app.public.home" class="navbar-brand" ng-click="goabout = false">
      <img ng-src="{{logo.custom_asset_file_attributes.attachment_url}}" alt="{{logo.custom_asset_file_attributes.attachment}}" class="m-r-sm"/>
      <%= raw "<label class='label-staging label label-warning text-sm hidden-sm hidden-xs'>Staging</label>" if Rails.env.staging? %></a>
  </div>

  <ul class="nav navbar-nav hidden-xs">
    <li>
      <a href class="about-link font-sbold text-sm" ng-click="goabout = !goabout" ui-sref="app.public.about" ng-show="!goabout">
        <span class="label label-theme rounded text-lg text-white m-r-sm font-ebold">?</span>
          {{ 'about_the_fablab' | translate:{ GENDER: nameGenre, NAME: fablabName }:"messageformat" }}
      </a>
      <a href class="about-link font-sbold text-sm" ng-click="goabout = !goabout" ui-sref="app.public.home" ng-show="goabout">
        <span class="label label-theme label-icon rounded text-lg text-white m-r-sm font-ebold"><i class="fa fa-caret-up" ng-show="goabout"></i></span>
          {{ 'return' | translate }}
      </div>
      </a>
    </li>
  </ul>

  <!-- Top Nav -->
  <ul class="nav navbar-nav navbar-right m-n hidden-xs nav-user user">
    <li class="notification-open" ng-if="isAuthenticated()">
      <a ui-sref="app.logged.notifications"><i class="fa fa-bell fa-2x black"></i> <span class="badge" ng-class="{'bg-red': notifications.unread > 0}">{{notifications.unread}}</span></a>
    </li>
    <li class="dropdown user-profile-nav" ng-if="isAuthenticated()" uib-dropdown>
      <a href="#" class="dropdown-toggle" uib-dropdown-toggle>
        <span class="avatar text-center">
          <fab-user-avatar ng-model="currentUser.profile.user_avatar" avatar-class="thumb-50"></fab-user-avatar>
          <span class="user-name m-l-sm text-black-light font-sbold hidden-sm">{{currentUser.name}} </span>
          <b class="caret"></b>
        </span>
      </a>
      <ul class="uib-dropdown-menu animated fadeInRight">
        <li><a href="#" ui-sref="app.logged.dashboard.profile" translate>{{ 'my_profile' }}</a></li>
        <li><a href="#" ui-sref="app.logged.dashboard.settings" translate>{{ 'my_settings' }}</a></li>
        <li><a href="#" ui-sref="app.logged.dashboard.projects" translate>{{ 'my_projects' }}</a></li>
        <li><a href="#" ui-sref="app.logged.dashboard.trainings" translate>{{ 'my_trainings' }}</a></li>
        <li><a href="#" ui-sref="app.logged.dashboard.events" translate>{{ 'my_events' }}</a></li>
        <li><a href="#" ui-sref="app.logged.dashboard.invoices" translate>{{ 'my_invoices' }}</a></li>
        <li><a href="#" ui-sref="app.logged.dashboard.wallet" translate>{{ 'my_wallet' }}</a></li>

        <li class="divider"></li>
        <li><a href="#" class="text-black" ng-click="logout($event)"><i class="fa fa-power-off"></i> {{ 'sign_out' | translate }}</a></li>
      </ul>
    </li>
    <% active_provider = AuthProvider.active %>
    <% if active_provider.providable_type == DatabaseProvider.name %>
      <li ng-if="!isAuthenticated()"><a href="#" class="font-sbold label text-md" ng-click="signup($event)"><i class="fa fa-rocket"></i> {{ 'sign_up' | translate }}</a></li>
      <li ng-if="!isAuthenticated()">
          <a href="#" class="font-sbold  label text-md" ng-click="login($event)"><i class="fa fa-sign-in"></i> {{ 'sign_in' | translate }}</a>
      </li>
    <% else %>
        <li ng-if="!isAuthenticated()"><a href="<%= user_omniauth_authorize_path(active_provider.strategy_name.to_sym)%>" class="font-sbold label text-md"><i class="fa fa-rocket"></i> {{ 'sign_up' | translate }}</a></li>
        <li ng-if="!isAuthenticated()">
            <a href="<%= user_omniauth_authorize_path(active_provider.strategy_name.to_sym)%>" class="font-sbold  label text-md"><i class="fa fa-sign-in"></i> {{ 'sign_in' | translate }}</a>
        </li>
    <% end %>
  </ul>
