theme/layouts/partials/navbar-light.html

58 lines
1.4 KiB
HTML

<nav class="w-full">
<div class="mx-auto flex max-w-screen-2xl justify-between px-2">
<span></span>
<button
class="navbar-burger block cursor-pointer p-3 pr-4 lg:hidden"
data-target="navMenu"
aria-label="Open Menu"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
<div class="hidden font-title font-semibold text-gray-700 lg:flex">
{{ $currentNode := .Page }}{{ range .Site.Menus.page }}
<a
class="{{ if $currentNode.IsMenuCurrent "page" . }}
text-primary
{{ end }} block h-full py-4 px-2 hover:text-primary"
href="{{ .URL }}"
>
{{ .Name }}
</a>
{{ end }}
</div>
</div>
<!-- Mobile Menu -->
<div
class="fixed top-0 bottom-0 left-0 right-0 hidden bg-black bg-opacity-50"
id="navMenu"
aria-expanded="false"
>
<div class="fixed flex h-screen w-3/4 flex-col bg-gray-100 font-title font-semibold">
{{ $currentNode := .Page }}{{ range .Site.Menus.page }}
<a
class="{{ if $currentNode.IsMenuCurrent "page" . }}
bg-primary text-white
{{ end }} block py-2 px-4 hover:bg-primary hover:text-white"
href="{{ .URL }}"
>
{{ .Name }}
</a>
{{ end }}
</div>
</div>
</nav>