header.html

<header class="usa-header usa-header--extended bg-white" role="banner">
  <div class="usa-navbar margin-top-1">
    <div class="usa-logo" id="extended-logo">
      <a href="{{ '/' | prepend: site.baseurl }}" title="Home" aria-label="Home">
        <img src="{{ site.baseurl }}/assets/img/logo.svg" class="usa-logo__img" alt="login.gov">
      </a>
    </div>

    <button class="usa-menu-btn">Menu</button>
  </div>

  <nav role="navigation" class="usa-nav" >
    <div class="usa-nav__inner">
      <button class="usa-nav__close"><img src="{{ site.baseurl }}/assets/img/close.svg" alt="Close"></button>
      <ul class="usa-nav__primary usa-accordion">
        <li class="usa-nav__primary-item">
          <a class="usa-nav__link {% if page.url == '/' %}usa-current{% endif %}" href="{{ '/' | relative_url }}">
            <span>{% t nav.home %}</span>
          </a>
        </li>
        <li class="usa-nav__primary-item">
          <button class="usa-accordion__button usa-nav__link {% if page.url contains '/playbook/' %}usa-current{% endif %}" aria-controls="unique-id-1">
            <span>{% t nav.playbook %}</span>
          </button>
          <ul id="unique-id-1" class="usa-nav__submenu">
            <li class="usa-nav__submenu-item">
              <a href="{{ '/playbook/' | relative_url }}">
                <span>{% t nav.overview %}</span>
              </a>
            </li>
            <li class="usa-nav__submenu-item">
              <a href="{{ '/playbook/principles/' | relative_url }}">
                <span>{% t nav.principles %}</span>
              </a>
            </li>
            <li class="usa-nav__submenu-item">
              <a href="{{ '/playbook/implementation/' | relative_url }}">
                <span>{% t nav.implementation %}</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="usa-nav__primary-item">
          <a class="usa-nav__link {% if page.url == '/security/' %}usa-current{% endif %}" href="{{ '/security/' | relative_url }}">
            <span>{% t nav.security %}</span>
          </a>
        </li>
        <li class="usa-nav__primary-item">
          <button class="usa-accordion__button usa-nav__link {% if page.url contains '/partners/' %}usa-current{% endif %}" aria-controls="unique-id-2">
            <span>{% t nav.partners %}</span>
          </button>
          <ul id="unique-id-2" class="usa-nav__submenu">
            <li class="usa-nav__submenu-item">
              <a href="{{ '/partners/' | relative_url }}">
                <span>{% t nav.overview %}</span>
              </a>
            </li>
            <li class="usa-nav__submenu-item">
              <a href="{{ '/partners/our-agency-partners/' | relative_url }}">
                <span>{% t nav.our-agency-partners %}</span>
              </a>
            </li>
            <li class="usa-nav__submenu-item">
              <a href="{{ '/partners/why-login-gov/' | relative_url }}">
                <span>{% t nav.why-login-gov %}</span>
              </a>
            </li>
          </ul>
        </li>
        <li class="usa-nav__primary-item">
          <button class="usa-accordion__button usa-nav__link {% if page.url contains '/help/' %}usa-current{% endif %}" aria-controls="unique-id-3">
            <span>{% t nav.help %}</span>
          </button>
          <ul id="unique-id-3" class="usa-nav__submenu ">
            <li class="usa-nav__submenu-item">
              <a href="{{ '/help/' | relative_url }}">
                <span>{% t nav.overview %}</span>
              </a>
            </li>
            {% for subpage in site.help_pages %}
              {% assign subpage_slug = subpage | slugify %}
              {% assign subpage_link = site.help | where_exp: "item", "item.url contains subpage_slug" | where: 'order', 1 | first %}
              <li class="usa-nav__submenu-item">
                <a href="{{ subpage_link.url | relative_url }}">
                  <span>{{ site.translations[site.lang]["help_subpages"][subpage]}}</span>
                </a>
              </li>
            {% endfor %}
          </ul>
        </li>
      </ul>
    </div>
    <div class="usa-nav__secondary">
      <div class="usa-nav__secondary-container">
        <ul class="usa-nav__secondary-links">
          <li id="sign-in" class="usa-nav__secondary-item bold">
            <span class="font-sans-md">{% t nav.sign_in %}</span>
            <span class="usa-button--small sign-in-logo sign-in-logo-padding">
              <a href="https://secure.login.gov/{% if site.lang != 'en' %}{{site.lang}}{% endif %}"
                style="background: url({{ site.baseurl }}/assets/img/logo_sign_in.svg) center/contain no-repeat"
                title="Login.gov" aria-label="Login.gov" tabindex="0">Login.gov</a>
            </span>
          </li>
        </ul>
        <form class="usa-search usa-search--small" id="search_form" action="https://search.usa.gov/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
          <input type="hidden" name="affiliate" id="affiliate" value="login.gov" />
          <div role="search">
            <input type="search" name="query" id="query" autocomplete="off" class="usa-input" />
            <input type="submit" class="usa-button app-search" name="commit" value=" " data-disable-with="Search" />
          </div>
        </form>
      </div>
    </div>
  </nav>
</header>