49 lines
2.2 KiB
Plaintext
49 lines
2.2 KiB
Plaintext
{% 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 %}
|