package nav

templ Navbar() {
	{{ navItems := getNavItems() }}
	<div x-data="{ open: false }">
		<header class="bg-crust">
			<div
				class="mx-auto flex h-16 max-w-screen-xl items-center gap-8
                px-4 sm:px-6 lg:px-8"
			>
				<a class="block" href="#">
					<!-- logo here -->
					<span class="text-3xl font-bold transition hover:text-green">
						<span class="hidden sm:inline">Project</span> Reshoot
					</span>
				</a>
				<div class="flex flex-1 items-center justify-end sm:justify-between">
					@navLeft(navItems)
					@navRight()
				</div>
			</div>
		</header>
		@sideNav(navItems)
	</div>
}