<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>
