{% if site.navigation_header %}
<nav class="nav  nav--header">
  <button class="button  button--nav" aria-label="Nav toggle">
    {% include icon.html id="nav" %}
  </button>
  <ul class="list  list--nav">
    {% for item in site.navigation_header %}

      {% if item[1] contains '://' %}
      {% assign url = item[1] %}
      {% else %}
      {% assign url = item[1] | relative_url %}
      {% endif %}

      <li class="item  item--nav{% if item[1] == page.url %}  item--current{% endif %}">
        <a href="{{ url }}">{{ item[0] }}</a>
      </li>
    {% endfor %}
  </ul>
</nav>
{% else %}
  {% include nav-default.html %}
{% endif %}

<script type="text/javascript">
const applyToggle = (list, button, breakpoint) => {
  const navList = document.querySelector(list)
  if (document.body.clientWidth < breakpoint) {
    const navHeight = navList.clientHeight
    const navButton = document.querySelector(button)
    navList.style.maxHeight = '0px'

    navButton.onclick = () => {
      if (navList.style.maxHeight == '0px') {
        navList.style.maxHeight = `${navHeight}px`
      } else {
        navList.style.maxHeight = '0px'
      }
    }
  }
}

applyToggle('.list--nav', '.button', 640)
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/galleria.min.js"></script>