package nav

templ Header() {
	<header class="absolute top-0 left-0 right-0 z-50 flex items-center justify-between p-4 lg:p-6 w-full h-16">
		<nav class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" aria-label="Global">
			<div class="flex flex-1">
				<div class="flex flex-1">
					<a href="/" class="text-sm/6 font-semibold text-gray-900">Return Home <span aria-hidden="true">&rarr;</span></a>
				</div>
				<div class="flex lg:hidden">
					<button type="button" class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
						<span class="sr-only">Open main menu</span>
						<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
							<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
						</svg>
					</button>
				</div>
			</div>
			<a href="/" class="-m-1.5 p-1.5">
				<span class="sr-only">Sonr.ID</span>
				<sl-icon library="sonr" name="sonr" style="font-size: 32px; color: #17c2ff;"></sl-icon>
			</a>
			<div class="flex flex-1 justify-end gap-3"></div>
		</nav>
	</header>
}

templ NavFooter() {
	<footer class="flex items-center justify-center w-full h-16 bg-gradient-to-r from-cyan-700 to-cyan-300 px-4 py-2 rounded-xl">
		<div class="flex items-center gap-3">
			<sl-icon library="sonr" name="sonr-fill" class="w-8 h-8"></sl-icon>
			<h1 class="text-white text-2xl font-bold">Sonr.ID</h1>
		</div>
	</footer>
}