coworking-stream-guide/src/components/blocks/navBar.astro

---
import VerticalNav from "./verticalNav.astro";
---

<div
	transition:persist
	transition:name="navbar"
	class="w-full backdrop-blur fixed top-0 text-white bg-secondary/75 z-[60] text-lg py-3 h-[var(--header-height)]"
>
	<div
		class="mx-auto relative px-3 lg:px-8 max-w-7xl flex flex-row justify-between items-center gap-3"
	>
		<!-- Hamburger Icon -->
		<div
			class="lg:hidden flex items-center fixed z-30"
			transition:name="hamburger"
		>
			<button
				id="menu-toggle"
				type="button"
				class="text-white"
				transition:persist
			>
				<svg
					viewBox="0 0 100 80"
					width="30"
					height="30"
					fill="currentColor"
				>
					<rect width="100" height="15" rx="6" ry="6"></rect>
					<rect y="30" width="100" height="15" rx="6" ry="6"></rect>
					<rect y="60" width="100" height="15" rx="6" ry="6"></rect>
				</svg>
			</button>
		</div>
		<!-- Logo -->
		<div
			class="flex-1 flex items-center text-xl select-none ml-10 lg:ml-0"
			transition:name="cowo-logo"
		>
			<a
				href="/"
				class="no-target-blank no-underline text-white hover:no-underline"
			>
				Coworking <span class="font-bold">Guide</span>
			</a>
		</div>
		<!-- Navigation Links -->
		<div class="hidden lg:flex items-center gap-8" id="navbar-links">
			<a
				class="no-target-blank hover:text-black hover:bg-white rounded-md transition-colors duration-300 px-2 py-1 text-white hover:no-underline"
				href="/get-started/introduction">Get started</a
			>
			<a
				class="no-target-blank hover:text-black hover:bg-white rounded-md transition-colors duration-300 px-2 py-1 text-white hover:no-underline"
				href="/guide/general-tips">Guide</a
			>
			<a
				class="no-target-blank hover:text-black hover:bg-white rounded-md transition-colors duration-300 px-2 py-1 text-white hover:no-underline"
				href="/groups">Groups</a
			>
			<a
				class="no-target-blank hover:text-black hover:bg-white rounded-md transition-colors duration-300 px-2 py-1 text-white hover:no-underline"
				href="/blog">Blog</a
			>
			<a
				class="no-target-blank hover:text-black hover:bg-white rounded-md transition-colors duration-300 px-2 py-1 text-white hover:no-underline"
				href="/credits">Credits</a
			>
		</div>
		<!-- Theme Toggle (COMING SOON) -->
		<div class="flex lg:flex-1 justify-end"></div>
	</div>
</div>
<aside
	id="vertical-navbar"
	class="fixed block overflow-y-auto -translate-x-[200%] transition-transform duration-300 z-30 lg:hidden bg-[#151515] py-8 px-8 h-[calc(100vh-var(--header-height))] top-[--header-height]"
	transition:persist="vertical-nav-from-left"
>
	<VerticalNav showHome={true} />
</aside>

<script>
	function updateDarkModeIcon() {
		const darkModeToggle = document.querySelector("#theme-toggle");
		const isDarkMode = localStorage.getItem("theme") === "dark";
		const moonSVG = `
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
				<path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
			</svg>
			`;
		const sunSVG = `
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
				<path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
			</svg>
			`;

		if (darkModeToggle) {
			if (isDarkMode) {
				darkModeToggle.innerHTML = moonSVG;
			} else {
				darkModeToggle.innerHTML = sunSVG;
			}
		}
	}
	const darkModeToggle = document.querySelector("#theme-toggle");

	if (!localStorage.getItem("theme")) {
		localStorage.setItem("theme", "dark");
	}

	if (darkModeToggle) {
		darkModeToggle.addEventListener("click", () => {
			const isDarkMode = localStorage.getItem("theme") === "dark";

			if (isDarkMode) {
				localStorage.setItem("theme", "light");
				document.documentElement.setAttribute("data-theme", "light");
			} else {
				localStorage.setItem("theme", "dark");
				document.documentElement.setAttribute("data-theme", "dark");
			}

			updateDarkModeIcon();
		});
	}

	// JavaScript for toggling the menu
	document.addEventListener("DOMContentLoaded", function () {
		const menuToggle = document.querySelector("#menu-toggle");
		const verticalNavBar = document.querySelector("#vertical-navbar");
		if (menuToggle) {
			menuToggle.addEventListener("click", function () {
				if (verticalNavBar)
					verticalNavBar.classList.toggle("-translate-x-[200%]");
			});
		}

		// Close the menu when a link is clicked
		const navbarLinks = document.querySelectorAll("#vertical-navbar a");
		navbarLinks.forEach((link) => {
			link.addEventListener("click", function () {
				if (verticalNavBar)
					verticalNavBar.classList.add("-translate-x-[200%]");
			});
		});
	});
</script>