From c2d8cff6f0b45eddd6f8b920b277651d854f5aee Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Wed, 15 Mar 2023 10:18:00 +0800
Subject: [PATCH 01/36] feat(client): show navbar buttons; elements are using
 CSS flexbox

---
 client/src/components/ui/Navbar.svelte | 49 +++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 5 deletions(-)

diff --git a/client/src/components/ui/Navbar.svelte b/client/src/components/ui/Navbar.svelte
index 024e3dbda..8e5ce3229 100644
--- a/client/src/components/ui/Navbar.svelte
+++ b/client/src/components/ui/Navbar.svelte
@@ -1,10 +1,25 @@
 <script lang="ts">
     import { Session } from '../../api/session.ts';
+    import { onMount } from "svelte";
 
     import Button from '../../components/ui/Button.svelte';
     import Logout from '../../components/icons/Logout.svelte';
 
     import { ButtonType } from '../../components/types.ts';
+
+    let mobile = false;
+
+    // TODO: Updates based on permissions
+    const navItems = [
+        { label: "logo", href: "#" },
+        { label: "Item 1", href: "#" },
+        { label: "Item 2", href: "#" },
+        { label: "Item 3", href: "#" },
+        { label: "Item 4", href: "#" },
+        { label: "Item 5", href: "#" },
+        { label: "Item 6", href: "#" },
+        { label: "Item 7", href: "#" }
+    ];
 </script>
 
 <nav>
@@ -15,11 +30,15 @@
             Hello, {user.name}!
         {/await}
     </p>
-    <div>
-        <form method="POST" action="/auth/logout">
-            <input type="submit" value="Logout" />
-        </form>
-    </div>
+        <ul class="navelements">
+            {#each navItems as item}
+                <li><a href={item.href} class="navitem">item.label</a></li>
+            {/each}
+            <li><form method="POST" action="/auth/logout" class="navitem">
+                    <input type="submit" value="Logout" />
+                </form>
+            </li>
+        </ul>
 </nav>
 
 <style>
@@ -27,10 +46,30 @@
         display: flex;
         background-color: blueviolet;
         justify-content: space-between;
+        align-items: flex-start;
+        box-shadow: 0 1px 8px #ddd;
         padding: 0.5rem;
         position: sticky;
     }
 
+    .navelements {
+        display: flex;
+        justify-content: flex-end;
+        list-style-type: none;
+        align-items: stretch;
+    }
+    
+    .navitem {
+        list-style: none;
+        padding: 1em;
+        display: inline-block;
+    }
+
+    .navitem:hover {
+        background-color: blue;
+    }
+    
+
     p {
         margin: 0;
     }

From 64ab4b67895398b9fe2047b494c842ea0b1633ab Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Wed, 15 Mar 2023 11:01:49 +0800
Subject: [PATCH 02/36] fix(client): navbar components now reflect the ones
 from the prototype

---
 client/src/components/ui/Navbar.svelte | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/client/src/components/ui/Navbar.svelte b/client/src/components/ui/Navbar.svelte
index 8e5ce3229..5a720f9ba 100644
--- a/client/src/components/ui/Navbar.svelte
+++ b/client/src/components/ui/Navbar.svelte
@@ -11,14 +11,15 @@
 
     // TODO: Updates based on permissions
     const navItems = [
-        { label: "logo", href: "#" },
-        { label: "Item 1", href: "#" },
-        { label: "Item 2", href: "#" },
-        { label: "Item 3", href: "#" },
-        { label: "Item 4", href: "#" },
-        { label: "Item 5", href: "#" },
-        { label: "Item 6", href: "#" },
-        { label: "Item 7", href: "#" }
+        { label: "Inbox", href: "#" },
+        { label: "Outbox", href: "#" },
+        { label: "Drafts", href: "#" },
+        { label: "Barcodes", href: "#" },
+        { label: "Metrics", href: "#" },
+        { label: "Manage Invites", href: "#" },
+        { label: "Manage Staff", href: "#" },
+        { label: "Manage Administrators", href: "#" },
+        { label: "Manage Global Settings", href: "#" },
     ];
 </script>
 
@@ -32,7 +33,7 @@
     </p>
         <ul class="navelements">
             {#each navItems as item}
-                <li><a href={item.href} class="navitem">item.label</a></li>
+                <li><a href={item.href} class="navitem">{item.label}</a></li>
             {/each}
             <li><form method="POST" action="/auth/logout" class="navitem">
                     <input type="submit" value="Logout" />
@@ -48,7 +49,6 @@
         justify-content: space-between;
         align-items: flex-start;
         box-shadow: 0 1px 8px #ddd;
-        padding: 0.5rem;
         position: sticky;
     }
 
@@ -62,6 +62,8 @@
     .navitem {
         list-style: none;
         padding: 1em;
+        background: none;
+        text-decoration: none;
         display: inline-block;
     }
 

From 5b613285c71e6efbe6314443b956ada7b4117b9c Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Wed, 15 Mar 2023 11:31:37 +0800
Subject: [PATCH 03/36] feat(client): add media query to detect if the user is
 using desktop or mobile

---
 client/src/components/MediaQuery.svelte | 40 +++++++++++++++++++++++++
 client/src/components/ui/Navbar.svelte  | 32 ++++++++++++--------
 2 files changed, 59 insertions(+), 13 deletions(-)
 create mode 100644 client/src/components/MediaQuery.svelte

diff --git a/client/src/components/MediaQuery.svelte b/client/src/components/MediaQuery.svelte
new file mode 100644
index 000000000..37a1c32ae
--- /dev/null
+++ b/client/src/components/MediaQuery.svelte
@@ -0,0 +1,40 @@
+<!-- Source code of this class is from https://svelte.dev/repl/26eb44932920421da01e2e21539494cd?version=3.56.0-->
+<script>
+    import { onMount } from "svelte";
+
+    export let query;
+
+    let mql;
+    let mqlListener;
+    let wasMounted = false;
+    let matches = false;
+
+    onMount(() => {
+        wasMounted = true;
+        return () => {
+            removeActiveListener();
+        };
+    });
+
+    $: {
+        if (wasMounted) {
+            removeActiveListener();
+            addNewListener(query);
+        }
+    }
+
+    function addNewListener(query) {
+        mql = window.matchMedia(query);
+        mqlListener = v => matches = v.matches;
+        mql.addListener(mqlListener);
+        matches = mql.matches;
+    }
+
+    function removeActiveListener() {
+        if (mql && mqlListener) {
+            mql.removeListener(mqlListener);
+        }
+    }
+</script>
+
+<slot {matches} />
diff --git a/client/src/components/ui/Navbar.svelte b/client/src/components/ui/Navbar.svelte
index 5a720f9ba..b466d96d7 100644
--- a/client/src/components/ui/Navbar.svelte
+++ b/client/src/components/ui/Navbar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Session } from '../../api/session.ts';
-    import { onMount } from "svelte";
+    import MediaQuery from "./../MediaQuery.svelte";
 
     import Button from '../../components/ui/Button.svelte';
     import Logout from '../../components/icons/Logout.svelte';
@@ -21,26 +21,28 @@
         { label: "Manage Administrators", href: "#" },
         { label: "Manage Global Settings", href: "#" },
     ];
-</script>
 
