diff --git a/src/web/src/components/header.jsx b/src/web/src/components/header.jsx index a92f9c9..9d14161 100644 --- a/src/web/src/components/header.jsx +++ b/src/web/src/components/header.jsx @@ -3,23 +3,46 @@ import ThemeToggle from "@/components/theme-toggle" import Link from "next/link"; import { motion } from "framer-motion"; -import { useState } from "react"; +import { useState, useEffect } from "react"; -const Header = () => { +let tabs = [ + { id: "/", label: "Home" }, + { id: "projects", label: "Projects" }, + { id: "resume", label: "Resume" }, + { id: "blog", label: "Blog" }, + { id: "shop", label: "Shop" }, +]; + +function Header() { + let [activeTab, setActiveTab] = useState(tabs[0].id); return ( -
- Home - Projects - Resume - Blog - Shop -
- -
+
+ {tabs.map((tab) => ( + + setActiveTab(tab.id)} + className={`${ + activeTab === tab.id ? "" : "hover:text-white/60" + } relative rounded-full px-3 py-1.5 text-sm font-medium text-white outline-sky-400 transition focus-visible:outline-2`} + style={{ + WebkitTapHighlightColor: "transparent", + }} + > + {activeTab === tab.id && ( + + )} + {tab.label} + + + ))}
); } - export default Header;