<nav class="w-full bg-primary">
	<div class="flex justify-between max-w-screen-2xl mx-auto px-2">
		<a href="/">
			<img src="{{ .Site.BaseURL }}images/vikunja-logo-white.svg" alt="{{ .Site.Title }}" class="h-10 my-2 ml-2 lg:ml-0"/>
		</a>
		<a class="block lg:hidden text-white p-3 pr-4 cursor-pointer navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
			<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>
		</a>
		<div class="text-white font-title font-semibold hidden lg:flex">
			{{ $currentNode := .Page }}{{ range .Site.Menus.page }}
				<a class="block h-full py-4 px-2 hover:bg-primary-darker {{ if $currentNode.IsMenuCurrent "page" . }}bg-primary-darker{{ end }}" href="{{ .URL }}">
					{{ .Name }}
				</a>
			{{ end }}
		</div>
	</div>

	<!-- Mobile Menu -->
	<div class="fixed hidden bg-black bg-opacity-50 top-0 bottom-0 left-0 right-0" id="navMenu">
		<div class="flex font-title font-semibold fixed flex-col w-3/4 bg-gray-100 h-screen">
			{{ $currentNode := .Page }}{{ range .Site.Menus.page }}
			<a class="block py-2 px-4 hover:bg-primary hover:text-white {{ if $currentNode.IsMenuCurrent "page" . }} bg-primary text-white {{ end }}" href="{{ .URL }}">
				{{ .Name }}
			</a>
			{{ end }}
		</div>
	</div>
</nav>
