From 0355d6f2ede8661e7d895b4054ea4ed909a0694c Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Sun, 24 Jul 2022 17:12:57 +0200
Subject: [PATCH] simplify

---
 .../shared/tab-nav-bar.component.tsx          | 33 +++++++------------
 1 file changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/renderer/components/shared/tab-nav-bar.component.tsx b/src/renderer/components/shared/tab-nav-bar.component.tsx
index 117f8d06..d2ccd337 100644
--- a/src/renderer/components/shared/tab-nav-bar.component.tsx
+++ b/src/renderer/components/shared/tab-nav-bar.component.tsx
@@ -1,12 +1,10 @@
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 import { useTranslation } from "renderer/hooks/use-translation.hook";
 
 export function TabNavBar(props: {tabsText: string[], onTabChange: Function, className?: string}) {
 
     const [currentTabIndex, setCurrentTabIndex] = useState(0);
-    const tabsWrapper = useRef(null);
-    const [tabsWidth, setTabsWidth] = useState(0);
     const t = useTranslation();
     const secondColor = useThemeColor("second-color");
 
@@ -16,24 +14,17 @@ export function TabNavBar(props: {tabsText: string[], onTabChange: Function, cla
         props.onTabChange(newIndex);
     }
 
-    useEffect(() => {
-        setTimeout(() => { if(tabsWrapper?.current?.children?.length){ setTabsWidth(tabsWrapper.current.children[0].clientWidth);} }, 20) //Ugly but only that works well ¯\_(ツ)_/¯ 
-    }, [props.tabsText])
-    
-
-  return (
-    <div className={`relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden mb-3 shadow-md shadow-black ${props.className}`}>
-        <div className="absolute w-full h-1 bottom-0" style={{color: secondColor}}>  
-          <span className="absolute h-full w-full bg-current brightness-50" />
-          <span className="absolute h-full block bg-current transition-transform duration-300" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `${tabsWidth}px`}}/>
-          <span className="fixed h-1 block shadow-center bg-transparent shadow-current transition-transform duration-300" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `${tabsWidth}px`}}></span>
+    return (
+        <div className={`relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden mb-3 shadow-md shadow-black ${props.className}`}>
+            <div className="absolute w-full h-1 bottom-0" style={{color: secondColor}}>  
+                <span className="absolute h-full w-full bg-current brightness-50" />
+                <span className="absolute h-full block bg-current transition-transform duration-300 shadow-center shadow-current" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `calc(100% / ${props.tabsText.length})`}}/>
+            </div>
+            <div className="grid" style={{gridTemplateColumns: `repeat(${props.tabsText.length}, minmax(0, 1fr))`}}>
+                { props.tabsText.map((y, index) => 
+                    <span  className="pr-4 pl-4 h-full inline-block bg-light-main-color-2 text-gray-800 dark:bg-main-color-2 dark:text-gray-200 text-lg font-bold text-center hover:bg-light-main-color-1 dark:hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{t(y)}</span>
+                )}
+            </div>
         </div>
-        <div ref={tabsWrapper} className="grid" style={{gridTemplateColumns: `repeat(${props.tabsText.length}, minmax(0, 1fr))`}}>
-            { props.tabsText.map((y, index) => 
-                <span className="pr-4 pl-4 h-full inline-block bg-light-main-color-2 text-gray-800 dark:bg-main-color-2 dark:text-gray-200 text-lg font-bold text-center hover:bg-light-main-color-1 dark:hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{t(y)}</span>
-            )}
-        </div>
-        
-      </div>
   )
 }