site-navigation.njk

{% set locale_dir = ["/"] | join %}

{% if locale != "en" %}
  {% set locale_dir = ["/", locale, "/"] | join %}
{% endif %}

<!-- https://designsystem.webstandards.ca.gov/components/site-navigation/readme/ -->
<cagov-site-navigation>
  <div class="container">

    <!-- Begin expanding search container for mobile. -->
    <div class="search-container search-container--small hidden-search" id="mobile-search-container" aria-hidden="true">
      <form class="site-search" action="/search/">
        <span class="sr-only" id="SearchInput2mobile">{{ 'Custom Google Search' | i18n(locale) }}</span>
        <input type="text" name="q" aria-labelledby="SearchInput2mobile" placeholder="{{ 'Search this website' | i18n(locale) }}" class="search-textfield" tabindex="-1"/>
        <button type="submit" class="search-submit" tabindex="-1">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="17px" height="17px" viewBox="0 0 17 17" style="enable-background:new 0 0 17 17;" xml:space="preserve">
            <path class="blue" d="M16.4,15.2l-4-4c2-2.6,1.8-6.5-0.6-8.9c-1.3-1.3-3-2-4.8-2S3.5,1,2.2,2.3c-2.6,2.6-2.6,6.9,0,9.6
        c1.3,1.3,3,2,4.8,2c1.4,0,2.9-0.5,4.1-1.4l4.1,4c0.2,0.2,0.4,0.3,0.7,0.3c0.2,0,0.5-0.1,0.7-0.3C16.7,16.2,16.7,15.6,16.4,15.2
        L16.4,15.2z M7,12c-1.3,0-2.6-0.5-3.5-1.4c-1.9-1.9-1.9-5.1,0-7C4.4,2.7,5.6,2.1,7,2.1s2.6,0.5,3.5,1.4c0.9,0.9,1.4,2.2,1.4,3.5
        c0,1.3-0.5,2.6-1.4,3.5C9.5,11.5,8.3,12,7,12z"></path>
          </svg>
          <span class="sr-only">{{ 'Submit' | i18n(locale) }}</span></button>
      </form>
    </div>
    <!-- End expanding search container for mobile. -->

    <nav class="expanded-menu" role="navigation" aria-label="{{ 'Site Navigation' | i18n(locale) }}" aria-hidden="false" id="main-menu">
      <div class="expanded-menu-grid">
        {% for menu in headerMenu %}
          <div class="expanded-menu-col js-cagov-navoverlay-expandable">
            <div class="expanded-menu-section">
              <strong class="expanded-menu-section-header">
                {% if menu['child_items'] %}
                  <button class="expanded-menu-section-header-link js-event-hm-menu">
                    <span>
                      {{ menu.title | safe }}
                    </span>
                    <span class="expanded-menu-section-header-arrow">
                      <svg width="11" height="7" class="expanded-menu-section-header-arrow-svg" viewbox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M1.15596 0.204797L5.49336 5.06317L9.8545 0.204797C10.4293 -0.452129 11.4124 0.625368 10.813 1.28143L5.90083 6.82273C5.68519 7.05909 5.32606 7.05909 5.1342 6.82273L0.174341 1.28143C-0.400433 0.6245 0.581838 -0.452151 1.15661 0.204797H1.15596Z" fill="#064E66"/>
                      </svg>
                    </span>
                  </button>
                {% else %}
                  <a class="expanded-menu-section-header-link js-event-hm-menu" href="{{ menu.url }}">
                    {{ menu.title | safe }}
                  </a>
                {% endif %}
              </strong>

              {% if menu['child_items'] | length %}
                <div class="expanded-menu-dropdown">
                  {% for sublink in menu['child_items'] %}
                    <a class="expanded-menu-dropdown-link js-event-hm-menu" href="{{ sublink.url  }}" tabindex="-1">{{ sublink.title | safe }}</a>
                  {% endfor %}
                </div>
              {% endif %}

            </div>
          </div>
        {% endfor %}

      </div>
    </nav>
  </div>
</cagov-site-navigation>