{% 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>

<!-- Core CSS file -->
<link rel="stylesheet" href="{{site.baseurl}}/assets/scripts/photoswipe.css">

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite,
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="{{site.baseurl}}/assets/scripts/default-skin/default-skin.css">

<!-- Core JS file -->
<script src="{{site.baseurl}}/assets/scripts/photoswipe.min.js"></script>

<!-- UI JS file -->
<script src="{{site.baseurl}}/assets/scripts/photoswipe-ui-default.min.js"></script>

<meta name="have-i-been-pwned-verification" value="af4e144907733d5b83fae755755fc16d">