From dc54d2a9a706cb8c681e9b8cc57bcd16a39eaee4 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Sun, 5 Jun 2022 22:45:44 +0200
Subject: [PATCH] slides nav bar style

---
 .../available-versions-nav-bar.component.tsx  | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/available-versions/available-versions-nav-bar.component.tsx b/src/renderer/components/available-versions/available-versions-nav-bar.component.tsx
index b38fafbe..98759d6d 100644
--- a/src/renderer/components/available-versions/available-versions-nav-bar.component.tsx
+++ b/src/renderer/components/available-versions/available-versions-nav-bar.component.tsx
@@ -1,8 +1,24 @@
+import { useState } from "react"
 
 export function AvailableVersionsNavBar(props: {years: string[], setSelectedYear: Function}) {
+
+  const [selectedYearIndex, setSelectedYearIndex] = useState(0);
+
+  const selectYear = (year: string) => {
+    setSelectedYearIndex(props.years.indexOf(year));
+    props.setSelectedYear(year);
+  }
+
   return (
-    <div className="w-full h-fit flex justify-center items-center">
-      { props.years.map((y, index) => <span key={index} onClick={() => props.setSelectedYear(y)}>{y}</span>) }
-    </div>
+      <div className="relative h-8 shrink-0 cursor-pointer rounded-md overflow-hidden mb-3 shadow-md shadow-gray-800">
+        <div className="absolute w-full h-1 bottom-0">  
+          <span className="absolute h-full w-full bg-red-500 brightness-50"></span>
+          <span className="absolute h-full block w-20 bg-red-500 transition-transform duration-700 shadow-lg shadow-red-500" style={{transform: `translate(${selectedYearIndex * 100}%, 0)`}}></span>
+          <span className="fixed h-1 block w-20 shadow-center bg-transparent shadow-red-500 transition-transform duration-700" style={{transform: `translate(${selectedYearIndex * 100}%, 0)`}}></span>
+        </div>
+        { props.years.map((y, index) => 
+          <span className="w-20 h-full inline-block bg-main-color-2 text-gray-200 text-lg font-bold text-center hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{y}</span>
+        )}
+      </div>
   )
 }