-<nav>
+</script>
+<MediaQuery query="(max-width: 768px)" let:matches>
+<nav class="{matches ? 'mobile' : ''}">
     <p>
         {#await Session.getUser()}
             Hello!
         {:then user}
-            Hello, {user.name}!
+            Hello, {user.name}! {matches ? `(Mobile)` : `(Desktop)`}
         {/await}
     </p>
-        <ul class="navelements">
-            {#each navItems as item}
-                <li><a href={item.href} class="navitem">{item.label}</a></li>
-            {/each}
-            <li><form method="POST" action="/auth/logout" class="navitem">
-                    <input type="submit" value="Logout" />
-                </form>
-            </li>
-        </ul>
+    <ul class="navelements">
+        {#each navItems as item}
+            <li><a href={item.href} class="navitem">{item.label}</a></li>
+        {/each}
+        <li><form method="POST" action="/auth/logout" class="navitem">
+                <input type="submit" value="Logout" />
+            </form>
+        </li>
+    </ul>
 </nav>
+</MediaQuery>
 
 <style>
     nav {
@@ -69,8 +71,12 @@
 
     .navitem:hover {
         background-color: blue;
+        transition: all 0.3s ease 0s;
     }
     
+    .mobile {
+        background-color: green;
+    }
 
     p {
         margin: 0;

From cbb44067765e81144403503342956e7b8b2ffe92 Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Wed, 15 Mar 2023 16:32:54 +0800
Subject: [PATCH 04/36] feat(client): prepare transition to CSS grid, dummy
 subpages

---
 client/src/components/ui/Navbar.svelte        | 68 ++++++++++---------
 client/src/pages/subpages/Barcodes.svelte     |  0
 client/src/pages/subpages/Drafts.svelte       |  0
 client/src/pages/subpages/Inbox.svelte        |  3 +
 client/src/pages/subpages/Invites.svelte      |  0
 client/src/pages/subpages/ManageAdmins.svelte |  0
 .../src/pages/subpages/ManageSettings.svelte  |  0
 client/src/pages/subpages/ManageStaff.svelte  |  0
 client/src/pages/subpages/Metrics.svelte      |  0
 client/src/pages/subpages/Outbox.svelte       |  3 +
 10 files changed, 41 insertions(+), 33 deletions(-)
 create mode 100644 client/src/pages/subpages/Barcodes.svelte
 create mode 100644 client/src/pages/subpages/Drafts.svelte
 create mode 100644 client/src/pages/subpages/Inbox.svelte
 create mode 100644 client/src/pages/subpages/Invites.svelte
 create mode 100644 client/src/pages/subpages/ManageAdmins.svelte
 create mode 100644 client/src/pages/subpages/ManageSettings.svelte
 create mode 100644 client/src/pages/subpages/ManageStaff.svelte
 create mode 100644 client/src/pages/subpages/Metrics.svelte
 create mode 100644 client/src/pages/subpages/Outbox.svelte

diff --git a/client/src/components/ui/Navbar.svelte b/client/src/components/ui/Navbar.svelte
index b466d96d7..a030126fd 100644
--- a/client/src/components/ui/Navbar.svelte
+++ b/client/src/components/ui/Navbar.svelte
@@ -11,54 +11,54 @@
 
     // TODO: Updates based on permissions
     const navItems = [
-        { label: "Inbox", href: "#" },
-        { label: "Outbox", href: "#" },
-        { label: "Drafts", href: "#" },
-        { label: "Barcodes", href: "#" },
-        { label: "Metrics", href: "#" },
-        { label: "Manage Invites", href: "#" },
-        { label: "Manage Staff", href: "#" },
-        { label: "Manage Administrators", href: "#" },
-        { label: "Manage Global Settings", href: "#" },
+        { label: "Inbox", href: "#inbox" },
+        { label: "Outbox", href: "#outbox" },
+        { label: "Drafts", href: "#drafts" },
+        { label: "Barcodes", href: "#barcodes" },
+        { label: "Metrics", href: "#metrics" },
+        { label: "Manage Invites", href: "#invites" },
+        { label: "Manage Staff", href: "#staff" },
+        { label: "Manage Administrators", href: "#admins" },
+        { label: "Manage Global Settings", href: "#globalsettings" },
     ];
 
 </script>
 <MediaQuery query="(max-width: 768px)" let:matches>
-<nav class="{matches ? 'mobile' : ''}">
-    <p>
-        {#await Session.getUser()}
-            Hello!
-        {:then user}
-            Hello, {user.name}! {matches ? `(Mobile)` : `(Desktop)`}
-        {/await}
-    </p>
-    <ul class="navelements">
-        {#each navItems as item}
-            <li><a href={item.href} class="navitem">{item.label}</a></li>
-        {/each}
-        <li><form method="POST" action="/auth/logout" class="navitem">
-                <input type="submit" value="Logout" />
-            </form>
-        </li>
-    </ul>
-</nav>
+<div>
+    <nav class="{matches ? 'mobile' : ''}">
+        <p class="profile">
+            {#await Session.getUser()}
+                Hello!
+            {:then user}
+                Hello, {user.name}! {matches ? `(Mobile)` : `(Desktop)`}
+            {/await}
+        </p>
+        <ul class="navelements">
+            {#each navItems as item}
+                <li><a href={item.href} class="navitem">{item.label}</a></li>
+            {/each}
+            <li><form method="POST" action="/auth/logout" class="navitem">
+                    <input type="submit" value="Logout" />
+                </form>
+            </li>
+        </ul>
+    </nav>
+</div>
 </MediaQuery>
 
 <style>
     nav {
-        display: flex;
         background-color: blueviolet;
-        justify-content: space-between;
-        align-items: flex-start;
         box-shadow: 0 1px 8px #ddd;
         position: sticky;
     }
 
     .navelements {
         display: flex;
-        justify-content: flex-end;
+        flex-direction: row-reverse;
+        flex-flow: row wrap;
+        justify-content: space-around;
         list-style-type: none;
-        align-items: stretch;
     }
     
     .navitem {
@@ -66,6 +66,7 @@
         padding: 1em;
         background: none;
         text-decoration: none;
+        background-color: pink;
         display: inline-block;
     }
 
@@ -78,7 +79,8 @@
         background-color: green;
     }
 
-    p {
+    .profile {
+        display: inline-block;
         margin: 0;
     }
 </style>
diff --git a/client/src/pages/subpages/Barcodes.svelte b/client/src/pages/subpages/Barcodes.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/pages/subpages/Drafts.svelte b/client/src/pages/subpages/Drafts.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/pages/subpages/Inbox.svelte b/client/src/pages/subpages/Inbox.svelte
new file mode 100644
index 000000000..155e674a8
--- /dev/null
+++ b/client/src/pages/subpages/Inbox.svelte
@@ -0,0 +1,3 @@
+<p>
+    Inbox!
+</p>
\ No newline at end of file
diff --git a/client/src/pages/subpages/Invites.svelte b/client/src/pages/subpages/Invites.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/pages/subpages/ManageAdmins.svelte b/client/src/pages/subpages/ManageAdmins.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/pages/subpages/ManageSettings.svelte b/client/src/pages/subpages/ManageSettings.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/pages/subpages/ManageStaff.svelte b/client/src/pages/subpages/ManageStaff.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/pages/subpages/Metrics.svelte b/client/src/pages/subpages/Metrics.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/client/src/pages/subpages/Outbox.svelte b/client/src/pages/subpages/Outbox.svelte
new file mode 100644
index 000000000..fb12177ae
--- /dev/null
+++ b/client/src/pages/subpages/Outbox.svelte
@@ -0,0 +1,3 @@
+<p>
+    Outbox!
+</p>
\ No newline at end of file

From b53ed211d295db4cb4712eebbe9f0052694585c2 Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Sun, 19 Mar 2023 01:32:19 +0800
Subject: [PATCH 05/36] feat(client): navbar buttons now routes to pages

---
 .../{MediaQuery.svelte => ui/NavQuery.svelte} |  0
 client/src/components/ui/Navbar.svelte        | 32 +++++++++++--------
 client/src/pages/dashboard/Dashboard.svelte   |  2 +-
 3 files changed, 19 insertions(+), 15 deletions(-)
 rename client/src/components/{MediaQuery.svelte => ui/NavQuery.svelte} (100%)

diff --git a/client/src/components/MediaQuery.svelte b/client/src/components/ui/NavQuery.svelte
similarity index 100%
rename from client/src/components/MediaQuery.svelte
rename to client/src/components/ui/NavQuery.svelte
diff --git a/client/src/components/ui/Navbar.svelte b/client/src/components/ui/Navbar.svelte
index 067295d2e..81d924b7c 100644
--- a/client/src/components/ui/Navbar.svelte
+++ b/client/src/components/ui/Navbar.svelte
@@ -1,29 +1,32 @@
 <script lang="ts">
     import { Session } from '../../api/session.ts';
-    import MediaQuery from "./../MediaQuery.svelte";
+    import NavQuery from "./NavQuery.svelte";
 
     import Button from '../../components/ui/Button.svelte';
     import Logout from '../../components/icons/Logout.svelte';
 
     import { ButtonType } from '../../components/types.ts';
 
+    import Router, { push, pop, replace } from 'svelte-spa-router';
+    import routes from '../../pages/dashboard/routes.ts';
+
     let mobile = false;
 
     // TODO: Updates based on permissions
     const navItems = [
-        { label: "Inbox", href: "#inbox" },
-        { label: "Outbox", href: "#outbox" },
-        { label: "Drafts", href: "#drafts" },
-        { label: "Barcodes", href: "#barcodes" },
-        { label: "Metrics", href: "#metrics" },
-        { label: "Manage Invites", href: "#invites" },
-        { label: "Manage Staff", href: "#staff" },
-        { label: "Manage Administrators", href: "#admins" },
-        { label: "Manage Global Settings", href: "#globalsettings" },
+        { label: "Inbox", href: "inbox", key:'I' },
+        { label: "Outbox", href: "outbox", key:'O' },
+        { label: "Drafts", href: "drafts", key:'D' },
+        { label: "Barcodes", href: "barcodes", key:'B' },
+        { label: "Metrics", href: "metrics", key:'M' },
+        { label: "Manage Invites", href: "manage-invites", key:'N' },
+        { label: "Manage Staff", href: "manage-staff", key:'S' },
+        { label: "Manage Administrators", href: "manage-administrators", key:'A' },
+        { label: "Manage Global Settings", href: "manage-global-settings", key:'G' }, 
     ];
 
 </script>
-<MediaQuery query="(max-width: 768px)" let:matches>
+<NavQuery query="(max-width: 768px)" let:matches>
 <nav class="navelements{matches ? ' mobile' : ''}">
     <p class="profile">
         {#await Session.getUser()}
@@ -32,15 +35,16 @@
             Hello, {user.name}! {matches ? `(Mobile)` : `(Desktop)`}
         {/await}
     </p>
-        {#each navItems as item}
-            <div><a href={item.href} class="navitem">{item.label}</a></div>
+        {#each navItems as item} 
+            <div><button class="navitem" on:click={() => push(`/${item.href}`)}>{item.label}</button></div>
         {/each}
         <div><form method="POST" action="/auth/logout" class="navitem">
                 <input type="submit" value="Logout" />
             </form>
         </div>
 </nav>
-</MediaQuery>
+<Router {routes} />
+</NavQuery>
 
 <style>
     nav {
diff --git a/client/src/pages/dashboard/Dashboard.svelte b/client/src/pages/dashboard/Dashboard.svelte
index 9b223cb2e..74b1663fd 100644
--- a/client/src/pages/dashboard/Dashboard.svelte
+++ b/client/src/pages/dashboard/Dashboard.svelte
@@ -16,7 +16,7 @@
         <!-- Sample navigation of pages. Implement in drawer
         <Button on:click={() => push('/inbox')}>Inbox</Button>
         <Button on:click={() => push('/outbox')}>Outbox</Button>
-        -->
         <Router {routes} />
+        -->
     {/await}
 </main>

From 30ca4d8f2719c2be907a34a1215eb2394c11f1b4 Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Tue, 21 Mar 2023 11:10:28 +0800
Subject: [PATCH 06/36] feat(client): see changlogs - fixed padding on buttons
 - navquery adjusted to change to mobile on a larger screen - non-functioning
 profile button

---
 client/src/components/ui/NavPicture.svelte  | 25 +++++++++
 client/src/components/ui/Navbar.svelte      | 56 +++++++++++++--------
 client/src/pages/dashboard/Dashboard.svelte |  2 +-
 3 files changed, 61 insertions(+), 22 deletions(-)
 create mode 100644 client/src/components/ui/NavPicture.svelte

diff --git a/client/src/components/ui/NavPicture.svelte b/client/src/components/ui/NavPicture.svelte
new file mode 100644
index 000000000..29d2e4a60
--- /dev/null
+++ b/client/src/components/ui/NavPicture.svelte
@@ -0,0 +1,25 @@
+<script>
+    export let name; 
+    export let email;
+</script>
+
+<div>
+    <div class="profilepicture"><p>{name[0]}</p></div>
+    <p style="float: left; user-select: none;">{name.split(" ")[name.split(" ").length-1]}</p>
+</div>
+
+<style>
+
+    .profilepicture {
+        border-radius: 50%;
+        background-color: white;
+        border: 10px;
+        text-align: center;
+        width: 30pt;
+        height: 30pt;
+    }
+
+    .profilepicture:checked {
+        background-color: red;
+    }
+</style>
\ No newline at end of file
diff --git a/client/src/components/ui/Navbar.svelte b/client/src/components/ui/Navbar.svelte
index 81d924b7c..b8aa9b7d7 100644
--- a/client/src/components/ui/Navbar.svelte
+++ b/client/src/components/ui/Navbar.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
     import { Session } from '../../api/session.ts';
-    import NavQuery from "./NavQuery.svelte";
+    import NavQuery from './NavQuery.svelte';
+    import NavPicture from './NavPicture.svelte';
 
     import Button from '../../components/ui/Button.svelte';
     import Logout from '../../components/icons/Logout.svelte';
 
     import { ButtonType } from '../../components/types.ts';
 
+    
+
     import Router, { push, pop, replace } from 'svelte-spa-router';
     import routes from '../../pages/dashboard/routes.ts';
 
@@ -26,22 +29,22 @@
     ];
 
 </script>
-<NavQuery query="(max-width: 768px)" let:matches>
+
+<NavQuery query="(max-width: 1024px)" let:matches>
 <nav class="navelements{matches ? ' mobile' : ''}">
-    <p class="profile">
-        {#await Session.getUser()}
-            Hello!
-        {:then user}
-            Hello, {user.name}! {matches ? `(Mobile)` : `(Desktop)`}
-        {/await}
-    </p>
+    {#await Session.getUser()}
+        Hello!
+    {:then user}
+        <div class="picturecontainer">
+            <NavPicture name={user.name} email={user.email}  />
+        </div>
+    {/await}
         {#each navItems as item} 
             <div><button class="navitem" on:click={() => push(`/${item.href}`)}>{item.label}</button></div>
         {/each}
-        <div><form method="POST" action="/auth/logout" class="navitem">
-                <input type="submit" value="Logout" />
-            </form>
-        </div>
+        <form method="POST" action="/auth/logout" class="navitem">
+            <input type="submit" value="Logout" />
+        </form>
 </nav>
 <Router {routes} />
 </NavQuery>
@@ -51,9 +54,23 @@
         background-color: var(--secondary-color);
         box-shadow: 0 1px 8px #ddd;
         padding: var(--spacing-small);
+        justify-content: space-evenly;
         position: sticky;
     }
 
+    .picturecontainer {
+        position: fixed;
+        top: 10;
+        left: 10;
+    }
+
+    button {
+        padding: 0;
+        border: 0;
+        outline: 0;
+        background-color: transparent;
+    }
+
     .navelements {
         display: flex;
         flex-direction: row-reverse;
@@ -65,24 +82,21 @@
     .navitem {
         list-style: none;
         padding: 1em;
+        height: 50pt;
         background: none;
         text-decoration: none;
-        background-color: pink;
+        user-select: none;
+        color: var(--primary-color);
         display: inline-block;
     }
 
     .navitem:hover {
-        background-color: blue;
+        background-color: var(--danger-color);
         transition: all 0.3s ease 0s;
     }
     
+    
     .mobile {
         background-color: green;
     }
-
-    .profile {
-        display: inline-block;
-        size: 20%;
-        margin: 0;
-    }
 </style>
diff --git a/client/src/pages/dashboard/Dashboard.svelte b/client/src/pages/dashboard/Dashboard.svelte
index 74b1663fd..335283e18 100644
--- a/client/src/pages/dashboard/Dashboard.svelte
+++ b/client/src/pages/dashboard/Dashboard.svelte
@@ -4,7 +4,7 @@
     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 Button from '../../components/ui/Button.svelte';
 
     import routes from './routes.ts';
 </script>

From ddfabab85527d127181baa0d3dc429c26f82e598 Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Tue, 21 Mar 2023 11:21:30 +0800
Subject: [PATCH 07/36] chore(client): moved navbar components to a separate
 folder

---
 .../ui/{ => navigationbar}/NavPicture.svelte  |  0
 .../ui/{ => navigationbar}/NavQuery.svelte    |  0
 .../ui/{ => navigationbar}/Navbar.svelte      | 23 +++++++------------
 client/src/pages/dashboard/Dashboard.svelte   |  2 +-
 4 files changed, 9 insertions(+), 16 deletions(-)
 rename client/src/components/ui/{ => navigationbar}/NavPicture.svelte (100%)
 rename client/src/components/ui/{ => navigationbar}/NavQuery.svelte (100%)
 rename client/src/components/ui/{ => navigationbar}/Navbar.svelte (79%)

diff --git a/client/src/components/ui/NavPicture.svelte b/client/src/components/ui/navigationbar/NavPicture.svelte
similarity index 100%
rename from client/src/components/ui/NavPicture.svelte
rename to client/src/components/ui/navigationbar/NavPicture.svelte
diff --git a/client/src/components/ui/NavQuery.svelte b/client/src/components/ui/navigationbar/NavQuery.svelte
similarity index 100%
rename from client/src/components/ui/NavQuery.svelte
rename to client/src/components/ui/navigationbar/NavQuery.svelte
diff --git a/client/src/components/ui/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
similarity index 79%
rename from client/src/components/ui/Navbar.svelte
rename to client/src/components/ui/navigationbar/Navbar.svelte
index b8aa9b7d7..56036158e 100644
--- a/client/src/components/ui/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-    import { Session } from '../../api/session.ts';
+    import { Session } from '../../../api/session.ts';
     import NavQuery from './NavQuery.svelte';
     import NavPicture from './NavPicture.svelte';
 
-    import Button from '../../components/ui/Button.svelte';
-    import Logout from '../../components/icons/Logout.svelte';
+    import Button from '../Button.svelte';
+    import Logout from '../../icons/Logout.svelte';
 
-    import { ButtonType } from '../../components/types.ts';
+    import { ButtonType } from '../../../components/types.ts';
 
     
 
     import Router, { push, pop, replace } from 'svelte-spa-router';
-    import routes from '../../pages/dashboard/routes.ts';
+    import routes from '../../../pages/dashboard/routes.ts';
 
     let mobile = false;
 
@@ -35,16 +35,15 @@
     {#await Session.getUser()}
         Hello!
     {:then user}
-        <div class="picturecontainer">
-            <NavPicture name={user.name} email={user.email}  />
-        </div>
-    {/await}
+    
         {#each navItems as item} 
             <div><button class="navitem" on:click={() => push(`/${item.href}`)}>{item.label}</button></div>
         {/each}
         <form method="POST" action="/auth/logout" class="navitem">
             <input type="submit" value="Logout" />
         </form>
+        <NavPicture name={user.name} email={user.email}  />
+    {/await}
 </nav>
 <Router {routes} />
 </NavQuery>
@@ -58,12 +57,6 @@
         position: sticky;
     }
 
-    .picturecontainer {
-        position: fixed;
-        top: 10;
-        left: 10;
-    }
-
     button {
         padding: 0;
         border: 0;
diff --git a/client/src/pages/dashboard/Dashboard.svelte b/client/src/pages/dashboard/Dashboard.svelte
index 335283e18..b72dcdde5 100644
--- a/client/src/pages/dashboard/Dashboard.svelte
+++ b/client/src/pages/dashboard/Dashboard.svelte
@@ -3,7 +3,7 @@
 
     import { register } from '../register.ts';
     import { Session } from '../../api/session.ts';
-    import Navbar from '../../components/ui/Navbar.svelte';
+    import Navbar from '../../components/ui/navigationbar/Navbar.svelte';
     import Button from '../../components/ui/Button.svelte';
 
     import routes from './routes.ts';

From b6d052225aa778462f531f5cf94581a736f71df3 Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Tue, 21 Mar 2023 13:04:47 +0800
Subject: [PATCH 08/36] feat(client): add icon for logout button (will move
 this to the profile button)

---
 .../components/ui/navigationbar/Navbar.svelte | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
index 56036158e..bec94ccc8 100644
--- a/client/src/components/ui/navigationbar/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -28,9 +28,25 @@
         { label: "Manage Global Settings", href: "manage-global-settings", key:'G' }, 
     ];
 
+
+    function logout() {
+        const form = document.createElement('form');
+        form.method = 'post';
+        form.action = "/auth/logout";
+
+        const hiddenField = document.createElement('input');
+        hiddenField.type = 'hidden';
+
+        form.appendChild(hiddenField);
+        document.body.appendChild(form);
+        form.submit();
+    }
+
+
 </script>
 
 <NavQuery query="(max-width: 1024px)" let:matches>
+    
 <nav class="navelements{matches ? ' mobile' : ''}">
     {#await Session.getUser()}
         Hello!
@@ -39,9 +55,7 @@
         {#each navItems as item} 
             <div><button class="navitem" on:click={() => push(`/${item.href}`)}>{item.label}</button></div>
         {/each}
-        <form method="POST" action="/auth/logout" class="navitem">
-            <input type="submit" value="Logout" />
-        </form>
+        <div><button class="navitem" on:click={() => logout()}><Logout /></button></div>
         <NavPicture name={user.name} email={user.email}  />
     {/await}
 </nav>
@@ -78,6 +92,7 @@
         height: 50pt;
         background: none;
         text-decoration: none;
+        cursor: pointer;
         user-select: none;
         color: var(--primary-color);
         display: inline-block;
@@ -87,6 +102,11 @@
         background-color: var(--danger-color);
         transition: all 0.3s ease 0s;
     }
+
+    .logout {
+        width: 100%;
+        height: 100%;
+    }
     
     
     .mobile {

From ce6d7a3a0c73a3f4d75e8ee56de9abbde734a264 Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Wed, 22 Mar 2023 13:37:41 +0800
Subject: [PATCH 09/36] feat(client): see changes below:

- added a new component called NavDrawer.svelte
- navbar updates based on screen size

Co-Authored-By: Basti Ortiz <39114273+Some-Dood@users.noreply.github.com>
---
 .vscode/launch.json                           | 15 +++++
 .../ui/navigationbar/NavDrawer.svelte         | 65 +++++++++++++++++++
 .../ui/navigationbar/NavMobileModal.svelte    | 45 +++++++++++++
 .../components/ui/navigationbar/Navbar.svelte | 37 +++++++----
 client/src/pages/dashboard/Dashboard.svelte   | 17 ++---
 5 files changed, 159 insertions(+), 20 deletions(-)
 create mode 100644 .vscode/launch.json
 create mode 100644 client/src/components/ui/navigationbar/NavDrawer.svelte
 create mode 100644 client/src/components/ui/navigationbar/NavMobileModal.svelte

diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 000000000..2ba986f6f
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
new file mode 100644
index 000000000..a07764c97
--- /dev/null
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -0,0 +1,65 @@
+<script>
+  export let show = false;
+</script>
+
+<nav class:show={show}>
+  <div>
+      <a href="#/inbox">Inbox</a>
+      <a href="#/outbox">Outbox</a>
+      <a href="#/settings">Settings</a>
+  </div>
+  <form method="POST" action="/auth/logout">
+      <input type="submit" value="Logout" />
+  </form>
+</nav>
+
+<style>
+  :global(body) {
+      padding: 0;
+  }
+
+  nav {
+      --acc-color: blue;
+      background-color: #ccc;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      position: absolute;
+      left: 0;
+      transition: left 0.3s;
+      height: 100%;
+  }
+  
+  nav.show {
+      left: -100%;
+  }
+  
+  a {
+      border-left: 0.5rem solid transparent;
+      color: initial;
+      display: block;
+      padding: 0.5rem;
+      text-decoration: none;
+      transition: background-color 0.2s, border-left 0.2s;
+  }
+  
+  a:hover {
+      background-color: #eee;
+      border-left: 0.5rem solid var(--acc-color);
+  }
+  
+  input[type="submit"] {
+      background-color: var(--bg-color);
+      border-left: 0.5rem solid transparent;
+      cursor: pointer;
+      margin: 0;
+      padding: 0.5rem;
+      text-align: initial;
+      transition: background-color 0.2s;
+      width: 100%;
+  }
+  
+  input[type="submit"]:hover {
+      background-color: #aaa;
+  }
+</style>
\ No newline at end of file
diff --git a/client/src/components/ui/navigationbar/NavMobileModal.svelte b/client/src/components/ui/navigationbar/NavMobileModal.svelte
new file mode 100644
index 000000000..2c7ceac1b
--- /dev/null
+++ b/client/src/components/ui/navigationbar/NavMobileModal.svelte
@@ -0,0 +1,45 @@
+{#if show}
+<div>
+  <div class="modal-overlay" data-close on:click={overlay_click} transition:fade={{duration: 150}}>
+    <div class="modal-container">
+      <main><p>About me...</p></main>
+    </div>
+  </div>
+</div>
+{/if}
+
+<script>
+import { fade } from 'svelte/transition';
+
+function overlay_click(e) {
+    if ('close' in e.target.dataset)
+        show = false;
+}
+
+export let show = false;
+</script>
+
+<style>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.modal-container {
+  position: relative;
+  background-color: #ffffff;
+  width: 90vw;
+  margin: 1rem auto 0.2rem;
+  box-shadow: 0 3px 10px #555;
+}
+main {
+  padding: 0.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
index bec94ccc8..4359012d5 100644
--- a/client/src/components/ui/navigationbar/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -5,6 +5,7 @@
 
     import Button from '../Button.svelte';
     import Logout from '../../icons/Logout.svelte';
+    import Hamburger from '../../icons/Eye.svelte';
 
     import { ButtonType } from '../../../components/types.ts';
 
@@ -13,7 +14,9 @@
     import Router, { push, pop, replace } from 'svelte-spa-router';
     import routes from '../../../pages/dashboard/routes.ts';
 
-    let mobile = false;
+    // Mobile stuff 
+    import Sidebar from './NavDrawer.svelte';
+    export let showBar : boolean;
 
     // TODO: Updates based on permissions
     const navItems = [
@@ -28,7 +31,6 @@
         { label: "Manage Global Settings", href: "manage-global-settings", key:'G' }, 
     ];
 
-
     function logout() {
         const form = document.createElement('form');
         form.method = 'post';
@@ -46,19 +48,26 @@
 </script>
 
 <NavQuery query="(max-width: 1024px)" let:matches>
+
     
 <nav class="navelements{matches ? ' mobile' : ''}">
     {#await Session.getUser()}
-        Hello!
+        Getting user info...
     {:then user}
-    
+        <div class={`mobile-icon${matches ? "" : " hidden"}`}>
+            <Button type={ButtonType.Primary} on:click={() => showBar = !showBar}>
+                <Hamburger />
+            </Button>
+        </div>
+
         {#each navItems as item} 
-            <div><button class="navitem" on:click={() => push(`/${item.href}`)}>{item.label}</button></div>
+            <div><button class={`navitem${matches ? " hidden" : ""}`} on:click={() => push(`/${item.href}`)}>{item.label}</button></div>
         {/each}
-        <div><button class="navitem" on:click={() => logout()}><Logout /></button></div>
+        <div><button class={`navitem${matches ? " hidden" : ""}`} on:click={() => logout()}><Logout /></button></div>
         <NavPicture name={user.name} email={user.email}  />
     {/await}
 </nav>
+
 <Router {routes} />
 </NavQuery>
 
@@ -102,14 +111,18 @@
         background-color: var(--danger-color);
         transition: all 0.3s ease 0s;
     }
-
-    .logout {
-        width: 100%;
-        height: 100%;
-    }
-    
     
     .mobile {
         background-color: green;
     }
+
+    .mobile-icon {
+        top: 0;
+        left: 0;
+        position: fixed;
+    }
+
+    .hidden {
+        display: none;
+    }
 </style>
diff --git a/client/src/pages/dashboard/Dashboard.svelte b/client/src/pages/dashboard/Dashboard.svelte
index b72dcdde5..7376be8d8 100644
--- a/client/src/pages/dashboard/Dashboard.svelte
+++ b/client/src/pages/dashboard/Dashboard.svelte
@@ -7,16 +7,17 @@
     import Button from '../../components/ui/Button.svelte';
 
     import routes from './routes.ts';
+    import Sidebar from '../../components/ui/navigationbar/NavDrawer.svelte';
+
+    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} />
-        -->
+        <main>
+            <Navbar bind:showBar={toggleDrawer} />
+            <Sidebar bind:show={toggleDrawer} />
+        </main>
     {/await}
-</main>
+

From 1e5833e437d77f1ae45b99b1fa1f5c2ce49bc0f3 Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Wed, 22 Mar 2023 23:23:01 +0800
Subject: [PATCH 10/36] chore(client): move navItems to dashboard to
 accommodate the sidebar

---
 .../ui/navigationbar/NavMobileModal.svelte    | 45 -------------------
 .../components/ui/navigationbar/Navbar.svelte | 12 +----
 client/src/pages/dashboard/Dashboard.svelte   | 15 ++++++-
 3 files changed, 15 insertions(+), 57 deletions(-)
 delete mode 100644 client/src/components/ui/navigationbar/NavMobileModal.svelte

diff --git a/client/src/components/ui/navigationbar/NavMobileModal.svelte b/client/src/components/ui/navigationbar/NavMobileModal.svelte
deleted file mode 100644
index 2c7ceac1b..000000000
--- a/client/src/components/ui/navigationbar/NavMobileModal.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-{#if show}
-<div>
-  <div class="modal-overlay" data-close on:click={overlay_click} transition:fade={{duration: 150}}>
-    <div class="modal-container">
-      <main><p>About me...</p></main>
-    </div>
-  </div>
-</div>
-{/if}
-
-<script>
-import { fade } from 'svelte/transition';
-
-function overlay_click(e) {
-    if ('close' in e.target.dataset)
-        show = false;
-}
-
-export let show = false;
-</script>
-
-<style>
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 10;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.modal-container {
-  position: relative;
-  background-color: #ffffff;
-  width: 90vw;
-  margin: 1rem auto 0.2rem;
-  box-shadow: 0 3px 10px #555;
-}
-main {
-  padding: 0.5rem;
-}
-</style>
\ No newline at end of file
diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
index 4359012d5..a6f2f2a6f 100644
--- a/client/src/components/ui/navigationbar/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -19,17 +19,7 @@
     export let showBar : boolean;
 
     // TODO: Updates based on permissions
-    const navItems = [
-        { label: "Inbox", href: "inbox", key:'I' },
-        { label: "Outbox", href: "outbox", key:'O' },
-        { label: "Drafts", href: "drafts", key:'D' },
-        { label: "Barcodes", href: "barcodes", key:'B' },
-        { label: "Metrics", href: "metrics", key:'M' },
-        { label: "Manage Invites", href: "manage-invites", key:'N' },
-        { label: "Manage Staff", href: "manage-staff", key:'S' },
-        { label: "Manage Administrators", href: "manage-administrators", key:'A' },
-        { label: "Manage Global Settings", href: "manage-global-settings", key:'G' }, 
-    ];
+    export let navItems;
 
     function logout() {
         const form = document.createElement('form');
diff --git a/client/src/pages/dashboard/Dashboard.svelte b/client/src/pages/dashboard/Dashboard.svelte
index 7376be8d8..48a37b70c 100644
--- a/client/src/pages/dashboard/Dashboard.svelte
+++ b/client/src/pages/dashboard/Dashboard.svelte
@@ -11,12 +11,25 @@
 
     let toggleDrawer = false;
 
+    // TODO: Updates based on permissions
+    let navItems = [
+        { label: "Inbox", href: "inbox", key:'I' },
+        { label: "Outbox", href: "outbox", key:'O' },
+        { label: "Drafts", href: "drafts", key:'D' },
+        { label: "Barcodes", href: "barcodes", key:'B' },
+        { label: "Metrics", href: "metrics", key:'M' },
+        { label: "Manage Invites", href: "manage-invites", key:'N' },
+        { label: "Manage Staff", href: "manage-staff", key:'S' },
+        { label: "Manage Administrators", href: "manage-administrators", key:'A' },
+        { label: "Manage Global Settings", href: "manage-global-settings", key:'G' }, 
+    ];
+
 </script>
     {#await register()}
         Waiting for service worker...
     {:then}
         <main>
-            <Navbar bind:showBar={toggleDrawer} />
+            <Navbar bind:showBar={toggleDrawer} bind:navItems={navItems} />
             <Sidebar bind:show={toggleDrawer} />
         </main>
     {/await}

From 6ff53c7e4453311aeea1e541f9a5769e2ee20db5 Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Thu, 23 Mar 2023 03:26:04 +0800
Subject: [PATCH 11/36] feat(client): updated sidebar values

---
 .../ui/navigationbar/NavDrawer.svelte         |  8 +++---
 .../components/ui/navigationbar/Navbar.svelte | 25 ++++++++-----------
 client/src/pages/dashboard/Dashboard.svelte   |  2 +-
 3 files changed, 17 insertions(+), 18 deletions(-)

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
index a07764c97..3a81409dc 100644
--- a/client/src/components/ui/navigationbar/NavDrawer.svelte
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -1,12 +1,13 @@
 <script>
   export let show = false;
+  export let navItems;
 </script>
 
 <nav class:show={show}>
   <div>
-      <a href="#/inbox">Inbox</a>
-      <a href="#/outbox">Outbox</a>
-      <a href="#/settings">Settings</a>
+        {#each navItems as item} 
+            <a href={`#/${item.href}`}>{item.label}</a>
+      {/each}
   </div>
   <form method="POST" action="/auth/logout">
       <input type="submit" value="Logout" />
@@ -26,6 +27,7 @@
       justify-content: space-between;
       position: absolute;
       left: 0;
+      z-index: 50;
       transition: left 0.3s;
       height: 100%;
   }
diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
index a6f2f2a6f..c7160ee19 100644
--- a/client/src/components/ui/navigationbar/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -15,7 +15,6 @@
     import routes from '../../../pages/dashboard/routes.ts';
 
     // Mobile stuff 
-    import Sidebar from './NavDrawer.svelte';
     export let showBar : boolean;
 
     // TODO: Updates based on permissions
@@ -33,27 +32,25 @@
         document.body.appendChild(form);
         form.submit();
     }
-
-
 </script>
 
 <NavQuery query="(max-width: 1024px)" let:matches>
 
     
 <nav class="navelements{matches ? ' mobile' : ''}">
+    <div class={`mobile-icon${matches ? "" : " hidden"}`}>
+        <Button type={ButtonType.Primary} on:click={() => showBar = !showBar}>
+            <Hamburger />
+        </Button>
+    </div>
+
+    {#each navItems as item} 
+        <div><button class={`navitem${matches ? " hidden" : ""}`} on:click={() => push(`/${item.href}`)}>{item.label}</button></div>
+    {/each}
+    <div><button class={`navitem${matches ? " hidden" : ""}`} on:click={() => logout()}><Logout /></button></div>
     {#await Session.getUser()}
-        Getting user info...
+        <NavPicture name="Guest" email="Guest" />
     {:then user}
-        <div class={`mobile-icon${matches ? "" : " hidden"}`}>
-            <Button type={ButtonType.Primary} on:click={() => showBar = !showBar}>
-                <Hamburger />
-            </Button>
-        </div>
-
-        {#each navItems as item} 
-            <div><button class={`navitem${matches ? " hidden" : ""}`} on:click={() => push(`/${item.href}`)}>{item.label}</button></div>
-        {/each}
-        <div><button class={`navitem${matches ? " hidden" : ""}`} on:click={() => logout()}><Logout /></button></div>
         <NavPicture name={user.name} email={user.email}  />
     {/await}
 </nav>
diff --git a/client/src/pages/dashboard/Dashboard.svelte b/client/src/pages/dashboard/Dashboard.svelte
index 48a37b70c..3a18ae0e6 100644
--- a/client/src/pages/dashboard/Dashboard.svelte
+++ b/client/src/pages/dashboard/Dashboard.svelte
@@ -30,7 +30,7 @@
     {:then}
         <main>
             <Navbar bind:showBar={toggleDrawer} bind:navItems={navItems} />
-            <Sidebar bind:show={toggleDrawer} />
+            <Sidebar bind:show={toggleDrawer} bind:navItems={navItems} />
         </main>
     {/await}
 

From 04eefa6750f66ddf51a702714da99663fbd62c48 Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Thu, 23 Mar 2023 03:33:11 +0800
Subject: [PATCH 12/36] fix(client): pinned sidebar below navbar

---
 client/src/components/ui/navigationbar/NavDrawer.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
index 3a81409dc..372ca2e72 100644
--- a/client/src/components/ui/navigationbar/NavDrawer.svelte
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -27,6 +27,7 @@
       justify-content: space-between;
       position: absolute;
       left: 0;
+      top: 70px;
       z-index: 50;
       transition: left 0.3s;
       height: 100%;

From 42cfa884bf4e3d607d7d44904a639b9efb2b4018 Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Thu, 23 Mar 2023 03:47:51 +0800
Subject: [PATCH 13/36] feat(client): sidebar disappears while in desktop  mode

---
 .../ui/navigationbar/NavDrawer.svelte         | 106 +++++++++---------
 1 file changed, 54 insertions(+), 52 deletions(-)

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
index 372ca2e72..aaa50ebc7 100644
--- a/client/src/components/ui/navigationbar/NavDrawer.svelte
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -1,9 +1,12 @@
 <script>
-  export let show = false;
-  export let navItems;
+    import NavQuery from './NavQuery.svelte';
+
+    export let show = false;
+    export let navItems;
 </script>
 
-<nav class:show={show}>
+<NavQuery query="(min-width: 1024px)" let:matches>
+<nav class:show={matches || !show}>
   <div>
         {#each navItems as item} 
             <a href={`#/${item.href}`}>{item.label}</a>
@@ -13,56 +16,55 @@
       <input type="submit" value="Logout" />
   </form>
 </nav>
-
+</NavQuery>
 <style>
-  :global(body) {
-      padding: 0;
-  }
+    :global(body) {
+        padding: 0;
+    }
 
-  nav {
-      --acc-color: blue;
-      background-color: #ccc;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      position: absolute;
-      left: 0;
-      top: 70px;
-      z-index: 50;
-      transition: left 0.3s;
-      height: 100%;
-  }
-  
-  nav.show {
-      left: -100%;
-  }
-  
-  a {
-      border-left: 0.5rem solid transparent;
-      color: initial;
-      display: block;
-      padding: 0.5rem;
-      text-decoration: none;
-      transition: background-color 0.2s, border-left 0.2s;
-  }
-  
-  a:hover {
-      background-color: #eee;
-      border-left: 0.5rem solid var(--acc-color);
-  }
+    nav {
+        --acc-color: blue;
+        background-color: #ccc;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        position: absolute;
+        left: 0;
+        top: 70px;
+        z-index: 50;
+        transition: left 0.3s;
+        height: 100%;
+    }
+    nav.show {
+        left: -100%;
+    }
   
-  input[type="submit"] {
-      background-color: var(--bg-color);
-      border-left: 0.5rem solid transparent;
-      cursor: pointer;
-      margin: 0;
-      padding: 0.5rem;
-      text-align: initial;
-      transition: background-color 0.2s;
-      width: 100%;
-  }
-  
-  input[type="submit"]:hover {
-      background-color: #aaa;
-  }
+    a {
+        border-left: 0.5rem solid transparent;
+        color: initial;
+        display: block;
+        padding: 0.5rem;
+        text-decoration: none;
+        transition: background-color 0.2s, border-left 0.2s;
+    }
+
+    a:hover {
+        background-color: #eee;
+        border-left: 0.5rem solid var(--acc-color);
+    }
+
+    input[type="submit"] {
+        background-color: var(--bg-color);
+        border-left: 0.5rem solid transparent;
+        cursor: pointer;
+        margin: 0;
+        padding: 0.5rem;
+        text-align: initial;
+        transition: background-color 0.2s;
+        width: 100%;
+    }
+
+    input[type="submit"]:hover {
+        background-color: #aaa;
+    }
 </style>
\ No newline at end of file

From 35d0a63430d5e7cd6f214b0fce943f83aae7317d Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Thu, 23 Mar 2023 03:50:10 +0800
Subject: [PATCH 14/36] placeholder(client): logout button is visible
 regardless

---
 client/src/components/ui/navigationbar/NavDrawer.svelte | 2 +-
 client/src/components/ui/navigationbar/Navbar.svelte    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
index aaa50ebc7..729bebca1 100644
--- a/client/src/components/ui/navigationbar/NavDrawer.svelte
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -50,7 +50,7 @@
 
     a:hover {
         background-color: #eee;
-        border-left: 0.5rem solid var(--acc-color);
+        border-right: 0.5rem solid var(--acc-color);
     }
 
     input[type="submit"] {
diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
index c7160ee19..be35c9a78 100644
--- a/client/src/components/ui/navigationbar/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -47,7 +47,7 @@
     {#each navItems as item} 
         <div><button class={`navitem${matches ? " hidden" : ""}`} on:click={() => push(`/${item.href}`)}>{item.label}</button></div>
     {/each}
-    <div><button class={`navitem${matches ? " hidden" : ""}`} on:click={() => logout()}><Logout /></button></div>
+    <div><button class={`navitem`} on:click={() => logout()}><Logout /></button></div>
     {#await Session.getUser()}
         <NavPicture name="Guest" email="Guest" />
     {:then user}

From 87aec4d86c6c79873205400217a25a35a0222810 Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Thu, 23 Mar 2023 03:57:23 +0800
Subject: [PATCH 15/36] feat(client): sidebar right borders only appera when
 selected, not hovered

---
 .../src/components/ui/navigationbar/NavDrawer.svelte | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
index 729bebca1..33a2e85c7 100644
--- a/client/src/components/ui/navigationbar/NavDrawer.svelte
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -3,13 +3,17 @@
 
     export let show = false;
     export let navItems;
+
+    let selected;
 </script>
 
 <NavQuery query="(min-width: 1024px)" let:matches>
 <nav class:show={matches || !show}>
   <div>
         {#each navItems as item} 
-            <a href={`#/${item.href}`}>{item.label}</a>
+            <a href={`#/${item.href}`} on:click={() => {selected = item.href}} class={selected == item.href ? "selected" : ""}>
+                {item.label}
+            </a>
       {/each}
   </div>
   <form method="POST" action="/auth/logout">
@@ -30,7 +34,7 @@
         justify-content: space-between;
         position: absolute;
         left: 0;
-        top: 70px;
+        top: 75px;
         z-index: 50;
         transition: left 0.3s;
         height: 100%;
@@ -50,6 +54,10 @@
 
     a:hover {
         background-color: #eee;
+        
+    }
+
+    .selected {
         border-right: 0.5rem solid var(--acc-color);
     }
 

From 427bbd6e5c2355e224bc812b1982e593b05ac236 Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Thu, 23 Mar 2023 04:05:39 +0800
Subject: [PATCH 16/36] fix(client): text and icons are no longer selectable
 (ctrl+A doesn't highlight them)

---
 client/src/components/ui/navigationbar/NavDrawer.svelte  | 1 +
 client/src/components/ui/navigationbar/NavPicture.svelte | 2 +-
 client/src/components/ui/navigationbar/Navbar.svelte     | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
index 33a2e85c7..38802424a 100644
--- a/client/src/components/ui/navigationbar/NavDrawer.svelte
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -49,6 +49,7 @@
         display: block;
         padding: 0.5rem;
         text-decoration: none;
+        user-select: none;
         transition: background-color 0.2s, border-left 0.2s;
     }
 
diff --git a/client/src/components/ui/navigationbar/NavPicture.svelte b/client/src/components/ui/navigationbar/NavPicture.svelte
index 29d2e4a60..aeefb7b7a 100644
--- a/client/src/components/ui/navigationbar/NavPicture.svelte
+++ b/client/src/components/ui/navigationbar/NavPicture.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <div>
-    <div class="profilepicture"><p>{name[0]}</p></div>
+    <div class="profilepicture"><p style="user-select: none">{name[0]}</p></div>
     <p style="float: left; user-select: none;">{name.split(" ")[name.split(" ").length-1]}</p>
 </div>
 
diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
index be35c9a78..d8f310e0b 100644
--- a/client/src/components/ui/navigationbar/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -107,6 +107,7 @@
         top: 0;
         left: 0;
         position: fixed;
+        user-select: none;
     }
 
     .hidden {

From dcc1f0f6c4db63263718237ba14f53fd6d9fb2df Mon Sep 17 00:00:00 2001
From: Justin Ruaya <jrruaya1@up.edu.ph>
Date: Thu, 23 Mar 2023 10:32:52 +0800
Subject: [PATCH 17/36] clean(client): navbar no longer uses media queries,
 unified layout on mobile and desktop

---
 .../ui/navigationbar/NavDrawer.svelte           |  7 +++----
 .../components/ui/navigationbar/Navbar.svelte   | 17 ++---------------
 2 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
index 38802424a..c0396b759 100644
--- a/client/src/components/ui/navigationbar/NavDrawer.svelte
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -7,8 +7,7 @@
     let selected;
 </script>
 
-<NavQuery query="(min-width: 1024px)" let:matches>
-<nav class:show={matches || !show}>
+<nav class:show={!show}>
   <div>
         {#each navItems as item} 
             <a href={`#/${item.href}`} on:click={() => {selected = item.href}} class={selected == item.href ? "selected" : ""}>
@@ -20,7 +19,6 @@
       <input type="submit" value="Logout" />
   </form>
 </nav>
-</NavQuery>
 <style>
     :global(body) {
         padding: 0;
@@ -35,7 +33,7 @@
         position: absolute;
         left: 0;
         top: 75px;
-        z-index: 50;
+        z-index: 0;
         transition: left 0.3s;
         height: 100%;
     }
@@ -48,6 +46,7 @@
         color: initial;
         display: block;
         padding: 0.5rem;
+        width: 175pt;
         text-decoration: none;
         user-select: none;
         transition: background-color 0.2s, border-left 0.2s;
diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
index d8f310e0b..fbc5782d0 100644
--- a/client/src/components/ui/navigationbar/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -17,9 +17,6 @@
     // Mobile stuff 
     export let showBar : boolean;
 
-    // TODO: Updates based on permissions
-    export let navItems;
-
     function logout() {
         const form = document.createElement('form');
         form.method = 'post';
@@ -34,19 +31,14 @@
     }
 </script>
 
-<NavQuery query="(max-width: 1024px)" let:matches>
-
     
-<nav class="navelements{matches ? ' mobile' : ''}">
-    <div class={`mobile-icon${matches ? "" : " hidden"}`}>
+<nav class="navelements">
+    <div class={`mobile-icon`}>
         <Button type={ButtonType.Primary} on:click={() => showBar = !showBar}>
             <Hamburger />
         </Button>
     </div>
 
-    {#each navItems as item} 
-        <div><button class={`navitem${matches ? " hidden" : ""}`} on:click={() => push(`/${item.href}`)}>{item.label}</button></div>
-    {/each}
     <div><button class={`navitem`} on:click={() => logout()}><Logout /></button></div>
     {#await Session.getUser()}
         <NavPicture name="Guest" email="Guest" />
@@ -56,7 +48,6 @@
 </nav>
 
 <Router {routes} />
-</NavQuery>
 
 <style>
     nav {
@@ -98,10 +89,6 @@
         background-color: var(--danger-color);
         transition: all 0.3s ease 0s;
     }
-    
-    .mobile {
-        background-color: green;
-    }
 
     .mobile-icon {
         top: 0;

From 9e13715c11bd9a6ad1abf345901913c9916b8a85 Mon Sep 17 00:00:00 2001
From: Marc Macaraeg <mgc.macaraeg@gmail.com>
Date: Thu, 23 Mar 2023 12:01:20 +0800
Subject: [PATCH 18/36] fmt(client): followed stylesheet guide from #24

---
 .../ui/navigationbar/NavDrawer.svelte         | 22 +++++++++----------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
index c0396b759..2a7f173a8 100644
--- a/client/src/components/ui/navigationbar/NavDrawer.svelte
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -20,13 +20,11 @@
   </form>
 </nav>
 <style>
-    :global(body) {
-        padding: 0;
-    }
+@import url(../../../pages/global.css);
 
     nav {
         --acc-color: blue;
-        background-color: #ccc;
+        background-color: var(--nav-bg);
         display: flex;
         flex-direction: column;
         justify-content: space-between;
@@ -34,7 +32,7 @@
         left: 0;
         top: 75px;
         z-index: 0;
-        transition: left 0.3s;
+        transition: left var(--animation-length);
         height: 100%;
     }
     nav.show {
@@ -42,14 +40,14 @@
     }
   
     a {
-        border-left: 0.5rem solid transparent;
+        border-left: var(--spacing-normal) solid transparent;
         color: initial;
         display: block;
-        padding: 0.5rem;
+        padding: var(--spacing-normal);
         width: 175pt;
         text-decoration: none;
         user-select: none;
-        transition: background-color 0.2s, border-left 0.2s;
+        transition: background-color var(--animation-length), border-left var(--animation-length);
     }
 
     a:hover {
@@ -58,17 +56,17 @@
     }
 
     .selected {
-        border-right: 0.5rem solid var(--acc-color);
+        border-right: var(--spacing-normal) solid var(--nav-bg);
     }
 
     input[type="submit"] {
         background-color: var(--bg-color);
-        border-left: 0.5rem solid transparent;
+        border-left: var(--spacing-normal) solid transparent;
         cursor: pointer;
         margin: 0;
-        padding: 0.5rem;
+        padding: var(--spacing-normal);
         text-align: initial;
-        transition: background-color 0.2s;
+        transition: background-color var(--animation-length);
         width: 100%;
     }
 

From 6a3384b5ae680cde1d9ef69db6e7ef1b7994c26e Mon Sep 17 00:00:00 2001
From: Basti Ortiz <39114273+BastiDood@users.noreply.github.com>
Date: Thu, 23 Mar 2023 14:36:46 +0800
Subject: [PATCH 19/36] chore: remove `.vscode/` folder

---
 .vscode/launch.json | 15 ---------------
 1 file changed, 15 deletions(-)
 delete mode 100644 .vscode/launch.json

diff --git a/.vscode/launch.json b/.vscode/launch.json
deleted file mode 100644
index 2ba986f6f..000000000
--- a/.vscode/launch.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "chrome",
-            "request": "launch",
-            "name": "Launch Chrome against localhost",
-            "url": "http://localhost:8080",
-            "webRoot": "${workspaceFolder}"
-        }
-    ]
-}
\ No newline at end of file

From 315372b1bd188500d53d2e56b51e0a583d540426 Mon Sep 17 00:00:00 2001
From: Basti Ortiz <39114273+BastiDood@users.noreply.github.com>
Date: Thu, 23 Mar 2023 14:47:32 +0800
Subject: [PATCH 20/36] feat(client): move `subpages` to `views`

---
 client/src/pages/subpages/Barcodes.svelte       | 0
 client/src/pages/subpages/Drafts.svelte         | 0
 client/src/pages/subpages/Inbox.svelte          | 3 ---
 client/src/pages/subpages/Invites.svelte        | 0
 client/src/pages/subpages/ManageAdmins.svelte   | 0
 client/src/pages/subpages/ManageSettings.svelte | 0
 client/src/pages/subpages/ManageStaff.svelte    | 0
 client/src/pages/subpages/Metrics.svelte        | 0
 client/src/pages/subpages/Outbox.svelte         | 3 ---
 client/src/pages/views/Admins.svelte            | 1 +
 client/src/pages/views/Barcodes.svelte          | 1 +
 client/src/pages/views/Drafts.svelte            | 1 +
 client/src/pages/views/Inbox.svelte             | 1 +
 client/src/pages/views/Invites.svelte           | 1 +
 client/src/pages/views/Metrics.svelte           | 1 +
 client/src/pages/views/Outbox.svelte            | 1 +
 client/src/pages/views/Settings.svelte          | 1 +
 client/src/pages/views/Staff.svelte             | 1 +
 18 files changed, 9 insertions(+), 6 deletions(-)
 delete mode 100644 client/src/pages/subpages/Barcodes.svelte
 delete mode 100644 client/src/pages/subpages/Drafts.svelte
 delete mode 100644 client/src/pages/subpages/Inbox.svelte
 delete mode 100644 client/src/pages/subpages/Invites.svelte
 delete mode 100644 client/src/pages/subpages/ManageAdmins.svelte
 delete mode 100644 client/src/pages/subpages/ManageSettings.svelte
 delete mode 100644 client/src/pages/subpages/ManageStaff.svelte
 delete mode 100644 client/src/pages/subpages/Metrics.svelte
 delete mode 100644 client/src/pages/subpages/Outbox.svelte
 create mode 100644 client/src/pages/views/Admins.svelte
 create mode 100644 client/src/pages/views/Barcodes.svelte
 create mode 100644 client/src/pages/views/Drafts.svelte
 create mode 100644 client/src/pages/views/Inbox.svelte
 create mode 100644 client/src/pages/views/Invites.svelte
 create mode 100644 client/src/pages/views/Metrics.svelte
 create mode 100644 client/src/pages/views/Outbox.svelte
 create mode 100644 client/src/pages/views/Settings.svelte
 create mode 100644 client/src/pages/views/Staff.svelte

diff --git a/client/src/pages/subpages/Barcodes.svelte b/client/src/pages/subpages/Barcodes.svelte
deleted file mode 100644
index e69de29bb..000000000
diff --git a/client/src/pages/subpages/Drafts.svelte b/client/src/pages/subpages/Drafts.svelte
deleted file mode 100644
index e69de29bb..000000000
diff --git a/client/src/pages/subpages/Inbox.svelte b/client/src/pages/subpages/Inbox.svelte
deleted file mode 100644
index 155e674a8..000000000
--- a/client/src/pages/subpages/Inbox.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>
-    Inbox!
-</p>
\ No newline at end of file
diff --git a/client/src/pages/subpages/Invites.svelte b/client/src/pages/subpages/Invites.svelte
deleted file mode 100644
index e69de29bb..000000000
diff --git a/client/src/pages/subpages/ManageAdmins.svelte b/client/src/pages/subpages/ManageAdmins.svelte
deleted file mode 100644
index e69de29bb..000000000
diff --git a/client/src/pages/subpages/ManageSettings.svelte b/client/src/pages/subpages/ManageSettings.svelte
deleted file mode 100644
index e69de29bb..000000000
diff --git a/client/src/pages/subpages/ManageStaff.svelte b/client/src/pages/subpages/ManageStaff.svelte
deleted file mode 100644
index e69de29bb..000000000
diff --git a/client/src/pages/subpages/Metrics.svelte b/client/src/pages/subpages/Metrics.svelte
deleted file mode 100644
index e69de29bb..000000000
diff --git a/client/src/pages/subpages/Outbox.svelte b/client/src/pages/subpages/Outbox.svelte
deleted file mode 100644
index fb12177ae..000000000
--- a/client/src/pages/subpages/Outbox.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<p>
-    Outbox!
-</p>
\ No newline at end of file
diff --git a/client/src/pages/views/Admins.svelte b/client/src/pages/views/Admins.svelte
new file mode 100644
index 000000000..d25a7bd3e
--- /dev/null
+++ b/client/src/pages/views/Admins.svelte
@@ -0,0 +1 @@
+<p>Manage Admins!</p>
diff --git a/client/src/pages/views/Barcodes.svelte b/client/src/pages/views/Barcodes.svelte
new file mode 100644
index 000000000..54ae536e1
--- /dev/null
+++ b/client/src/pages/views/Barcodes.svelte
@@ -0,0 +1 @@
+<p>Barcodes!</p>
diff --git a/client/src/pages/views/Drafts.svelte b/client/src/pages/views/Drafts.svelte
new file mode 100644
index 000000000..d57a33c04
--- /dev/null
+++ b/client/src/pages/views/Drafts.svelte
@@ -0,0 +1 @@
+<p>Drafts!</p>
diff --git a/client/src/pages/views/Inbox.svelte b/client/src/pages/views/Inbox.svelte
new file mode 100644
index 000000000..8ec79f018
--- /dev/null
+++ b/client/src/pages/views/Inbox.svelte
@@ -0,0 +1 @@
+<p>Inbox!</p>
diff --git a/client/src/pages/views/Invites.svelte b/client/src/pages/views/Invites.svelte
new file mode 100644
index 000000000..d2e6fa33f
--- /dev/null
+++ b/client/src/pages/views/Invites.svelte
@@ -0,0 +1 @@
+<p>Invites!</p>
diff --git a/client/src/pages/views/Metrics.svelte b/client/src/pages/views/Metrics.svelte
new file mode 100644
index 000000000..e2c3b5bd5
--- /dev/null
+++ b/client/src/pages/views/Metrics.svelte
@@ -0,0 +1 @@
+<p>Metrics!</p>
diff --git a/client/src/pages/views/Outbox.svelte b/client/src/pages/views/Outbox.svelte
new file mode 100644
index 000000000..7eaa90b1b
--- /dev/null
+++ b/client/src/pages/views/Outbox.svelte
@@ -0,0 +1 @@
+<p>Outbox!</p>
diff --git a/client/src/pages/views/Settings.svelte b/client/src/pages/views/Settings.svelte
new file mode 100644
index 000000000..3934e095d
--- /dev/null
+++ b/client/src/pages/views/Settings.svelte
@@ -0,0 +1 @@
+<p>Manage Settings!</p>
diff --git a/client/src/pages/views/Staff.svelte b/client/src/pages/views/Staff.svelte
new file mode 100644
index 000000000..60274fd2e
--- /dev/null
+++ b/client/src/pages/views/Staff.svelte
@@ -0,0 +1 @@
+<p>Manage Staff!</p>

From 5c75af8cca91f5bbbd07b200bdda68a86681fe88 Mon Sep 17 00:00:00 2001
From: Basti Ortiz <39114273+BastiDood@users.noreply.github.com>
Date: Thu, 23 Mar 2023 14:51:22 +0800
Subject: [PATCH 21/36] refactor(client): replace dummy views in dashboard

---
 .../ui/navigationbar/NavDrawer.svelte         |  4 +-
 .../ui/navigationbar/NavQuery.svelte          | 40 -------------------
 .../components/ui/navigationbar/Navbar.svelte |  1 -
 .../pages/{ => dashboard}/views/Admins.svelte |  0
 .../src/pages/dashboard/views/Barcodes.svelte | 11 +----
 .../src/pages/dashboard/views/Drafts.svelte   | 11 +----
 client/src/pages/dashboard/views/Inbox.svelte | 11 +----
 .../{ => dashboard}/views/Invites.svelte      |  0
 .../views/ManageAdministrators.svelte         | 10 -----
 .../views/ManageGlobalSettings.svelte         | 10 -----
 .../dashboard/views/ManageInvites.svelte      | 10 -----
 .../pages/dashboard/views/ManageStaff.svelte  | 10 -----
 .../src/pages/dashboard/views/Metrics.svelte  | 11 +----
 .../src/pages/dashboard/views/Outbox.svelte   | 11 +----
 .../{ => dashboard}/views/Settings.svelte     |  0
 .../pages/{ => dashboard}/views/Staff.svelte  |  0
 client/src/pages/views/Barcodes.svelte        |  1 -
 client/src/pages/views/Drafts.svelte          |  1 -
 client/src/pages/views/Inbox.svelte           |  1 -
 client/src/pages/views/Metrics.svelte         |  1 -
 client/src/pages/views/Outbox.svelte          |  1 -
 21 files changed, 6 insertions(+), 139 deletions(-)
 delete mode 100644 client/src/components/ui/navigationbar/NavQuery.svelte
 rename client/src/pages/{ => dashboard}/views/Admins.svelte (100%)
 rename client/src/pages/{ => dashboard}/views/Invites.svelte (100%)
 delete mode 100644 client/src/pages/dashboard/views/ManageAdministrators.svelte
 delete mode 100644 client/src/pages/dashboard/views/ManageGlobalSettings.svelte
 delete mode 100644 client/src/pages/dashboard/views/ManageInvites.svelte
 delete mode 100644 client/src/pages/dashboard/views/ManageStaff.svelte
 rename client/src/pages/{ => dashboard}/views/Settings.svelte (100%)
 rename client/src/pages/{ => dashboard}/views/Staff.svelte (100%)
 delete mode 100644 client/src/pages/views/Barcodes.svelte
 delete mode 100644 client/src/pages/views/Drafts.svelte
 delete mode 100644 client/src/pages/views/Inbox.svelte
 delete mode 100644 client/src/pages/views/Metrics.svelte
 delete mode 100644 client/src/pages/views/Outbox.svelte

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
index 2a7f173a8..57c87b8a6 100644
--- a/client/src/components/ui/navigationbar/NavDrawer.svelte
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -1,6 +1,4 @@
 <script>
-    import NavQuery from './NavQuery.svelte';
-
     export let show = false;
     export let navItems;
 
@@ -73,4 +71,4 @@
     input[type="submit"]:hover {
         background-color: #aaa;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/client/src/components/ui/navigationbar/NavQuery.svelte b/client/src/components/ui/navigationbar/NavQuery.svelte
deleted file mode 100644
index 37a1c32ae..000000000
--- a/client/src/components/ui/navigationbar/NavQuery.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<!-- Source code of this class is from https://svelte.dev/repl/26eb44932920421da01e2e21539494cd?version=3.56.0-->
-<script>
-    import { onMount } from "svelte";
-
-    export let query;
-
-    let mql;
-    let mqlListener;
-    let wasMounted = false;
-    let matches = false;
-
-    onMount(() => {
-        wasMounted = true;
-        return () => {
-            removeActiveListener();
-        };
-    });
-
-    $: {
-        if (wasMounted) {
-            removeActiveListener();
-            addNewListener(query);
-        }
-    }
-
-    function addNewListener(query) {
-        mql = window.matchMedia(query);
-        mqlListener = v => matches = v.matches;
-        mql.addListener(mqlListener);
-        matches = mql.matches;
-    }
-
-    function removeActiveListener() {
-        if (mql && mqlListener) {
-            mql.removeListener(mqlListener);
-        }
-    }
-</script>
-
-<slot {matches} />
diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
index fbc5782d0..214d18678 100644
--- a/client/src/components/ui/navigationbar/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { Session } from '../../../api/session.ts';
-    import NavQuery from './NavQuery.svelte';
     import NavPicture from './NavPicture.svelte';
 
     import Button from '../Button.svelte';
diff --git a/client/src/pages/views/Admins.svelte b/client/src/pages/dashboard/views/Admins.svelte
similarity index 100%
rename from client/src/pages/views/Admins.svelte
rename to client/src/pages/dashboard/views/Admins.svelte
diff --git a/client/src/pages/dashboard/views/Barcodes.svelte b/client/src/pages/dashboard/views/Barcodes.svelte
index 14aac8452..54ae536e1 100644
--- a/client/src/pages/dashboard/views/Barcodes.svelte
+++ b/client/src/pages/dashboard/views/Barcodes.svelte
@@ -1,10 +1 @@
-<div>
-  <p>Barcodes</p>
-</div>
-
-
-<style>
-  div{
-    text-align: center;
-  }
-</style>
\ No newline at end of file
+<p>Barcodes!</p>
diff --git a/client/src/pages/dashboard/views/Drafts.svelte b/client/src/pages/dashboard/views/Drafts.svelte
index 782d58823..d57a33c04 100644
--- a/client/src/pages/dashboard/views/Drafts.svelte
+++ b/client/src/pages/dashboard/views/Drafts.svelte
@@ -1,10 +1 @@
-<div>
-  <p>Drafts</p>
-</div>
-
-
-<style>
-  div{
-    text-align: center;
-  }
-</style>
\ No newline at end of file
+<p>Drafts!</p>
diff --git a/client/src/pages/dashboard/views/Inbox.svelte b/client/src/pages/dashboard/views/Inbox.svelte
index e1d4fdd4c..8ec79f018 100644
--- a/client/src/pages/dashboard/views/Inbox.svelte
+++ b/client/src/pages/dashboard/views/Inbox.svelte
@@ -1,10 +1 @@
-<div>
-  <p>Inbox</p>
-</div>
-
-
-<style>
-  div{
-    text-align: center;
-  }
-</style>
\ No newline at end of file
+<p>Inbox!</p>
diff --git a/client/src/pages/views/Invites.svelte b/client/src/pages/dashboard/views/Invites.svelte
similarity index 100%
rename from client/src/pages/views/Invites.svelte
rename to client/src/pages/dashboard/views/Invites.svelte
diff --git a/client/src/pages/dashboard/views/ManageAdministrators.svelte b/client/src/pages/dashboard/views/ManageAdministrators.svelte
deleted file mode 100644
index ab2f05ba0..000000000
--- a/client/src/pages/dashboard/views/ManageAdministrators.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<div>
-  <p>Manage Administrators</p>
-</div>
-
-
-<style>
-  div{
-    text-align: center;
-  }
-</style>
\ No newline at end of file
diff --git a/client/src/pages/dashboard/views/ManageGlobalSettings.svelte b/client/src/pages/dashboard/views/ManageGlobalSettings.svelte
deleted file mode 100644
index 2578c47cc..000000000
--- a/client/src/pages/dashboard/views/ManageGlobalSettings.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<div>
-  <p>Manage Global Settings</p>
-</div>
-
-
-<style>
-  div{
-    text-align: center;
-  }
-</style>
\ No newline at end of file
diff --git a/client/src/pages/dashboard/views/ManageInvites.svelte b/client/src/pages/dashboard/views/ManageInvites.svelte
deleted file mode 100644
index 3f3786788..000000000
--- a/client/src/pages/dashboard/views/ManageInvites.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<div>
-  <p>Manage Invites</p>
-</div>
-
-
-<style>
-  div{
-    text-align: center;
-  }
-</style>
\ No newline at end of file
diff --git a/client/src/pages/dashboard/views/ManageStaff.svelte b/client/src/pages/dashboard/views/ManageStaff.svelte
deleted file mode 100644
index d0c43eb2e..000000000
--- a/client/src/pages/dashboard/views/ManageStaff.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<div>
-  <p>Manage Staff</p>
-</div>
-
-
-<style>
-  div{
-    text-align: center;
-  }
-</style>
\ No newline at end of file
diff --git a/client/src/pages/dashboard/views/Metrics.svelte b/client/src/pages/dashboard/views/Metrics.svelte
index a8e46c257..e2c3b5bd5 100644
--- a/client/src/pages/dashboard/views/Metrics.svelte
+++ b/client/src/pages/dashboard/views/Metrics.svelte
@@ -1,10 +1 @@
-<div>
-  <p>Metrics</p>
-</div>
-
-
-<style>
-  div{
-    text-align: center;
-  }
-</style>
\ No newline at end of file
+<p>Metrics!</p>
diff --git a/client/src/pages/dashboard/views/Outbox.svelte b/client/src/pages/dashboard/views/Outbox.svelte
index 8e3a61877..7eaa90b1b 100644
--- a/client/src/pages/dashboard/views/Outbox.svelte
+++ b/client/src/pages/dashboard/views/Outbox.svelte
@@ -1,10 +1 @@
-<div>
-  <p>Outbox</p>
-</div>
-
-
-<style>
-  div{
-    text-align: center;
-  }
-</style>
\ No newline at end of file
+<p>Outbox!</p>
diff --git a/client/src/pages/views/Settings.svelte b/client/src/pages/dashboard/views/Settings.svelte
similarity index 100%
rename from client/src/pages/views/Settings.svelte
rename to client/src/pages/dashboard/views/Settings.svelte
diff --git a/client/src/pages/views/Staff.svelte b/client/src/pages/dashboard/views/Staff.svelte
similarity index 100%
rename from client/src/pages/views/Staff.svelte
rename to client/src/pages/dashboard/views/Staff.svelte
diff --git a/client/src/pages/views/Barcodes.svelte b/client/src/pages/views/Barcodes.svelte
deleted file mode 100644
index 54ae536e1..000000000
--- a/client/src/pages/views/Barcodes.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<p>Barcodes!</p>
diff --git a/client/src/pages/views/Drafts.svelte b/client/src/pages/views/Drafts.svelte
deleted file mode 100644
index d57a33c04..000000000
--- a/client/src/pages/views/Drafts.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<p>Drafts!</p>
diff --git a/client/src/pages/views/Inbox.svelte b/client/src/pages/views/Inbox.svelte
deleted file mode 100644
index 8ec79f018..000000000
--- a/client/src/pages/views/Inbox.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<p>Inbox!</p>
diff --git a/client/src/pages/views/Metrics.svelte b/client/src/pages/views/Metrics.svelte
deleted file mode 100644
index e2c3b5bd5..000000000
--- a/client/src/pages/views/Metrics.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<p>Metrics!</p>
diff --git a/client/src/pages/views/Outbox.svelte b/client/src/pages/views/Outbox.svelte
deleted file mode 100644
index 7eaa90b1b..000000000
--- a/client/src/pages/views/Outbox.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<p>Outbox!</p>

From aefd0ec13f8c34f8bc404999ae9b5477a83b4de3 Mon Sep 17 00:00:00 2001
From: Marc Macaraeg <mcmacaraeg2@up.edu.ph>
Date: Thu, 23 Mar 2023 15:19:21 +0800
Subject: [PATCH 22/36] fix(client): adjusted renamed routes

---
 client/src/pages/dashboard/routes.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/pages/dashboard/routes.ts b/client/src/pages/dashboard/routes.ts
index 94546afa8..01fe46004 100644
--- a/client/src/pages/dashboard/routes.ts
+++ b/client/src/pages/dashboard/routes.ts
@@ -1,10 +1,10 @@
 import Barcodes from './views/Barcodes.svelte';
 import Drafts from './views/Drafts.svelte';
 import Inbox from './views/Inbox.svelte';
-import ManageAdministrators from './views/ManageAdministrators.svelte';
-import ManageGlobalSettings from './views/ManageGlobalSettings.svelte';
-import ManageInvites from './views/ManageInvites.svelte';
-import ManageStaff from './views/ManageStaff.svelte';
+import ManageAdministrators from './views/Admins.svelte';
+import ManageGlobalSettings from './views/Settings.svelte';
+import ManageInvites from './views/Invites.svelte';
+import ManageStaff from './views/Staff.svelte';
 import Metrics from './views/Metrics.svelte';
 import Outbox from './views/Outbox.svelte';
 

From 65f3046b2ebe833e6ec34ed3d2dbec4e39072a6e Mon Sep 17 00:00:00 2001
From: Marc Macaraeg <mcmacaraeg2@up.edu.ph>
Date: Thu, 23 Mar 2023 15:21:05 +0800
Subject: [PATCH 23/36] feat(client): added hamburger menu icon

---
 client/src/assets/icons/menu.svg        |  1 +
 client/src/components/icons/Menu.svelte | 13 +++++++++++++
 2 files changed, 14 insertions(+)
 create mode 100644 client/src/assets/icons/menu.svg
 create mode 100644 client/src/components/icons/Menu.svelte

diff --git a/client/src/assets/icons/menu.svg b/client/src/assets/icons/menu.svg
new file mode 100644
index 000000000..7f09d36f7
--- /dev/null
+++ b/client/src/assets/icons/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"/></svg>
\ No newline at end of file
diff --git a/client/src/components/icons/Menu.svelte b/client/src/components/icons/Menu.svelte
new file mode 100644
index 000000000..96f6b978c
--- /dev/null
+++ b/client/src/components/icons/Menu.svelte
@@ -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 />
\ No newline at end of file

From 4fcd79397d513b03b76d7709a9ac59e4147993cc Mon Sep 17 00:00:00 2001
From: Marc Macaraeg <mcmacaraeg2@up.edu.ph>
Date: Thu, 23 Mar 2023 15:24:13 +0800
Subject: [PATCH 24/36] fix(client): adjusted Navbar styles

---
 client/src/components/ui/navigationbar/NavDrawer.svelte | 1 -
 client/src/components/ui/navigationbar/Navbar.svelte    | 4 +++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
index 57c87b8a6..4b4a8514a 100644
--- a/client/src/components/ui/navigationbar/NavDrawer.svelte
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -21,7 +21,6 @@
 @import url(../../../pages/global.css);
 
     nav {
-        --acc-color: blue;
         background-color: var(--nav-bg);
         display: flex;
         flex-direction: column;
diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
index 214d18678..8ce3bf2e8 100644
--- a/client/src/components/ui/navigationbar/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -49,6 +49,8 @@
 <Router {routes} />
 
 <style>
+    @import url(../../../pages/global.css);
+
     nav {
         background-color: var(--secondary-color);
         box-shadow: 0 1px 8px #ddd;
@@ -86,7 +88,7 @@
 
     .navitem:hover {
         background-color: var(--danger-color);
-        transition: all 0.3s ease 0s;
+        transition: all var(--animation-length) ease 0s;
     }
 
     .mobile-icon {

From d0ebe0c303ac470289af472ed40a96d6d503be52 Mon Sep 17 00:00:00 2001
From: Marc Macaraeg <mcmacaraeg2@up.edu.ph>
Date: Thu, 23 Mar 2023 15:25:12 +0800
Subject: [PATCH 25/36] fix(client): removed unused variable in NavPicture

---
 client/src/components/ui/navigationbar/NavPicture.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/ui/navigationbar/NavPicture.svelte b/client/src/components/ui/navigationbar/NavPicture.svelte
index aeefb7b7a..8a12ba25f 100644
--- a/client/src/components/ui/navigationbar/NavPicture.svelte
+++ b/client/src/components/ui/navigationbar/NavPicture.svelte
@@ -1,6 +1,5 @@
 <script>
     export let name; 
-    export let email;
 </script>
 
 <div>

From 1b9f162e249d7840dc173b0ed22beda72a10ce57 Mon Sep 17 00:00:00 2001
From: Basti Ortiz <39114273+BastiDood@users.noreply.github.com>
Date: Thu, 23 Mar 2023 15:03:47 +0800
Subject: [PATCH 26/36] refactor(client): move routes to an index file

---
 client/src/pages/dashboard/Dashboard.svelte |  2 --
 client/src/pages/dashboard/routes.ts        | 21 ---------------------
 client/src/pages/dashboard/views/index.ts   | 21 +++++++++++++++++++++
 3 files changed, 21 insertions(+), 23 deletions(-)
 delete mode 100644 client/src/pages/dashboard/routes.ts
 create mode 100644 client/src/pages/dashboard/views/index.ts

diff --git a/client/src/pages/dashboard/Dashboard.svelte b/client/src/pages/dashboard/Dashboard.svelte
index 3a18ae0e6..e4516be0b 100644
--- a/client/src/pages/dashboard/Dashboard.svelte
+++ b/client/src/pages/dashboard/Dashboard.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import Router, { push, pop, replace } from 'svelte-spa-router';
-
     import { register } from '../register.ts';
     import { Session } from '../../api/session.ts';
     import Navbar from '../../components/ui/navigationbar/Navbar.svelte';
diff --git a/client/src/pages/dashboard/routes.ts b/client/src/pages/dashboard/routes.ts
deleted file mode 100644
index 01fe46004..000000000
--- a/client/src/pages/dashboard/routes.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import Barcodes from './views/Barcodes.svelte';
-import Drafts from './views/Drafts.svelte';
-import Inbox from './views/Inbox.svelte';
-import ManageAdministrators from './views/Admins.svelte';
-import ManageGlobalSettings from './views/Settings.svelte';
-import ManageInvites from './views/Invites.svelte';
-import ManageStaff from './views/Staff.svelte';
-import Metrics from './views/Metrics.svelte';
-import Outbox from './views/Outbox.svelte';
-
-export default {
-    '/barcodes': Barcodes,
-    '/drafts': Drafts,
-    '/inbox': Inbox,
-    '/manage-administrators': ManageAdministrators,
-    '/manage-global-settings': ManageGlobalSettings,
-    '/manage-invites': ManageInvites,
-    '/manage-staff': ManageStaff,
-    '/metrics': Metrics,
-    '/outbox': Outbox,
-};
diff --git a/client/src/pages/dashboard/views/index.ts b/client/src/pages/dashboard/views/index.ts
new file mode 100644
index 000000000..81638ae53
--- /dev/null
+++ b/client/src/pages/dashboard/views/index.ts
@@ -0,0 +1,21 @@
+import Barcodes from './Barcodes.svelte';
+import Drafts from './Drafts.svelte';
+import Inbox from './Inbox.svelte';
+import ManageAdministrators from './Admins.svelte';
+import ManageGlobalSettings from './Settings.svelte';
+import ManageInvites from './Invites.svelte';
+import ManageStaff from './Staff.svelte';
+import Metrics from './Metrics.svelte';
+import Outbox from './Outbox.svelte';
+
+export default {
+    '/barcodes': Barcodes,
+    '/drafts': Drafts,
+    '/inbox': Inbox,
+    '/manage-administrators': ManageAdministrators,
+    '/manage-global-settings': ManageGlobalSettings,
+    '/manage-invites': ManageInvites,
+    '/manage-staff': ManageStaff,
+    '/metrics': Metrics,
+    '/outbox': Outbox,
+};

From e72a7aa509906c1a00e2e569fe322d6f0d9299ac Mon Sep 17 00:00:00 2001
From: Basti Ortiz <39114273+BastiDood@users.noreply.github.com>
Date: Thu, 23 Mar 2023 17:00:31 +0800
Subject: [PATCH 27/36] refactor(client): remove excessive styles

---
 .../ui/navigationbar/NavDrawer.svelte         | 44 ++++-----
 .../ui/navigationbar/NavPicture.svelte        | 24 -----
 .../components/ui/navigationbar/Navbar.svelte | 96 +++----------------
 client/src/pages/dashboard/Dashboard.svelte   | 50 +++++-----
 4 files changed, 60 insertions(+), 154 deletions(-)
 delete mode 100644 client/src/components/ui/navigationbar/NavPicture.svelte

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
index 4b4a8514a..9c3cd4511 100644
--- a/client/src/components/ui/navigationbar/NavDrawer.svelte
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -1,37 +1,39 @@
 <script>
     export let show = false;
-    export let navItems;
-
-    let selected;
 </script>
 
-<nav class:show={!show}>
-  <div>
-        {#each navItems as item} 
-            <a href={`#/${item.href}`} on:click={() => {selected = item.href}} class={selected == item.href ? "selected" : ""}>
-                {item.label}
-            </a>
-      {/each}
-  </div>
-  <form method="POST" action="/auth/logout">
-      <input type="submit" value="Logout" />
-  </form>
+<nav class:show={show}>
+    <section>
+        <a href="#/inbox">Inbox</a>
+        <a href="#/outbox">Outbox</a>
+        <a href="#/drafts">Drafts</a>
+        <a href="#/barcodes">Manage Barcodes</a>
+        <a href="#/invites">Manage Invites</a>
+        <a href="#/staff">Manage Staff</a>
+        <a href="#/admin">Manage Administrators</a>
+        <a href="#/metrics">Metrics</a>
+        <a href="#/settings">Settings</a>
+    </section>
+    <form method="POST" action="/auth/logout">
+        <input type="submit" value="Logout" />
+    </form>
 </nav>
+
 <style>
-@import url(../../../pages/global.css);
+    @import url('../../../pages/global.css');
 
     nav {
         background-color: var(--nav-bg);
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        position: absolute;
+        max-width: 300px;
         left: 0;
-        top: 75px;
-        z-index: 0;
+        position: relative;
         transition: left var(--animation-length);
         height: 100%;
     }
+
     nav.show {
         left: -100%;
     }
@@ -41,9 +43,7 @@
         color: initial;
         display: block;
         padding: var(--spacing-normal);
-        width: 175pt;
         text-decoration: none;
-        user-select: none;
         transition: background-color var(--animation-length), border-left var(--animation-length);
     }
 
@@ -52,10 +52,6 @@
         
     }
 
-    .selected {
-        border-right: var(--spacing-normal) solid var(--nav-bg);
-    }
-
     input[type="submit"] {
         background-color: var(--bg-color);
         border-left: var(--spacing-normal) solid transparent;
diff --git a/client/src/components/ui/navigationbar/NavPicture.svelte b/client/src/components/ui/navigationbar/NavPicture.svelte
deleted file mode 100644
index 8a12ba25f..000000000
--- a/client/src/components/ui/navigationbar/NavPicture.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-    export let name; 
-</script>
-
-<div>
-    <div class="profilepicture"><p style="user-select: none">{name[0]}</p></div>
-    <p style="float: left; user-select: none;">{name.split(" ")[name.split(" ").length-1]}</p>
-</div>
-
-<style>
-
-    .profilepicture {
-        border-radius: 50%;
-        background-color: white;
-        border: 10px;
-        text-align: center;
-        width: 30pt;
-        height: 30pt;
-    }
-
-    .profilepicture:checked {
-        background-color: red;
-    }
-</style>
\ No newline at end of file
diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
index 8ce3bf2e8..cd8e706cc 100644
--- a/client/src/components/ui/navigationbar/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -1,53 +1,26 @@
 <script lang="ts">
     import { Session } from '../../../api/session.ts';
-    import NavPicture from './NavPicture.svelte';
+    import { ButtonType } from '../../../components/types.ts';
 
     import Button from '../Button.svelte';
-    import Logout from '../../icons/Logout.svelte';
     import Hamburger from '../../icons/Eye.svelte';
 
-    import { ButtonType } from '../../../components/types.ts';
-
-    
-
-    import Router, { push, pop, replace } from 'svelte-spa-router';
-    import routes from '../../../pages/dashboard/routes.ts';
-
-    // Mobile stuff 
-    export let showBar : boolean;
-
-    function logout() {
-        const form = document.createElement('form');
-        form.method = 'post';
-        form.action = "/auth/logout";
-
-        const hiddenField = document.createElement('input');
-        hiddenField.type = 'hidden';
-
-        form.appendChild(hiddenField);
-        document.body.appendChild(form);
-        form.submit();
-    }
+    export let show = false;
 </script>
 
-    
-<nav class="navelements">
-    <div class={`mobile-icon`}>
-        <Button type={ButtonType.Primary} on:click={() => showBar = !showBar}>
-            <Hamburger />
-        </Button>
-    </div>
-
-    <div><button class={`navitem`} on:click={() => logout()}><Logout /></button></div>
-    {#await Session.getUser()}
-        <NavPicture name="Guest" email="Guest" />
-    {:then user}
-        <NavPicture name={user.name} email={user.email}  />
-    {/await}
+<nav>
+    <span id="icon">
+        <Hamburger on:click={() => show = !show} />
+    </span>
+    <span>
+        {#await Session.getUser()}
+            Hello!
+            {:then user}
+            Hello, {user.name}!
+        {/await}
+    </span>
 </nav>
 
-<Router {routes} />
-
 <style>
     @import url(../../../pages/global.css);
 
@@ -55,50 +28,9 @@
         background-color: var(--secondary-color);
         box-shadow: 0 1px 8px #ddd;
         padding: var(--spacing-small);
-        justify-content: space-evenly;
-        position: sticky;
-    }
-
-    button {
-        padding: 0;
-        border: 0;
-        outline: 0;
-        background-color: transparent;
     }
 
-    .navelements {
-        display: flex;
-        flex-direction: row-reverse;
-        flex-flow: row wrap;
-        justify-content: flex-end;
-        list-style-type: none;
-    }
-    
-    .navitem {
-        list-style: none;
-        padding: 1em;
-        height: 50pt;
-        background: none;
-        text-decoration: none;
+    #icon {
         cursor: pointer;
-        user-select: none;
-        color: var(--primary-color);
-        display: inline-block;
-    }
-
-    .navitem:hover {
-        background-color: var(--danger-color);
-        transition: all var(--animation-length) ease 0s;
-    }
-
-    .mobile-icon {
-        top: 0;
-        left: 0;
-        position: fixed;
-        user-select: none;
-    }
-
-    .hidden {
-        display: none;
     }
 </style>
diff --git a/client/src/pages/dashboard/Dashboard.svelte b/client/src/pages/dashboard/Dashboard.svelte
index e4516be0b..a82f8e932 100644
--- a/client/src/pages/dashboard/Dashboard.svelte
+++ b/client/src/pages/dashboard/Dashboard.svelte
@@ -1,34 +1,36 @@
-<script lang="ts">
-    import { register } from '../register.ts';
-    import { Session } from '../../api/session.ts';
+<script>
+    import Router from 'svelte-spa-router';
+
     import Navbar from '../../components/ui/navigationbar/Navbar.svelte';
-    import Button from '../../components/ui/Button.svelte';
+    import NavDrawer from '../../components/ui/navigationbar/NavDrawer.svelte';
 
-    import routes from './routes.ts';
-    import Sidebar from '../../components/ui/navigationbar/NavDrawer.svelte';
+    import routes from './views/index.ts';
+    import { register } from '../register.ts';
 
     let toggleDrawer = false;
-
-    // TODO: Updates based on permissions
-    let navItems = [
-        { label: "Inbox", href: "inbox", key:'I' },
-        { label: "Outbox", href: "outbox", key:'O' },
-        { label: "Drafts", href: "drafts", key:'D' },
-        { label: "Barcodes", href: "barcodes", key:'B' },
-        { label: "Metrics", href: "metrics", key:'M' },
-        { label: "Manage Invites", href: "manage-invites", key:'N' },
-        { label: "Manage Staff", href: "manage-staff", key:'S' },
-        { label: "Manage Administrators", href: "manage-administrators", key:'A' },
-        { label: "Manage Global Settings", href: "manage-global-settings", key:'G' }, 
-    ];
-
 </script>
+
+<main>
     {#await register()}
         Waiting for service worker...
     {:then}
-        <main>
-            <Navbar bind:showBar={toggleDrawer} bind:navItems={navItems} />
-            <Sidebar bind:show={toggleDrawer} bind:navItems={navItems} />
-        </main>
+        <Navbar bind:show={toggleDrawer} />
+        <section>
+            <NavDrawer show={toggleDrawer} />
+            <Router {routes} />
+        </section>
     {/await}
+</main>
+
+<style>
+    main {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
 
+    section {
+        height: 100%;
+        position: relative;
+    }
+</style>

From 95c97aa9e0c479300edc678fcb85344b2f7e1158 Mon Sep 17 00:00:00 2001
From: Basti Ortiz <39114273+BastiDood@users.noreply.github.com>
Date: Thu, 23 Mar 2023 17:06:19 +0800
Subject: [PATCH 28/36] chore(client): remove unused imports

---
 client/src/components/ui/navigationbar/Navbar.svelte | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
index cd8e706cc..61b97671e 100644
--- a/client/src/components/ui/navigationbar/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
     import { Session } from '../../../api/session.ts';
-    import { ButtonType } from '../../../components/types.ts';
-
-    import Button from '../Button.svelte';
-    import Hamburger from '../../icons/Eye.svelte';
+    import Hamburger from '../../icons/Menu.svelte';
 
     export let show = false;
 </script>

From c91c6c4de0aeb1654555b9f4e02b92a23bf15a62 Mon Sep 17 00:00:00 2001
From: Basti Ortiz <39114273+BastiDood@users.noreply.github.com>
Date: Thu, 23 Mar 2023 17:16:46 +0800
Subject: [PATCH 29/36] refactor(client): use correct CSS imports

---
 client/src/components/ui/navigationbar/NavDrawer.svelte | 2 +-
 client/src/components/ui/navigationbar/Navbar.svelte    | 2 +-
 client/src/pages/dashboard/index.html                   | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
index 9c3cd4511..1084c7a83 100644
--- a/client/src/components/ui/navigationbar/NavDrawer.svelte
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -20,7 +20,7 @@
 </nav>
 
 <style>
-    @import url('../../../pages/global.css');
+    @import url('../../../pages/vars.css');
 
     nav {
         background-color: var(--nav-bg);
diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
index 61b97671e..013cbdec0 100644
--- a/client/src/components/ui/navigationbar/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -19,7 +19,7 @@
 </nav>
 
 <style>
-    @import url(../../../pages/global.css);
+    @import url('../../../pages/vars.css');
 
     nav {
         background-color: var(--secondary-color);
diff --git a/client/src/pages/dashboard/index.html b/client/src/pages/dashboard/index.html
index 14b836438..04c16b1d7 100644
--- a/client/src/pages/dashboard/index.html
+++ b/client/src/pages/dashboard/index.html
@@ -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>

From 867ed1ac1174781ed2e9d591a629ee5db8d155ba Mon Sep 17 00:00:00 2001
From: Basti Ortiz <39114273+BastiDood@users.noreply.github.com>
Date: Thu, 23 Mar 2023 17:35:17 +0800
Subject: [PATCH 30/36] fix(client): use correct navigation links

---
 .../src/components/ui/navigationbar/NavDrawer.svelte   | 10 ++++------
 client/src/pages/dashboard/views/index.ts              |  8 ++++----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
index 1084c7a83..f1b26a06a 100644
--- a/client/src/components/ui/navigationbar/NavDrawer.svelte
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -26,20 +26,19 @@
         background-color: var(--nav-bg);
         display: flex;
         flex-direction: column;
+        height: 100%;
         justify-content: space-between;
         max-width: 300px;
-        left: 0;
-        position: relative;
+        left: -100%;
+        position: absolute;
         transition: left var(--animation-length);
-        height: 100%;
     }
 
     nav.show {
-        left: -100%;
+        left: 0;
     }
   
     a {
-        border-left: var(--spacing-normal) solid transparent;
         color: initial;
         display: block;
         padding: var(--spacing-normal);
@@ -54,7 +53,6 @@
 
     input[type="submit"] {
         background-color: var(--bg-color);
-        border-left: var(--spacing-normal) solid transparent;
         cursor: pointer;
         margin: 0;
         padding: var(--spacing-normal);
diff --git a/client/src/pages/dashboard/views/index.ts b/client/src/pages/dashboard/views/index.ts
index 81638ae53..5f4d66fcc 100644
--- a/client/src/pages/dashboard/views/index.ts
+++ b/client/src/pages/dashboard/views/index.ts
@@ -12,10 +12,10 @@ export default {
     '/barcodes': Barcodes,
     '/drafts': Drafts,
     '/inbox': Inbox,
-    '/manage-administrators': ManageAdministrators,
-    '/manage-global-settings': ManageGlobalSettings,
-    '/manage-invites': ManageInvites,
-    '/manage-staff': ManageStaff,
+    '/admin': ManageAdministrators,
+    '/settings': ManageGlobalSettings,
+    '/invites': ManageInvites,
+    '/staff': ManageStaff,
     '/metrics': Metrics,
     '/outbox': Outbox,
 };

From f16b83e0d790b0efae4004a5d3b58c4be1e737d3 Mon Sep 17 00:00:00 2001
From: Basti Ortiz <39114273+BastiDood@users.noreply.github.com>
Date: Thu, 23 Mar 2023 17:50:48 +0800
Subject: [PATCH 31/36] feat(client): add profile picture

---
 .../components/ui/navigationbar/Navbar.svelte | 28 +++++++++++--------
 client/src/pages/dashboard/Dashboard.svelte   | 15 ++++++----
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
index 013cbdec0..499bb661c 100644
--- a/client/src/components/ui/navigationbar/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -1,33 +1,39 @@
 <script lang="ts">
-    import { Session } from '../../../api/session.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>
-    <span id="icon">
-        <Hamburger on:click={() => show = !show} />
-    </span>
-    <span>
-        {#await Session.getUser()}
-            Hello!
-            {:then user}
-            Hello, {user.name}!
-        {/await}
-    </span>
+    <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(--secondary-color);
         box-shadow: 0 1px 8px #ddd;
+        display: flex;
+        justify-content: space-between;
         padding: var(--spacing-small);
     }
 
     #icon {
         cursor: pointer;
     }
+
+    img {
+        border-radius: 50%;
+        display: block;
+        height: 1.25rem;
+    }
 </style>
diff --git a/client/src/pages/dashboard/Dashboard.svelte b/client/src/pages/dashboard/Dashboard.svelte
index a82f8e932..566c9884c 100644
--- a/client/src/pages/dashboard/Dashboard.svelte
+++ b/client/src/pages/dashboard/Dashboard.svelte
@@ -6,6 +6,7 @@
 
     import routes from './views/index.ts';
     import { register } from '../register.ts';
+    import { Session } from '../../api/session.ts';
 
     let toggleDrawer = false;
 </script>
@@ -14,11 +15,15 @@
     {#await register()}
         Waiting for service worker...
     {:then}
-        <Navbar bind:show={toggleDrawer} />
-        <section>
-            <NavDrawer show={toggleDrawer} />
-            <Router {routes} />
-        </section>
+        {#await Session.getUser()}
+            Loading user...
+        {:then user}
+            <Navbar {user} bind:show={toggleDrawer} />
+            <section>
+                <NavDrawer show={toggleDrawer} />
+                <Router {routes} />
+            </section>
+        {/await}
     {/await}
 </main>
 

From f42d12867a50483e888df5f36cdb4628d3a89e9a Mon Sep 17 00:00:00 2001
From: Basti Ortiz <39114273+BastiDood@users.noreply.github.com>
Date: Fri, 24 Mar 2023 00:20:22 +0800
Subject: [PATCH 32/36] fix(client): use correct colors for dashboard

---
 .../ui/navigationbar/NavDrawer.svelte         | 48 +++++++++++--------
 .../components/ui/navigationbar/Navbar.svelte |  2 +-
 client/src/pages/vars.css                     | 12 ++---
 3 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
index f1b26a06a..ba65e4eb0 100644
--- a/client/src/components/ui/navigationbar/NavDrawer.svelte
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -1,18 +1,19 @@
 <script>
+    import active from 'svelte-spa-router/active';
     export let show = false;
 </script>
 
 <nav class:show={show}>
     <section>
-        <a href="#/inbox">Inbox</a>
-        <a href="#/outbox">Outbox</a>
-        <a href="#/drafts">Drafts</a>
-        <a href="#/barcodes">Manage Barcodes</a>
-        <a href="#/invites">Manage Invites</a>
-        <a href="#/staff">Manage Staff</a>
-        <a href="#/admin">Manage Administrators</a>
-        <a href="#/metrics">Metrics</a>
-        <a href="#/settings">Settings</a>
+        <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" />
@@ -23,45 +24,50 @@
     @import url('../../../pages/vars.css');
 
     nav {
-        background-color: var(--nav-bg);
+        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);
+        z-index: 100;
     }
 
-    nav.show {
+    .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-left var(--animation-length);
-    }
-
-    a:hover {
-        background-color: #eee;
-        
+        transition: background-color var(--animation-length), border-right var(--animation-length);
     }
 
     input[type="submit"] {
-        background-color: var(--bg-color);
+        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);
+        transition: background-color var(--animation-length), border-right var(--animation-length);
         width: 100%;
     }
 
-    input[type="submit"]:hover {
-        background-color: #aaa;
+    a:hover, input[type="submit"]:hover, :global(a.active) {
+        background-color: var(--hover-color);
+        border-right: var(--spacing-small) solid var(--primary-color);
     }
 </style>
diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
index 499bb661c..21f3c6a7b 100644
--- a/client/src/components/ui/navigationbar/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -20,7 +20,7 @@
 
     nav {
         align-content: center;
-        background-color: var(--secondary-color);
+        background-color: var(--primary-color);
         box-shadow: 0 1px 8px #ddd;
         display: flex;
         justify-content: space-between;
diff --git a/client/src/pages/vars.css b/client/src/pages/vars.css
index b46f34182..ea1adb0d8 100644
--- a/client/src/pages/vars.css
+++ b/client/src/pages/vars.css
@@ -2,11 +2,12 @@
     --primary-color: #4040f2;
     --secondary-color: #0d0d54;
     --danger-color: #ca1717;
-    --nav-bg: #0eb2e4;
+    --hover-color: #eaeaea;
+
     --login-bg: #ffb334;
-    --dashboard-bg: radial-gradient(circle at 18.7% 37.8%, rgb(250, 250, 250) 0%, rgb(225, 234, 238) 90%);
-    --text-color: #000000;
+    --dashboard-bg: #fff;
 
+    --text-color: #000000;
     --font-size: 16px;
     --x-large: 2rem;
     --large: 1.5rem;
@@ -22,6 +23,5 @@
     --spacing-tiny: 0.0625rem;
 
     --border-radius: 10px;
-    --animation-length: .3s;
-
-}
\ No newline at end of file
+    --animation-length: .2s;
+}

From 8e6adadc1fc62f9dcbb2377e2719b6c47315a69c Mon Sep 17 00:00:00 2001
From: Basti Ortiz <39114273+BastiDood@users.noreply.github.com>
Date: Fri, 24 Mar 2023 00:25:46 +0800
Subject: [PATCH 33/36] refactor(client): extract hard-coded values as
 variables

---
 client/src/components/ui/navigationbar/Navbar.svelte | 2 +-
 client/src/pages/vars.css                            | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/Navbar.svelte
index 21f3c6a7b..ce976780b 100644
--- a/client/src/components/ui/navigationbar/Navbar.svelte
+++ b/client/src/components/ui/navigationbar/Navbar.svelte
@@ -21,7 +21,7 @@
     nav {
         align-content: center;
         background-color: var(--primary-color);
-        box-shadow: 0 1px 8px #ddd;
+        box-shadow: 0 1px var(--spacing-normal) var(--shadow-color);
         display: flex;
         justify-content: space-between;
         padding: var(--spacing-small);
diff --git a/client/src/pages/vars.css b/client/src/pages/vars.css
index ea1adb0d8..21bcfea80 100644
--- a/client/src/pages/vars.css
+++ b/client/src/pages/vars.css
@@ -3,6 +3,7 @@
     --secondary-color: #0d0d54;
     --danger-color: #ca1717;
     --hover-color: #eaeaea;
+    --shadow-color: #ddd;
 
     --login-bg: #ffb334;
     --dashboard-bg: #fff;

From 2fb9d7800617feaa6090d8eef0bfc7f70dd9045b Mon Sep 17 00:00:00 2001
From: Basti Ortiz <39114273+BastiDood@users.noreply.github.com>
Date: Fri, 24 Mar 2023 00:27:50 +0800
Subject: [PATCH 34/36] fix(client): revert animation speed

---
 client/src/pages/vars.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/pages/vars.css b/client/src/pages/vars.css
index 21bcfea80..04006b1b0 100644
--- a/client/src/pages/vars.css
+++ b/client/src/pages/vars.css
@@ -24,5 +24,5 @@
     --spacing-tiny: 0.0625rem;
 
     --border-radius: 10px;
-    --animation-length: .2s;
+    --animation-length: .3s;
 }

From 9d37e53fbd4c23b41b8e80c0d2eb5f6835302056 Mon Sep 17 00:00:00 2001
From: Basti Ortiz <39114273+BastiDood@users.noreply.github.com>
Date: Fri, 24 Mar 2023 00:28:06 +0800
Subject: [PATCH 35/36] fix(client): remove unused `z-index`

---
 client/src/components/ui/navigationbar/NavDrawer.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/NavDrawer.svelte
index ba65e4eb0..486a16c5a 100644
--- a/client/src/components/ui/navigationbar/NavDrawer.svelte
+++ b/client/src/components/ui/navigationbar/NavDrawer.svelte
@@ -34,7 +34,6 @@
         left: -100%;
         position: absolute;
         transition: left var(--animation-length);
-        z-index: 100;
     }
 
     .show {

From 4626e6acaaed2a8d792ace7d060666e70d5e655e Mon Sep 17 00:00:00 2001
From: Basti Ortiz <39114273+BastiDood@users.noreply.github.com>
Date: Fri, 24 Mar 2023 03:06:30 +0800
Subject: [PATCH 36/36] chore(client): rename navigation components

---
 .../navigationbar/{NavDrawer.svelte => SideDrawer.svelte} | 0
 .../ui/navigationbar/{Navbar.svelte => TopBar.svelte}     | 0
 client/src/pages/dashboard/Dashboard.svelte               | 8 ++++----
 3 files changed, 4 insertions(+), 4 deletions(-)
 rename client/src/components/ui/navigationbar/{NavDrawer.svelte => SideDrawer.svelte} (100%)
 rename client/src/components/ui/navigationbar/{Navbar.svelte => TopBar.svelte} (100%)

diff --git a/client/src/components/ui/navigationbar/NavDrawer.svelte b/client/src/components/ui/navigationbar/SideDrawer.svelte
similarity index 100%
rename from client/src/components/ui/navigationbar/NavDrawer.svelte
rename to client/src/components/ui/navigationbar/SideDrawer.svelte
diff --git a/client/src/components/ui/navigationbar/Navbar.svelte b/client/src/components/ui/navigationbar/TopBar.svelte
similarity index 100%
rename from client/src/components/ui/navigationbar/Navbar.svelte
rename to client/src/components/ui/navigationbar/TopBar.svelte
diff --git a/client/src/pages/dashboard/Dashboard.svelte b/client/src/pages/dashboard/Dashboard.svelte
index 566c9884c..c50b1586e 100644
--- a/client/src/pages/dashboard/Dashboard.svelte
+++ b/client/src/pages/dashboard/Dashboard.svelte
@@ -1,8 +1,8 @@
 <script>
     import Router from 'svelte-spa-router';
 
-    import Navbar from '../../components/ui/navigationbar/Navbar.svelte';
-    import NavDrawer from '../../components/ui/navigationbar/NavDrawer.svelte';
+    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';
@@ -18,9 +18,9 @@
         {#await Session.getUser()}
             Loading user...
         {:then user}
-            <Navbar {user} bind:show={toggleDrawer} />
+            <TopBar {user} bind:show={toggleDrawer} />
             <section>
-                <NavDrawer show={toggleDrawer} />
+                <SideDrawer show={toggleDrawer} />
                 <Router {routes} />
             </section>
         {/await}