From 2040a356fdef695a7e3b79e49a31f2d32def92d1 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Fri, 22 Dec 2023 14:04:38 +0100
Subject: [PATCH] Finish sliding active tab indicator

---
 frontend/src/components/tabbar.svelte | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/tabbar.svelte b/frontend/src/components/tabbar.svelte
index 83df1c2..db505b7 100644
--- a/frontend/src/components/tabbar.svelte
+++ b/frontend/src/components/tabbar.svelte
@@ -14,26 +14,18 @@
   const activeIndicatorRight = tweened(0, { easing: cubicInOut, duration: 400 });
   const liElements = {};
   let navEl;
-  let activeLiEl;
 
-  function select(tabKey, activeLi) {
+  function select(tabKey) {
     selectedKey = tabKey;
-    activeLiEl = activeLi;
     dispatch('select', tabKey);
   }
 
-  function moveActiveIndicator(target) {
+  function moveActiveIndicator(target = liElements[selectedKey]) {
     if (!compact) {
       return;
     }
 
     const navRect = navEl.getBoundingClientRect();
-    if (!target) {
-      const activeLiRect = activeLiEl?.getBoundingClientRect() || navRect;
-      $activeIndicatorLeft = activeLiRect.x - navRect.x;
-      $activeIndicatorRight = navRect.right - activeLiRect.right;
-    }
-
     const itemRect = target.getBoundingClientRect();
     $activeIndicatorLeft = itemRect.x - navRect.x;
     $activeIndicatorRight = navRect.right - itemRect.right;
@@ -57,7 +49,7 @@
         on:mouseenter={event => moveActiveIndicator(event.target)}
         on:mouseleave={() => moveActiveIndicator()}
       >
-        <button class="tab" on:click={event => select(tab.key, event.target.parentElement)}>
+        <button class="tab" on:click={() => select(tab.key)}>
           {#if tab.icon} <Icon name={tab.icon} /> {/if}
           <span class="label">{tab.title}</span>
         </button>