{% if site.navigation_header %}
<nav class="nav  nav--header">
  <ul class="list  list--nav">
    {% for link in site.navigation_header %}
    <a class="nav-item" 
       href="{{ link.url | relative_url }}" 
       {% if link.url contains 'http' %} 
          target="_blank" rel="noopener noreferrer" 
       {% endif %}>
      {{ link.title }}
    </a>
  {% endfor %}

      <li class="item  item--nav{% if item.url == page.url %}  item--current{% endif %}">
        <a href="{{ url }}">{{ item.title }}</a>
      </li>
    {% endfor %}
  </ul>
  <button class="button  button--nav" aria-label="Menu toggle">
    {% include icon.html id="nav" title="Menu" %}
  </button>
</nav>
{% else %}
  {% include nav-default.html %}
{% endif %}

<script type="text/javascript">
  // Get list and button
  const navList = document.querySelector('.header .list--nav')
  const button  = document.querySelector('.header .button--nav')

  // Hide nav and apply toggle
  const collapseNav = () => {
    if (document.body.clientWidth < 640) {
      navList.style.setProperty('--listHeight', `-${navList.offsetHeight}px`)
    } else {
      navList.removeAttribute('style')
    }

    button.onclick = () => {
      navList.style.setProperty('transition', `margin .1s`)
      if (navList.style.getPropertyValue('--listHeight')) {
        navList.style.removeProperty('--listHeight')
      } else {
        navList.style.setProperty('--listHeight', `-${navList.offsetHeight}px`)
      }
    }
  }

  collapseNav()

  // Check on resize if to collapse nav
  window.addEventListener('resize', () => {
    collapseNav()
  })
</script>