classquiz-ai/frontend/src/lib/navbar.svelte

<script>
	import '@fontsource/marck-script/index.css';
	import { getLocalization } from '$lib/i18n';
	import { signedIn } from '$lib/stores';

	const { t } = getLocalization();

	let openMenu = true;
	let closeMenu = false;
	let menuItems = false;
	const toggleMenu = () => {
		openMenu = !openMenu;
		closeMenu = !closeMenu;
		menuItems = !menuItems;
	};
</script>

<nav
	class="w-screen px-4 lg:px-10 py-2 flex flex-col lg:flex-row lg:items-center fixed backdrop-blur-sm bg-white/60 shadow-md z-50 top-0"
>
	<section class="w-full lg:w-max flex justify-between">
		<a href="/" class="font-black tracking-tight text-xl text-black marck-script link-hover"
			>ClassQuiz</a
		>

		<button
			class="lg:hidden"
			id="open-menu"
			on:click={toggleMenu}
			class:hidden={!openMenu}
			aria-label="Open navbar"
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				width="24"
				height="24"
				viewBox="0 0 24 24"
				fill="none"
				stroke="currentColor"
				stroke-width="2"
				stroke-linecap="round"
				stroke-linejoin="round"
				display="block"
				id="TextAlignJustified"
			>
				<path d="M3 6h18M3 12h18M3 18h18" />
			</svg>
		</button>

		<!-- Close menu -->
		<button
			class="hidden"
			id="close-menu"
			class:hidden={!closeMenu}
			on:click={toggleMenu}
			aria-label="Close navbar"
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				width="14"
				height="14"
				viewBox="0 0 24 24"
				fill="none"
				stroke="currentColor"
				stroke-width="3"
				stroke-linecap="round"
				stroke-linejoin="round"
				display="block"
				id="Cross"
			>
				<path d="M20 20L4 4m16 0L4 20" />
			</svg>
		</button>
	</section>

	<ul
		id="menu-items"
		class="lg:flex w-full flex-col lg:flex-row lg:pl-6"
		class:hidden={!menuItems}
	>
		{#if $signedIn}
			<li class="py-2">
				<a
					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
					href="/play">{$t('words.play')}</a
				>
			</li>
			<li class="py-2">
				<a
					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
					href="/overview">{$t('words.overview')}</a
				>
			</li>
			<li class="py-2">
				<a
					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
					href="/explore">Explore</a
				>
			</li>
			<li class="py-2">
				<a
					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
					href="/search">Search</a
				>
				<!--TODO: Add translation -->
			</li>
			<li class="py-2">
				<a
					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
					href="/api/v1/users/logout">{$t('words.logout')}</a
				>
			</li>
		{:else}
			<li class="py-2">
				<a
					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
					href="/play">{$t('words.play')}</a
				>
			</li>
			<li class="py-2">
				<a
					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
					href="/account/register">{$t('words.register')}</a
				>
			</li>

			<li class="py-2">
				<a
					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
					href="/account/login">{$t('words.login')}</a
				>
			</li>
			<li class="py-2">
				<a
					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
					href="/explore">Explore</a
				>
			</li>
			<li class="py-2">
				<a
					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
					href="/search">Search</a
				>
				<!--TODO: Add translation -->
			</li>
			<li class="py-2">
				<a
					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
					href="https://github.com/mawoka-myblock/classquiz">GitHub</a
				>
			</li>
			<li class="py-2">
				<a
					class="text-lg font-medium lg:px-4 text-gray-600 hover:text-green-600 link-hover"
					href="/docs">{$t('words.docs')}</a
				>
			</li>
		{/if}
	</ul>
</nav>