From 36d2d25542bdedf46a42e17ebb30310ae3bbb018 Mon Sep 17 00:00:00 2001
From: Guffy-san <vinaybasargekar13@gmail.com>
Date: Mon, 26 Aug 2024 09:56:11 +0530
Subject: [PATCH] chore: Refactor tab slider position calculation in App
 component

---
 src/App.tsx               | 74 ++++++++++++++++++++++-------------
 src/components/navbar.tsx | 82 +++++++++++++++++++--------------------
 2 files changed, 89 insertions(+), 67 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8d5669c..84cd4e4 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,36 +1,58 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Layout from "./components/layout";
 import Navbar from "./components/navbar";
 
 export enum TabKey {
-  Home = "Home",
-  Work = "Work",
-  Blog = "Blog",
-  Contact = "Contact",
+	Home = "Home",
+	Work = "Work",
+	Blog = "Blog",
+	Contact = "Contact",
 }
 
 function App() {
-  const [tab, setTab] = useState<TabKey>(TabKey.Home);
-
-  const tabOffsets: { [key in TabKey]: number } = {
-    Home: 0,
-    Work: 1,
-    Blog: 2,
-    Contact: 3,
-  };
-
-  const baseX = 520;
-  const baseW = 221.5;
-
-  const x = baseX + tabOffsets[tab] * baseW;
-  const w = baseW;
-
-  return (
-    <main className="bg-[#f7f2f2]">
-      <Navbar tab={tab} setTab={setTab} left={x} sliderWidth={w} />
-      <Layout tab={tab} setTab={setTab} left={x} sliderWidth={w} />
-    </main>
-  );
+	const [tab, setTab] = useState<TabKey>(TabKey.Home);
+	const [x, setX] = useState(0);
+	const [w, setW] = useState(0);
+
+	const tabOffsets = {
+		Home: 0,
+		Work: 1,
+		Blog: 2,
+		Contact: 3,
+	};
+
+	useEffect(() => {
+		const calculateSliderPosition = () => {
+			const navbarElement = document.querySelector(".navbar"); 
+
+			if (navbarElement) {
+				const tabElements = navbarElement.querySelectorAll(".tab"); 
+
+				if (tabElements.length > 0) {
+					const baseX = tabElements[0].getBoundingClientRect().left;
+					const baseW = tabElements[0].getBoundingClientRect().width;
+
+					setX(baseX + tabOffsets[tab] * baseW);
+					setW(baseW);
+				}
+			}
+		};
+
+		calculateSliderPosition();
+
+		window.addEventListener("resize", calculateSliderPosition);
+
+		return () => {
+			window.removeEventListener("resize", calculateSliderPosition);
+		};
+	}, [tab]);
+
+	return (
+		<main className="bg-[#f7f2f2]">
+			<Navbar tab={tab} setTab={setTab} left={x} sliderWidth={w} />
+			<Layout tab={tab} setTab={setTab} left={x} sliderWidth={w} />
+		</main>
+	);
 }
 
 export default App;
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index a16b5d3..25e2940 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -1,52 +1,52 @@
 import { TabKey } from "../App";
 
 interface NavbarProps {
-  tab: TabKey;
-  setTab: (tab: TabKey) => void;
-  left?: number;
-  sliderWidth?: number;
+	tab: TabKey;
+	setTab: (tab: TabKey) => void;
+	left?: number;
+	sliderWidth?: number;
 }
 
 const Navbar: React.FC<NavbarProps> = ({
-  tab,
-  setTab,
-  left = 0,
-  sliderWidth = 0,
+	tab,
+	setTab,
+	left = 0,
+	sliderWidth = 0,
 }) => {
-  const tabs = [
-    { key: TabKey.Home, label: "Home" },
-    { key: TabKey.Work, label: "Projects" },
-    { key: TabKey.Blog, label: "Writing" },
-    { key: TabKey.Contact, label: "Contact" },
-  ];
+	const tabs = [
+		{ key: TabKey.Home, label: "Home" },
+		{ key: TabKey.Work, label: "Projects" },
+		{ key: TabKey.Blog, label: "Writing" },
+		{ key: TabKey.Contact, label: "Contact" },
+	];
 
-  return (
-    <div className="bg-black-1 text-white mx-auto sticky top-0 z-[10000] backdrop-saturate-180 backdrop-blur-lg md:display-none pt-2">
-      <div className="bg-white max-w-[900px] m-auto rounded-full  text-1.8rem border-b border-gray-200 p-[3px]">
-        <div className="flex rounded-33px p-2 justify-between items-center text-[#111827] max-w-[900px] mx-auto">
-          {tabs.map(({ key, label }) => (
-            <div
-              key={key}
-              className={`flex items-center h-8 flex-1 cursor-pointer justify-center ${
-                tab === key ? "text-black" : "text-black-300"
-              }`}
-              onClick={() => setTab(key)}
-            >
-              {label}
-            </div>
-          ))}
-          <div
-            className="absolute h-10 bg-[#fc205e]/40 border border-[#fc205e] rounded-full z-20"
-            style={{
-              left: `${left}px`,
-              width: `${sliderWidth}px`,
-              transition: "left 0.38s cubic-bezier(0.5, 0, 0, 0.75)",
-            }}
-          ></div>
-        </div>
-      </div>
-    </div>
-  );
+	return (
+		<div className="navbar bg-black-1 text-white mx-auto sticky top-0 z-[10000] backdrop-saturate-180 backdrop-blur-lg md:display-none pt-2">
+			<div className="bg-white max-w-[900px] m-auto rounded-full  text-1.8rem border-b border-gray-200 p-[3px]">
+				<div className="flex rounded-33px p-2 justify-between items-center text-[#111827] max-w-[900px] mx-auto">
+					{tabs.map(({ key, label }) => (
+						<div
+							key={key}
+							className={`tab flex items-center h-8 flex-1 cursor-pointer justify-center ${
+								tab === key ? "text-black" : "text-black-300"
+							}`}
+							onClick={() => setTab(key)}
+						>
+							{label}
+						</div>
+					))}
+					<div
+						className="absolute h-10 bg-[#fc205e]/40 border border-[#fc205e] rounded-full z-20"
+						style={{
+							left: `${left}px`,
+							width: `${sliderWidth}px`,
+							transition: "left 0.38s cubic-bezier(0.5, 0, 0, 0.75)",
+						}}
+					></div>
+				</div>
+			</div>
+		</div>
+	);
 };
 
 export default Navbar;