{%- assign default_paths = site.pages | map: "path" -%}
{%- assign page_paths = site.header_pages | default: default_paths -%}
{%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}

<header class="header">
  <div class="header__container">
    <div class="header__title">
      {%- if page.layout == 'home' -%}
      <h1><a href="{{ '/' | relative_url }}">{{ site.title }}</a></h1>
      {%- else -%}
      <a href="{{ '/' | relative_url }}">{{ site.title }}</a>
      {%- endif -%}
    </div>

    {%- if titles_size > 0 -%}
    <nav class="header__nav">
      <input class="header__nav-toggle" id="nav-toggle" type="checkbox" />
      <label for="nav-toggle" aria-label="show/hide the navigation menu">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"/></svg>
      </label>

      <ul class="header__links">
      {%- for path in page_paths -%}
        {%- assign page = site.pages | where: "path", path | first -%}
        {%- if page.title -%}
        <li class="header__link">
          <a href="{{ page.url | relative_url }}" aria-label="{{ page.title }}">{{ page.title | escape }}</a>
        </li>
        {%- endif -%}
      {%- endfor -%}
      </ul>
    </nav>
    {%- endif -%}
  </div>
</header>

<script>
  const header = document.querySelector('.header')
  const container = header.querySelector('.header__container')
  const trigger = header.offsetHeight - container.offsetTop

  window.addEventListener("scroll", (event) => {
    if (window.scrollY > trigger) {
      header.classList.add('header--pinned')
    } else {
      header.classList.remove('header--pinned')
    }
  })
</script>