125 lines
3.7 KiB
Svelte
125 lines
3.7 KiB
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}
|