{% from "./Node.njk" import Node %}

{% macro navlink(href, text, active) %}
  <a href="{{ href }}" class="flex items-center hover:text-primary-400 {{ 'text-primary-400' if href in active }}">{{ text }}</a>
{% endmacro %}

{% macro render(node, ctx) %}
  <nav class="fixed left-0 right-0 top-0 lg:absolute bg-neutral-800 text-neutral-50 h-20 flex items-center z-10">
    <div class="container mx-auto px-8 flex items-center space-between">
      <a id="nav" class="peer" href="#nav" aria-hidden="true" tabindex="-1"></a>

      <div class="absolute z-10 bg-neutral-800 w-full h-full top-0 left-0 lg:hidden"></div>

      <a href="/" class="relative w-full z-20">
        {{ Node('Logo', { variant: 'small' }) }}
      </a>

      <div class="
        group
        fixed flex flex-col gap-8 items-stretch w-full bg-neutral-800 text-neutral-50 top-20 bottom-0 left-0 px-7
        transition-transform
        -translate-y-full
        pointer-events-none
        peer-target:translate-y-0
        peer-target:pointer-events-auto
        lg:translate-y-0
        lg:pointer-events-auto
        lg:relative lg:top-0 lg:px-0 lg:flex-row lg:flex-1 lg:h-20 lg:bg-neutral-800 lg:text-white
      ">
        {{ navlink("/docs/javascript/", "Docs", ctx.url) }}
        {{ navlink("/examples/", "Examples", ctx.url) }}
        {{ navlink("/about/", "About", ctx.url) }}
        {{ navlink("/contribute/", "Contribute", ctx.url) }}
        <div class="-order-1 lg:order-2 flex items-center">{{ Node('SearchBox', { class: 'w-full lg:w-72' }) }}</div>
        <a href="https://git.thederf.com/thederf/Terrace" target="_blank" class="flex items-center hover:text-primary-400 order-3">
          {{ Node('Icon', { icon: 'github' }) }}<div class="ml-4 lg:hidden">Code</div>
        </a>
      </div>
      <a href="#nav" title="Open Menu" class="absolute right-4 flex peer-target:hidden lg:hidden h-16 w-16 items-center justify-center z-20">
        {{ Node('Icon', { icon: 'menu' }) }}
      </a>

      <a href="#" title="Close Menu" class="absolute right-4 hidden peer-target:flex lg:hidden lg:peer-target:hidden h-16 w-16 items-center justify-center text-primary-500 z-20">
        {{ Node('Icon', { icon: 'x' }) }}
      </a>
    </div>
  </nav>
{% endmacro %}