navigation.njk

{% block navigation %}
<header class="usa-header usa-header--basic bg-primary-darker text-white">
    <div class="usa-nav-container">
      <div class="usa-navbar">
        <div class="usa-logo">
          <em class="usa-logo__text">
            <a href="/" title="cloud.gov Pages Home" aria-label="cloud.gov Pages Home">
              <img class="usa-icon width-15 desktop:width-card height-auto text-middle" src="/images/logo-pages.svg" x="0" y="0" height="26" width="135" />
            </a>
          </em>
        </div>
        <button type="button" class="usa-menu-btn">Menu</button>
      </div>
      <nav aria-label="Primary navigation," class="usa-nav">
        <button type="button" class="usa-nav__close">
          <img src="/img/usa-icons/close.svg" role="img" alt="Close" />
        </button>
        <ul class="usa-nav__primary usa-accordion">
          <li class="usa-nav__primary-item">
            <a href="{{ homepageUrl }}/documentation/" class="usa-nav-link">
              <span>Documentation</span>
            </a>
          </li>
          {% if isAuthenticated %}
            <li class="usa-nav__primary-item">
              <a href="/sites" class="usa-nav-link">
                <span>Sites</span>
              </a>
            </li>
            <li class="usa-nav__primary-item">
              <a href="/organizations" class="usa-nav-link">
                <span>Organizations</span>
              </a>
            </li>
              <li class="usa-nav__primary-item">
              <a href="/settings" class="usa-nav-link">
                <span>Settings</span>
              </a>
            </li>
            <li class="usa-nav__primary-item">
              <a href="/logout" class="">
                <span class="usa-button usa-button--inverse display-none desktop:display-block">Logout</span>
                <span class="usa-button desktop:display-none">Logout</span>
              </a>
            </li>
          {% else %}
            <li class="usa-nav__primary-item">
              <a href="/login" class="">
                <span class="usa-button usa-button--inverse display-none desktop:display-block">Log in with cloud.gov</span>
                <span class="usa-button desktop:display-none">Log in with cloud.gov</span>
              </a>
            </li>
          {% endif %}
        </ul>
      </nav>
    </div>
  </header>
{% endblock %}