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

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

<div
	class="w-full backdrop-blur fixed top-0 text-white bg-secondary/75 z-[60] text-lg py-3 h-[var(--header-height)]"
	data-pagefind-ignore
>
	<div
		class="mx-auto relative px-3 lg:px-8 max-w-7xl flex flex-row justify-between items-center gap-3"
	>
		<!-- Hamburger Icon -->
		<label
			class="hamburger-menu flex lg:hidden top-2 left-5"
			aria-label="Menu"
			transition:persist="hamburger-menu"
		>
			<input type="checkbox" aria-controls="navigation" />
		</label>
		<!-- Vertical Navbar -->
		<aside
			id="vertical-navbar"
			class="sidebar fixed block overflow-y-auto duration-300 z-[60] lg:hidden bg-[#151515] py-8 px-8 h-[calc(100vh-var(--header-height))] top-[--header-height] left-0 w-full"
			transition:persist="vertical-nav-from-left"
		>
			<VerticalNav showHome={true} />
		</aside>
		<!-- Logo -->
		<div
			class="lg:flex-1 flex items-center text-lg sm:text-3xl lg:text-xl select-none mx-auto lg:mx-0 my-auto"
			transition:name="cowo-logo"
			transition:persist
		>
			<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"
			transition:persist
			transition:name="navbar"
		>
			<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="/games">Games</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="/credits">Credits</a
			>
		</div>
		<!-- Search bar -->
		<div class="hidden lg:flex lg:flex-1 justify-end relative">
			<SearchModal id="searchModal" open="Open modal" />
		</div>
	</div>
</div>

<style is:global>
	:root {
		--pagefind-ui-scale: 1;
		--pagefind-ui-primary: #fff;
		--pagefind-ui-text: #fff;
		--pagefind-ui-background: #272727;
		--pagefind-ui-border: #505050;
		--pagefind-ui-tag: #fff;
		--pagefind-ui-border-width: 1px;
		--pagefind-ui-border-radius: 10px;
		--pagefind-ui-image-border-radius: 2px;
		--pagefind-ui-image-box-ratio: 2 / 1;
		--pagefind-ui-font: system-ui;

		--bar-width: 30px;
		--bar-height: 4px;
		--hamburger-gap: 6px;
		--foreground: white;
		--background: white;
		--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);

		flex-direction: column;
		gap: var(--hamburger-gap);
		width: max-content;
		position: absolute;
		z-index: 2;
		cursor: pointer;
	}

	.hamburger-menu:has(input:checked) {
		--foreground: white;
		--background: #333;
	}

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

	.hamburger-menu::before,
	.hamburger-menu::after,
	.hamburger-menu input {
		content: "";
		width: var(--bar-width);
		height: var(--bar-height);
		background-color: var(--foreground);
		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:has(input:checked)::before {
		rotate: 45deg;
		width: var(--x-width);
		translate: 0 calc(var(--bar-height) / -2);
	}

	.hamburger-menu:has(input:checked)::after {
		rotate: -45deg;
		width: var(--x-width);
		translate: 0 calc(var(--bar-height) / 2);
	}

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

	.sidebar {
		translate: -200%;
		margin: 0;
	}

	.hamburger-menu:has(input:checked) + #vertical-navbar {
		translate: 0;
	}
</style>

<script is:inline>
	const verticalNavBar = document.getElementById("vertical-navbar");
	const hamburgerMenu = document.querySelector(".hamburger-menu input");

	// JavaScript for toggling the menu
	document.addEventListener("DOMContentLoaded", function () {
		// Close the menu when a link is clicked
		const navbarLinks = document.querySelectorAll("#vertical-navbar a");

		navbarLinks.forEach((link) => {
			link.addEventListener("click", function () {
				if (verticalNavBar) hamburgerMenu.checked = false;
			});
		});

		// hamburger menu listen for checked
		hamburgerMenu.addEventListener("change", function () {
			if (verticalNavBar) {
				document.body.style.overflow = hamburgerMenu.checked
					? "hidden"
					: "auto";
			}
		});
	});

	document.addEventListener("astro:page-load", () => {
		// @ts-ignore
		new PagefindUI({
			element: "#searchModal-search",
			showSubResults: false,
			showEmptyFilters: false,
			debounceTimeoutMs: 0,
			showImages: false,
			autofocus: false,
		});

		if (hamburgerMenu) hamburgerMenu.checked = false;
	});
</script>