hackathon/web_src/lib/components/Navbar.svelte

<script lang="ts">
	import { fade } from 'svelte/transition';
	import { onMount } from 'svelte';
	import GoogleButton from './GoogleButton.svelte';
	import { auth } from '$lib/stores';

	let pages = [{ id: 'about', name: 'About', loc: '/about' }];

	let hidden = true;
	let loggedIn = false;

	$: {
		if ($auth.loggedIn()) {
			pages = [
				{ id: 'home', name: 'Home', loc: '/' },
				{ id: 'dashboard', name: 'Dashboard', loc: '/dashboard' },
				{ id: 'questions', name: 'Puzzles', loc: '/dashboard/questions' },
				{ id: 'leaderboard', name: 'Leaderboard', loc: '/dashboard/leaderboard' },
				{ id: 'logout', name: 'Log Out', loc: '/logout' }
			];
		}
	}

	const toggle = () => {
		hidden = !hidden;
	};

	onMount(() => {
		auth.subscribe((auth) => {
			loggedIn = auth.loggedIn();
		});
	});
</script>

<nav class="relative bg-white shadow-xl">
	<div class="h-16 flex justify-between items-center container mx-auto">
		{#if loggedIn}
			<a class="text-3xl font-bold leading-none ml-4 lg:ml-0" href="/dashboard" sveltekit:prefetch>
				<h2 class="text-lg">
					CodeQuest
					<sub class="text-xs font-medium tracking-tight">Alpha</sub>
				</h2>
			</a>
		{:else}
			<a class="text-3xl font-bold leading-none ml-4 lg:ml-0" href="/" sveltekit:prefetch>
				<h2 class="text-lg">
					CodeQuest
					<sub class="text-xs font-medium tracking-tight">Alpha</sub>
				</h2>
			</a>
		{/if}
		<div class="lg:hidden">
			<button on:click={toggle} class="flex items-center text-blue-600 p-3">
				<!-- prettier-ignore -->
				<svg class="block h-4 w-4 fill-current" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" > <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
			</button
			>
		</div>
		<ul class="hidden lg:flex lg:flex lg:items-center gap-1.5">
			{#each pages as p, i}
				<li>
					<a
						class="text-sm text-gray-600 hover:text-gray-800 hover:border-b hover:border-blue-500"
						href={p.loc}
					>
						{p.name}
					</a>
				</li>
				{#if i + 1 < pages.length || !loggedIn}
					<li class="text-gray-500">
						<!-- prettier-ignore -->
						<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" class="w-4 h-4 current-fill" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v0m0 7v0m0 7v0m0-13a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" /> </svg>
					</li>
				{/if}
			{/each}
			<li>
				{#if !loggedIn}
					<GoogleButton />
				{/if}
			</li>
		</ul>
	</div>
</nav>

{#if !hidden}
	<div class="relative z-50 -left-100" transition:fade={{ duration: 100 }}>
		<nav
			class="fixed top-0 left-0 bottom-0 flex flex-col w-5/6 max-w-[250px] py-6 px-6 bg-white border-r overflow-y-auto"
		>
			<div class="flex items-center mb-8">
				<a class="mr-auto text-3xl font-bold leading-none" href="/">
					<h2 class="text-lg">CodeQuest ALPHA</h2>
				</a>
				<button on:click={toggle}>
					<!-- prettier-ignore -->
					<svg class="h-6 w-6 text-gray-400 cursor-pointer hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg>
				</button>
			</div>
			<div>
				<ul>
					{#each pages as p}
						<li class="mb-1">
							<a
								class="block p-4 text-sm font-semibold text-gray-400 hover:bg-blue-50 hover:text-blue-600 rounded"
								href={p.loc}
								>{p.name}
							</a>
						</li>
					{/each}
				</ul>
			</div>
			<div class="mt-auto">
				<div class="pt-6">
					{#if !loggedIn}
						<GoogleButton />
					{/if}
				</div>
				<p class="my-4 text-xs text-center text-gray-400">
					<span>Copyright © 2021-2022</span>
				</p>
			</div>
		</nav>
	</div>
{/if}