eb2-website/src/lib/Navigation.svelte

<script>
	/**
	 * @type {boolean}
	 */
	export let open;
	import logo from '$lib/assets/logo_black.svg';
	import { page } from '$app/stores';
</script>

<nav class="flex flex-wrap items-center justify-center py-6  bg-white mx-auto sticky top-0 z-50">
	<div class="container flex flex-wrap items-center justify-between xl:max-w-screen-xl px-3">
		<div class="w-full relative flex justify-between xl:w-auto xl:static xl:block xl:justify-start">
			<a
				class="text-sm leading-relaxed flex items-center justify-center"
				href="/"
				on:click={() => (open = false)}
			>
				<img src={logo} alt="logo" class="w-[145px] h-[54px] md:mr-14 ml-4 md:ml-0" />
			</a>
			<button
				class="text-black cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block xl:hidden outline-none focus:outline-none"
				type="button"
				on:click={() => (open = !open)}
			>
				☰
			</button>
		</div>

		<div class={open ? 'block w-full' : 'xl:flex flex-grow items-center hidden'} id="navbar">

			<div class="flex flex-grow items-center">
				<ul
					class="flex flex-col xl:flex-row xl:flex-grow-0 xl:mt-0 list-none xl:ml-auto text-base flex-grow my-8 xl:my-0"
				>
					<li>
						<a
							href="/"
							class="px-5 py-2 flex items-center leading-snug text-black hover:opacity-75"
							on:click={() => (open = false)}
							class:active={$page.url.pathname === '/'}>Home</a
						>
					</li>
					<li>
						<a
							href="/venues"
							class="px-5 py-2 flex items-center leading-snug text-black hover:opacity-75"
							on:click={() => (open = false)}
							class:active={$page.url.pathname === '/venues/'}>Venue</a
						>
					</li>
					<li>
						<a
							href="/schedule"
							class="px-5 py-2 flex items-center leading-snug text-black hover:opacity-75"
							on:click={() => (open = false)}
							class:active={$page.url.pathname === '/schedule/'}>Schedule</a
						>
					</li>
					<li>
						<a
							href="/manual"
							class="px-5 py-2 flex items-center leading-snug text-black hover:opacity-75"
							on:click={() => (open = false)}
							class:active={$page.url.pathname === '/manual/'}>Hacker Manual</a
						>
					</li>
					<li>
						<a
							href="/contributors"
							class="px-5 py-2 flex items-center leading-snug text-black hover:opacity-75"
							on:click={() => (open = false)}
							class:active={$page.url.pathname.match(/^\/contributors\//)}>Contributors</a
						>
					</li>

					<li>
						<a
							href="https://matrix.ethbrno.cz"
							rel="noopener noreferrer"
							target="_blank"
							on:click={() => (open = false)}
							class="px-5 py-2 flex items-center leading-snug text-black hover:opacity-75 external"
							>Chat</a
						>
					</li>
					<li class="pl-0 xl:pl-5">
						<a
							href="https://join.ethbrno.cz"
							rel="noopener noreferrer"
							target="_blank"
							on:click={() => (open = false)}
							class="px-5 py-2 flex items-center bg-black text-white leading-snug hover:opacity-75 external"
							>Join</a
						>
					</li>
				</ul>
			</div>
		</div>
	</div>
</nav>