<div id="top">
  <div id="top-inner">
    <h1><a href="/"><span>Node TAP</span> <small><span>{{ tapVersion }}</span></small></a></h1>
    <div id="site-nav">
      <nav>
        {% set topNavPages = collections.all | eleventyNavigation %}
        <ul>
          {%- for entry in topNavPages %}
          <li{% if entry.url == page.url %} class="current-page"{% endif %}>
            <a href="{{ entry.url }}">{{ entry.title }}</a>
          </li>
          {%- endfor %}
        </ul>
      </nav>
    </div>
  </div>
  <div id="search" class="search"></div>
  <script src="/pagefind/pagefind-ui.js" onload="
    new PagefindUI({ element: '#search', showImages: false })
  "></script>
  <script>
    {
      const search = document.getElementById('search')
      // make the whole search result clickable
      // could probably hack the search results template to do this
      // without JS, but this works.
      search.addEventListener('click', e => {
        let p = e.target
        if (p.tagName === 'A') return true
        while (p && p !== search && p.tagName !== 'LI')
          p = p.parentElement
        if (p?.tagName === 'LI') {
          const a = p.getElementsByTagName('A')[0]
          if (a && a.href) location.href = a.href
        }
      })
    }
  </script>
</div>
