|
@@ -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>
|