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>