From 1afd5b5404a1c064abfe6711b95d59ea1bb13022 Mon Sep 17 00:00:00 2001
From: Ilion Beyst <ilion.beyst@gmail.com>
Date: Tue, 1 Nov 2022 23:04:46 +0100
Subject: [PATCH] highlight active tab

---
 .../src/lib/components/NavTab.svelte          | 26 +++++++++++++++++++
 .../routes/bots/[bot_name]/__layout.svelte    | 21 +++++----------
 2 files changed, 32 insertions(+), 15 deletions(-)
 create mode 100644 web/pw-server/src/lib/components/NavTab.svelte

diff --git a/web/pw-server/src/lib/components/NavTab.svelte b/web/pw-server/src/lib/components/NavTab.svelte
new file mode 100644
index 0000000..2a93897
--- /dev/null
+++ b/web/pw-server/src/lib/components/NavTab.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+  export let href: string;
+
+  $: isActive = $page.url.pathname == href;
+</script>
+
+<a class="nav-tab" {href} class:active={isActive}>
+  <slot></slot>
+</a>
+
+<style lang="scss">
+  .nav-tab {
+    padding: 8px;
+    text-decoration: none;
+    color: black;
+  }
+
+  .nav-tab:hover {
+    background-color: rgb(246, 248, 250);
+  }
+
+  .nav-tab.active {
+    border-bottom: 2px solid #0080ff;
+  }
+</style>
diff --git a/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte b/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte
index f445cbb..4393af6 100644
--- a/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte
+++ b/web/pw-server/src/routes/bots/[bot_name]/__layout.svelte
@@ -16,7 +16,8 @@
 </script>
 
 <script lang="ts">
-  import { currentUser } from "$lib/stores/current_user";
+  import NavTab from "$lib/components/NavTab.svelte";
+import { currentUser } from "$lib/stores/current_user";
 
   export let bot;
   export let owner;
@@ -35,11 +36,11 @@
     {/if}
   </div>
   <div class="bot-tabs">
-    <a class="bot-tab" href={`/bots/${bot.name}`}>index</a>
-    <a class="bot-tab" href={`/bots/${bot.name}/matches`}>matches</a>
-    <a class="bot-tab" href={`/bots/${bot.name}/stats`}>stats</a>
+    <NavTab href={`/bots/${bot.name}`}>index</NavTab>
+    <NavTab href={`/bots/${bot.name}/matches`}>matches</NavTab>
+    <NavTab href={`/bots/${bot.name}/stats`}>stats</NavTab>
     {#if $currentUser && $currentUser["user_id"] === bot["owner_id"]}
-      <a class="bot-tab" href={`/bots/${bot.name}/versions`}>versions</a>
+      <NavTab href={`/bots/${bot.name}/versions`}>versions</NavTab>
     {/if}
   </div>
 </div>
@@ -79,14 +80,4 @@
   .bot-tabs {
     display: flex;
   }
-
-  .bot-tab {
-    padding: 8px;
-    text-decoration: none;
-    color: black;
-  }
-
-  .bot-tab:hover {
-    background-color: rgb(246, 248, 250);
-  }
 </style>