Make navbar more responsive

web/src/components/ExampleComponent.svelte

@@ -1,16 +0,0 @@
-<script lang="typescript">
-	export let title: string;
-	export let paragraph: string;
-</script>
-
-<svelte:options immutable />
-
-<style>
-	p {
-		color: #4A5568;
-		margin-top: 1rem;
-	}
-</style>
-
-<h1 class="text-red-200">{title}</h1>
-<p>{paragraph}</p>

web/src/components/Nav.svelte

@@ -0,0 +1,96 @@
+<script lang="typescript">
+    import { faBars } from "@fortawesome/free-solid-svg-icons";
+    import Icon from "svelte-awesome/components/Icon.svelte";
+
+    interface RouteDefinition {
+        route: string;
+        moderatorOnly: boolean;
+        name: string;
+    }
+    export let routes!: RouteDefinition[];
+    export let isModerator!: boolean;
+    export let currentPath!: string;
+
+    const bars = (faBars as unknown) as undefined;
+    let showMenu = false;
+</script>
+
+<style>
+    nav {
+        @apply fixed w-screen z-10;
+    }
+    .nav-bar {
+        @apply shadow-lg flex flex-col;
+        background-color: #0a0d13;
+
+        &.main {
+            background-color: #07090d;
+        }
+
+        &.mobile-menu {
+            @apply flex-row;
+        }
+
+        a {
+            @apply text-white px-5 py-3;
+
+            &:hover {
+                @apply bg-gray-800 cursor-pointer;
+            }
+
+            &.active {
+                @apply bg-gray-800;
+            }
+        }
+    }
+
+    .hide-menu {
+        display: none;
+    }
+
+    .divider {
+        @apply mx-0 my-2;
+    }
+
+    :global {
+        svg.menu-icon {
+            vertical-align: sub;
+        }
+    }
+
+    @screen sm {
+        .nav-bar.main {
+            @apply px-4 h-12 flex-row items-center;
+            background-color: #0a0d13;
+        }
+
+        .divider {
+            @apply mx-auto my-0;
+        }
+
+        .nav-bar.mobile-menu {
+            @apply hidden;
+        }
+
+        .hide-menu {
+            display: flex;
+        }
+    }
+</style>
+
+<nav>
+    <div class="nav-bar mobile-menu">
+        <a href="/" class="mx-0" on:click|preventDefault={() => showMenu = !showMenu}><Icon data={bars} scale={1.2} class="menu-icon" /></a>
+    </div>
+    <div class="nav-bar main" class:hide-menu={!showMenu}>
+        {#each routes as route (route.route)}
+            {#if !route.moderatorOnly || (route.moderatorOnly && isModerator)}
+                <a
+                    href="/{route.route}"
+                    class:active={route.route == currentPath} on:click={() => showMenu = false}>{route.name}</a>
+            {/if}
+        {/each}
+        <span class="divider" />
+        <a href="/logout">Log out</a>
+    </div>
+</nav>

web/src/routes/_layout.svelte

@@ -1,7 +1,6 @@
 <script lang="typescript" context="module">
   import type { AppSession, PageData, PreloadContext } from "src/utils/session";
   import type { AuthInfo } from "src/routes/login/check";
-  import { goto } from "@sapper/app";
 
   // TODO: Clean up this awful mess
   export async function preload(
@@ -35,6 +34,7 @@
 
 <script lang="typescript">
   import { stores } from "@sapper/app";
+  import Nav from "../components/Nav.svelte";
   const { page } = stores();
 
   export let loggedIn!: boolean;
@@ -43,9 +43,9 @@
   $: path = $page.path.slice(1);
 
   const ROUTES_NAV = [
-    { route: "rules", moderator: false, name: "Rules" },
-    { route: "rules/edit", moderator: true, name: "Edit rules" },
-    { route: "logs", moderator: true, name: "Event logs" },
+    { route: "rules", moderatorOnly: false, name: "Rules" },
+    { route: "rules/edit", moderatorOnly: true, name: "Edit rules" },
+    { route: "logs", moderatorOnly: true, name: "Event logs" },
   ];
 </script>
 
@@ -58,23 +58,6 @@
     @apply font-sans;
   }
 
-  nav {
-    @apply fixed w-screen h-12 shadow-lg flex flex-row items-center px-4 z-10;
-    background-color: #0a0d13;
-
-    a {
-      @apply text-white px-5 py-3;
-
-      &:hover {
-        @apply bg-gray-800 cursor-pointer;
-      }
-
-      &.active {
-        @apply bg-gray-800;
-      }
-    }
-  }
-
   .viewport {
     @apply bg-gray-700 h-screen w-full pb-8 px-20 pt-16;
     margin-top: 3rem;
@@ -91,15 +74,7 @@
 
 
 {#if loggedIn}
-  <nav>
-    {#each ROUTES_NAV as route (route.route) }
-      {#if !route.moderator || (route.moderator && moderator) }
-        <a href="/{route.route}" class:active={route.route == path}>{route.name}</a>
-      {/if}
-    {/each}
-    <span class="mx-auto"></span>
-    <a href="/logout">Log out</a>
-  </nav>
+  <Nav routes={ROUTES_NAV} currentPath={path} isModerator={moderator} />
 {/if}
 
 <div class="flex items-center justify-center bg-gray-900 h-screen w-screen">

web/src/routes/index.svelte

@@ -1,7 +1,6 @@
 <script lang="typescript">
   import Icon from "svelte-awesome/components/Icon.svelte";
   import { faDiscord } from "@fortawesome/free-brands-svg-icons";
-  import ExampleComponent from "../components/ExampleComponent.svelte";
 
   const discordIcon = (faDiscord as unknown) as undefined;
 </script>