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

<div class="w-full">
	<label
		class="fixed flex hamburger-menu bg-primary border-2 border-solid border-gray-100 p-2 rounded-lg"
	>
		<span class="top-bun"></span>
		<input type="checkbox" />
		<span class="bottom-bun"></span>
	</label>
	<aside class="sidebar flex z-20">
		<nav class="flex flex-col capitalize">
			<a
				class="sidebar-url px-5 py-2 mt-10 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
				href="/">home</a
			>
			<a
				class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
				href="/about">about</a
			>
			<a
				class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
				href="/tips">tips</a
			>
			<a
				class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
				href="/specs">specs</a
			>
			<a
				class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
				href="/bots">bots</a
			>
			<a
				class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
				href="/widgets">widgets</a
			>
		</nav>
	</aside>
	<div
		id="navbar"
		class="absolute top-0 w-full hidden md:flex justify-center bg-gray-800 shadow-md shadow-gray-900"
	>
		<div
			id="navbar-div"
			class="pt-2 mr-5 capitalize w-full pb-1 flex flex-row justify-center text-lg"
		>
			<a
				class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
				href="/">home</a
			>
			<a
				class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
				href="/about">about</a
			>
			<a
				class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
				href="/tips">tips</a
			>
			<a
				class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
				href="/specs">specs</a
			>
			<a
				class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
				href="/bots">bots</a
			>
			<a
				class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
				href="/widgets">widgets</a
			>
			<a
				class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
				href="/groups">groups</a
			>
		</div>
	</div>
</div>

<style>
	:root {
		--bar-width: 30px;
		--bar-height: 4px;
		--hamburger-gap: 6px;
		--foreground: #111827;
		--background: white;
		--hamburger-margin: 20px;
		--animation-timing: 200ms ease-in-out;
		--hamburger-height: calc(
			var(--bar-height) * 3 + var(--hamburger-gap) * 2
		);
	}

	.hamburger-menu {
		--x-width: calc(var(--hamburger-height) * 1.41421356237);

		translate: 0 -200px;
		flex-direction: column;

		gap: var(--hamburger-gap);
		width: max-content;
		top: var(--hamburger-margin);
		right: var(--hamburger-margin);
		z-index: 30;
		cursor: pointer;
		background: var(--foreground);

		rotate: 180deg;

		transition: translate var(--animation-timing);
	}

	.hamburger-menu input:focus-visible {
		border: 1px solid var(--background);
		box-shadow: 0 0 0 1px var(--foreground);
	}

	.hamburger-menu input,
	.hamburger-menu span {
		content: "";
		width: var(--bar-width);
		height: var(--bar-height);
		background-color: white;
		border-radius: 9999px;
		transform-origin: left center;
		transition: opacity var(--animation-timing),
			width var(--animation-timing), rotate var(--animation-timing),
			translate var(--animation-timing),
			background-color var(--animation-timing);
	}

	.hamburger-menu input {
		appearance: none;
		padding: 0;
		margin: 0;
		outline: none;
		pointer-events: none;
	}

	.hamburger-menu .top-bun.active {
		rotate: 45deg;
		width: var(--x-width);
		translate: 0 calc(var(--bar-height) / -2);
	}

	.hamburger-menu .bottom-bun.active {
		rotate: -45deg;
		width: var(--x-width);
		translate: 0 calc(var(--bar-height) / 2);
	}

	.hamburger-menu input:checked {
		opacity: 0;
		width: 0;
	}

	.sidebar {
		position: fixed;
		top: 0;
		right: 0;
		transition: translate var(--animation-timing);
		translate: 100%;
		padding: 0.5rem 1rem;
		padding-top: calc(
			var(--hamburger-height) + var(--hamburger-margin) + 1rem
		);
		background-color: var(--foreground);
		color: var(--background);
		max-width: 10rem;
		min-height: 100vh;
	}
</style>

<script defer is:inline>
	const sidebar = document.querySelectorAll(".sidebar-url");
	const hamburger = document.querySelector(".hamburger-menu");
	const checkbox = document.querySelector("input");

	const topBun = document.querySelector(".top-bun");
	const bottomBun = document.querySelector(".bottom-bun");

	const openSideBar = () => {
		checkbox.checked = true;
		document.querySelector(".sidebar").style.translate = "0";
		topBun.classList.add("active");
		bottomBun.classList.add("active");
	};

	const closeSideBar = () => {
		checkbox.checked = false;
		document.querySelector(".sidebar").style.translate = "100%";
		topBun.classList.remove("active");
		bottomBun.classList.remove("active");
	};

	// for each sidebar url, if clicked on, uncheck the checkbox
	sidebar.forEach((url) => {
		url.addEventListener("click", () => {
			closeSideBar();
		});
	});

	if (window.innerWidth < 768) {
		hamburger.style.translate = "0 0";
	}

	window.addEventListener("scroll", () => {
		if (window.scrollY > 50 || window.innerWidth < 768) {
			hamburger.style.translate = "0 0";
		} else {
			hamburger.style.translate = "0 -200px";
			closeSideBar();
		}
	});

	// if clicked outside of the hamburger menu, close the sidebar
	window.addEventListener("click", (e) => {
		if (
			e.target !== hamburger &&
			e.target !== topBun &&
			e.target !== bottomBun &&
			e.target !== checkbox &&
			e.target !== document.querySelector(".sidebar") &&
			e.target !== document.querySelector(".sidebar nav")
		) {
			closeSideBar();
		}
	});

	// if window is resized, check if it's less than 768px
	window.addEventListener("resize", () => {
		if (window.innerWidth < 768) {
			hamburger.style.translate = "0 0";
		} else {
			hamburger.style.translate = "0 -200px";
			closeSideBar();
		}
	});

	// if checked, translate the sidebar
	checkbox.addEventListener("change", () => {
		if (checkbox.checked) {
			openSideBar();
		} else {
			closeSideBar();
		}
	});
</script>