From d90d5bcf6337e64984ca7b4f12f17a24aec6a0d8 Mon Sep 17 00:00:00 2001
From: Romein van Buren <romein@vburen.nl>
Date: Sat, 23 Dec 2023 11:54:10 +0100
Subject: [PATCH] Updated tab bar animation

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

diff --git a/frontend/src/components/tabbar.svelte b/frontend/src/components/tabbar.svelte
index db505b7..20c89f3 100644
--- a/frontend/src/components/tabbar.svelte
+++ b/frontend/src/components/tabbar.svelte
@@ -1,7 +1,7 @@
 <script>
   import { createEventDispatcher, onMount } from 'svelte';
   import { tweened } from 'svelte/motion';
-  import { cubicInOut } from 'svelte/easing';
+  import { cubicOut } from 'svelte/easing';
   import Icon from './icon.svelte';
 
   export let tabs = [];
@@ -10,8 +10,8 @@
   export let compact = true;
 
   const dispatch = createEventDispatcher();
-  const activeIndicatorLeft = tweened(0, { easing: cubicInOut, duration: 400 });
-  const activeIndicatorRight = tweened(0, { easing: cubicInOut, duration: 400 });
+  const activeIndicatorLeft = tweened(0, { easing: cubicOut, duration: 400 });
+  const activeIndicatorRight = tweened(0, { easing: cubicOut, duration: 400 });
   const liElements = {};
   let navEl;
 
@@ -38,6 +38,8 @@
   });
 </script>
 
+<svelte:window on:resize={() => moveActiveIndicator()} />
+
 <nav class="tabs" class:compact bind:this={navEl}>
   <ul>
     {#each tabs as tab (tab.key)}