From 471eed91095884557c51e89afbeae03ee5e35c75 Mon Sep 17 00:00:00 2001
From: Filip Skaug <46749200+FilipSkaug@users.noreply.github.com>
Date: Tue, 22 Oct 2024 17:58:18 +0200
Subject: [PATCH] Vf 177 add tabs to header (#344)

* vf-177 create tab component

* vf-171 style tab bar

* vf-171 rezise header

* vf-171 add hjem to bar and remove logo button

* vf-177 style login button

* vf-177 center navbar

* vf-177 lighten up header/tab bar and resize

* vf-177 darkmode styling

* vf-177 adjust to mobile view
---
 src/components/Header/AppHeader.tsx    | 53 ++++++++-----------------
 src/components/Header/LoginButtons.tsx |  2 +-
 src/components/Header/Tab.tsx          | 55 ++++++++++++++++++++++++++
 3 files changed, 72 insertions(+), 38 deletions(-)
 create mode 100644 src/components/Header/Tab.tsx

diff --git a/src/components/Header/AppHeader.tsx b/src/components/Header/AppHeader.tsx
index be18576b..dae15f89 100644
--- a/src/components/Header/AppHeader.tsx
+++ b/src/components/Header/AppHeader.tsx
@@ -1,61 +1,40 @@
 import type React from "react";
 import { useState } from "react";
-import { Link, NavLink } from "react-router-dom";
 import LoginButtons from "./LoginButtons";
 import LoginPopup from "./LoginPopup";
 import MobileMenu from "./MobileMenu";
 import UserAvatar from "./UserAvatar";
-import routes from "../../pages/public/routes";
-
-const activeStyle: React.CSSProperties = {
-  fontWeight: "bold",
-  color: "#023874",
-};
+import Tab from "@/components/Header/Tab";
 
 const AppHeader = (): JSX.Element => {
   const [menuOpen, setMenuOpen] = useState(false);
   const [loginPopupVisible, setLoginPopupVisible] = useState(false);
   const isLoggedIn = false;
-  const navRoutes = routes.filter(route => route.path);
-  const linkElements = navRoutes.map((route) => (
-      <NavLink
-        key={route.path}
-        className="md:text-gray-600 md:hover:text-black md:dark:text-white p-1 font-semibold text-nowrap"
-        to={route.path ?? ""}
-        style={({ isActive }) => (isActive ? activeStyle : {})}
-      >
-        {route.name}
-      </NavLink>
-  ));
 
   return (
-    <div className="sticky top-0 z-50">
-      <div className="hidden md:flex justify-around p-1 lg:px-8 w-full bg-vektor-bg backdrop-blur-sm bg-opacity-90 dark:bg-vektor-bg-dark dark:bg-opacity-90">
-        <div className="flex w-fit items-center">
-          <div className="btn btn-ghost btn-circle btn-md hover:bg-white">
+    <div className="sticky top-2 z-50">
+      <div className="hidden md:flex justify-center lg:px-4 w-full">
+        <div className="flex bg-[#ccecf6] bg-opacity-40 rounded-full w-fit px-1.5 mr-12 gap-1 items-center shadow-md backdrop-blur dark:bg-black dark:bg-opacity-40">
+          <div className="w-8 h-8">
             <div className="w-full rounded-full">
-              <Link to="/">
                 <img
                   src="/images/vektor-logo-circle.svg"
                   alt="vektorprogrammet logo"
                 />
-              </Link>
             </div>
           </div>
+          <Tab />
         </div>
-        <div className="flex justify-center items-center gap-8 w-fit">
-          {linkElements}
-        </div>
-        <div className="flex w-fit items-center">
-          {isLoggedIn ? (
-            <UserAvatar />
-          ) : (
-            <LoginButtons setVisible={setLoginPopupVisible} />
-          )}
-          {loginPopupVisible ? (
-            <LoginPopup setVisible={setLoginPopupVisible} />
-          ) : null}
-        </div>
+      </div>
+      <div className="hidden md:flex w-fit absolute top-0 h-full right-2 items-center">
+        {isLoggedIn ? (
+          <UserAvatar />
+        ) : (
+          <LoginButtons setVisible={setLoginPopupVisible} />
+        )}
+        {loginPopupVisible ? (
+          <LoginPopup setVisible={setLoginPopupVisible} />
+        ) : null}
       </div>
       <MobileMenu
         menuOpen={menuOpen}
diff --git a/src/components/Header/LoginButtons.tsx b/src/components/Header/LoginButtons.tsx
index f3dfc868..6bc25bda 100644
--- a/src/components/Header/LoginButtons.tsx
+++ b/src/components/Header/LoginButtons.tsx
@@ -9,7 +9,7 @@ const LoginButtons = ({
     <div className="flex space-x-4">
       <button
         type="button"
-        className="btn btn-success text-white rounded-full btn-sm"
+        className="btn btn-success btn-sm text-white rounded-full px-6 h-10"
         onClick={() => setVisible(true)}
       >
         Logg inn
diff --git a/src/components/Header/Tab.tsx b/src/components/Header/Tab.tsx
new file mode 100644
index 00000000..bc23cc7d
--- /dev/null
+++ b/src/components/Header/Tab.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from "react";
+import routes from "@/pages/public/routes";
+import { useNavigate } from 'react-router-dom';
+
+export const Tab = () => {
+  const tabsRef = useRef<(HTMLElement | null)[]>([]);
+  const [activeTabIndex, setActiveTabIndex] = useState<number | null>(null);
+  const [tabUnderlineWidth, setTabUnderlineWidth] = useState(0);
+  const [tabUnderlineLeft, setTabUnderlineLeft] = useState(0);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (activeTabIndex === null) {
+      return;
+    }
+
+    const setTabPosition = () => {
+      const currentTab = tabsRef.current[activeTabIndex] as HTMLElement;
+      setTabUnderlineLeft(currentTab?.offsetLeft ?? 0);
+      setTabUnderlineWidth(currentTab?.clientWidth ?? 0);
+    };
+
+    setTabPosition();
+  }, [activeTabIndex]);
+
+  return (
+    <div className="flew-row relative mx-auto flex h-11 rounded-full px-0.5">
+      <span
+        className="absolute bottom-0 top-0 z-10 flex overflow-hidden rounded-full py-1.5 transition-all duration-300"
+        style={{ left: tabUnderlineLeft, width: tabUnderlineWidth }}
+      >
+        <span className="h-full w-full rounded-full bg-vektor-blue shadow-sm" />
+      </span>
+      {routes.map((route, index) => {
+        const isActive = activeTabIndex === index;
+        return (
+          <button
+            type="button"
+            key={route.name}
+            ref={(el) => (tabsRef.current[index] = el)}
+            className={`${isActive ? `text-black` : `hover:text-black text-neutral-700 dark:text-vektor-blue dark:hover:text-vektor-bg`} z-20 text-sm my-auto cursor-pointer select-none rounded-full px-4 text-center font-medium`}
+            onClick={() => {
+              setActiveTabIndex(index);
+              navigate(route.path ?? "");
+            }}
+          >
+            {route.name}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Tab;
\ No newline at end of file