<nav
  class="global-nav"
  ng-class="{'is-global-nav-open': isGlobalNavOpen}"
  ng-show="isVisible"
  data-test-subj="globalNav"
>

  <!-- Logo -->
  <div class="global-nav__logo">
    <a
      class="global_nav_logo"
      ng-class="{ active: isHomeActive() }"
      href="{{ getHref('/app/kibana#/home') }}"
      data-test-subj="kibanaLogo"
    >
      <ul>
        <li
          ng-if="!logoBrand && !smallLogoBrand"
          aria-label="{{ appTitle }} home"
          class="logo kibana"
        ></li>

        <li
          ng-if="logoBrand"
          ng-style="{ 'background': logoBrand }"
          aria-label="{{ appTitle }} home"
          class="logo hidden-sm"
        ></li>

        <li
          ng-if="smallLogoBrand"
          ng-style="{ 'background': smallLogoBrand }"
          aria-label="{{ appTitle }} home"
          class="logo-small visible-sm hidden-xs"
        ></li>
      </ul>
    </a>
  </div>

  <!-- Links -->
  <div class="global-nav__links">
    <!-- Main apps -->
    <div class="global-nav__links-section">
      <app-switcher
        chrome="chrome"
      ></app-switcher>
    </div>

    <!-- Bottom button -->
    <div class="global-nav__links-section">
      <div class="chrome-actions" kbn-chrome-append-nav-controls></div>

      <!-- Open/close sidebar -->
      <global-nav-link
        class="{{ globalNavToggleButton.classes }}"
        tooltip-content="globalNavToggleButton.tooltipContent"
        on-click="toggleGlobalNav($event)"
        icon="'plugins/kibana/assets/play-circle.svg'"
        label="globalNavToggleButton.title"
      ></global-nav-link>
    </div>
  </div>

</nav>
