Better nav

web/src/routes/_layout.svelte

@@ -40,7 +40,15 @@
   export let loggedIn!: boolean;
   export let moderator!: boolean;
   let path: string;
-  $: path = $page.path.slice(1);
+  $: {
+    path = $page.path.slice(1);
+    console.log(path);
+  }
+
+  const ROUTES_NAV = [
+    { route: "rules", moderator: false, name: "Rules" },
+    { route: "rules/edit", moderator: true, name: "Edit rules" },
+  ];
 </script>
 
 <style global>
@@ -62,6 +70,10 @@
       &:hover {
         @apply bg-gray-800 cursor-pointer;
       }
+
+      &.active {
+        @apply bg-gray-800;
+      }
     }
   }
 </style>
@@ -69,10 +81,11 @@
 
 {#if loggedIn}
   <nav>
-      <a href="/rules">Rules</a>
-    {#if moderator}
-      <a href="/rules/edit">Edit rules</a>
-    {/if}
+    {#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>