feat(client): sidebar for sprint 2 (#34)

Author: SporadicToast

client/src/assets/icons/menu.svg

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import './icon-styles.css';
+    import { IconColor, IconSize } from '../types.ts';
+    
+    export let color = IconColor.Default;
+    export let size = IconSize.Normal;
+    export let alt = '';
+
+    // Replace the next lines to generate an icon.
+	const iconUrl = new URL('../../assets/icons/menu.svg', import.meta.url);
+</script>
+
+<img class="{color} {size}" {alt} src="{iconUrl.pathname}" on:click on:keydown />

client/src/components/icons/Menu.svelte

@@ -0,0 +1,72 @@
+<script>
+    import active from 'svelte-spa-router/active';
+    export let show = false;
+</script>
+
+<nav class:show={show}>
+    <section>
+        <a href="#/inbox" use:active>Inbox</a>
+        <a href="#/outbox" use:active>Outbox</a>
+        <a href="#/drafts" use:active>Drafts</a>
+        <a href="#/barcodes" use:active>Manage Barcodes</a>
+        <a href="#/invites" use:active>Manage Invites</a>
+        <a href="#/staff" use:active>Manage Staff</a>
+        <a href="#/admin" use:active>Manage Administrators</a>
+        <a href="#/metrics" use:active>Metrics</a>
+        <a href="#/settings" use:active>Settings</a>
+    </section>
+    <form method="POST" action="/auth/logout">
+        <input type="submit" value="Logout" />
+    </form>
+</nav>
+
+<style>
+    @import url('../../../pages/vars.css');
+
+    nav {
+        background-color: var(--dashboard-bg);
+        display: flex;
+        flex-direction: column;
+        font-family: inherit;
+        height: 100%;
+        justify-content: space-between;
+        max-width: 300px;
+        left: -100%;
+        position: absolute;
+        transition: left var(--animation-length);
+    }
+
+    .show {
+        left: 0;
+    }
+  
+    a {
+        border-right: var(--spacing-small) solid transparent;
+        color: initial;
+        display: block;
+        padding: var(--spacing-normal);
+        text-decoration: none;
+        transition: background-color var(--animation-length), border-right var(--animation-length);
+    }
+
+    input[type="submit"] {
+        background-color: var(--dashboard-bg);
+        border-top: 0;
+        border-bottom: 0;
+        border-left: 0;
+        border-right: var(--spacing-small) solid transparent;
+        cursor: pointer;
+        font-family: inherit;
+        margin: 0;
+        outline: 0;
+        padding: var(--spacing-normal);
+        text-align: initial;
+        transition: background-color var(--animation-length), border-right var(--animation-length);
+        width: 100%;
+    }
+
+    a:hover, input[type="submit"]:hover, :global(a.active) {
+        background-color: var(--hover-color);
+        border-right: var(--spacing-small) solid var(--primary-color);
+    }
+</style>

client/src/components/ui/Navbar.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    import type { User } from '../../../../../model/src/user.ts';
+
+    import Hamburger from '../../icons/Menu.svelte';
+
+    export let show = false;
+    export let user: User;
+</script>
+
+<nav>
+    <div>
+        <span id="icon"><Hamburger on:click={() => show = !show} /></span>
+        <span>Hello, {user.name}!</span>
+    </div>
+    <img src={user.picture} alt="{user.name}" />
+</nav>
+
+<style>
+    @import url('../../../pages/vars.css');
+
+    nav {
+        align-content: center;
+        background-color: var(--primary-color);
+        box-shadow: 0 1px var(--spacing-normal) var(--shadow-color);
+        display: flex;
+        justify-content: space-between;
+        padding: var(--spacing-small);
+    }
+
+    #icon {
+        cursor: pointer;
+    }
+
+    img {
+        border-radius: 50%;
+        display: block;
+        height: 1.25rem;
+    }
+</style>

client/src/components/ui/navigationbar/SideDrawer.svelte

@@ -1,22 +1,41 @@
-<script lang="ts">
-    import Router, { push, pop, replace } from 'svelte-spa-router';
+<script>
+    import Router from 'svelte-spa-router';
 
+    import TopBar from '../../components/ui/navigationbar/TopBar.svelte';
+    import SideDrawer from '../../components/ui/navigationbar/SideDrawer.svelte';
+
+    import routes from './views/index.ts';
     import { register } from '../register.ts';
     import { Session } from '../../api/session.ts';
-    import Navbar from '../../components/ui/Navbar.svelte';
-    import Button from '../../components/ui/Button.svelte'
 
-    import routes from './routes.ts';
+    let toggleDrawer = false;
 </script>
+
 <main>
     {#await register()}
         Waiting for service worker...
     {:then}
-        <Navbar />
-        <!-- Sample navigation of pages. Implement in drawer
-        <Button on:click={() => push('/inbox')}>Inbox</Button>
-        <Button on:click={() => push('/outbox')}>Outbox</Button>
-        -->
-        <Router {routes} />
+        {#await Session.getUser()}
+            Loading user...
+        {:then user}
+            <TopBar {user} bind:show={toggleDrawer} />
+            <section>
+                <SideDrawer show={toggleDrawer} />
+                <Router {routes} />
+            </section>
+        {/await}
     {/await}
 </main>
+
+<style>
+    main {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    section {
+        height: 100%;
+        position: relative;
+    }
+</style>

client/src/components/ui/navigationbar/TopBar.svelte

@@ -4,6 +4,7 @@
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="manifest" href="../manifest.json" />
+        <link rel="stylesheet" href="../global.css" />
         <script src="index.ts" type="module"></script>
         <title>Dashboard</title>
     </head>

client/src/pages/dashboard/Dashboard.svelte

@@ -0,0 +1 @@
+<p>Manage Admins!</p>

client/src/pages/dashboard/index.html

@@ -1,10 +1 @@
-<div>
-  <p>Barcodes</p>
-</div>
-
-
-<style>
-  div{
-    text-align: center;
-  }
-</style>
+<p>Barcodes!</p>