timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 19:13:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change color for each tab in animation

Browse Source
This commit is contained in:
Timothy Pidashev
2024-03-18 22:35:00 -07:00
parent 62fdbf1fc1
commit 53a3832fc4
1 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/web/src/components/header.jsx
View File

@@ -7,13 +7,21 @@ import { useState, useEffect } from "react";
let tabs = [ let tabs = [
{ id: "/", label: "Home" }, { id: "/", label: "Home", color: "green" },
{ id: "projects", label: "Projects" }, { id: "projects", label: "Projects", color: "yellow" },
{ id: "resume", label: "Resume" }, { id: "resume", label: "Resume", color: "blue" },
{ id: "blog", label: "Blog" }, { id: "blog", label: "Blog", color: "purple" },
{ id: "shop", label: "Shop" }, { id: "shop", label: "Shop", color: "aqua" }
]; ];
const tabColors = {
"green": "bg-light-green-1 dark:bg-dark-green-1",
"yellow": "bg-light-yellow-1 dark:bg-dark-yellow-1",
"blue": "bg-light-blue-1 dark:bg-dark-blue-1",
"purple": "bg-light-purple-1 dark:bg-dark-purple-1",
"aqua": "bg-light-aqua-1 dark:bg-dark-aqua-1"
}
function Header() { function Header() {
const [mounted, setMounted] = useState(false); const [mounted, setMounted] = useState(false);
let [activeTab, setActiveTab] = useState(tabs[0].id); let [activeTab, setActiveTab] = useState(tabs[0].id);
@@ -43,7 +51,7 @@ function Header() {
onClick={() => setActiveTab(tab.id)} onClick={() => setActiveTab(tab.id)}
className={`${ className={`${
activeTab === tab.id ? "" : "hover:text-white/60" activeTab === tab.id ? "" : "hover:text-white/60"
} relative rounded-full px-3 py-1.5 text-sm font-medium text-light-foreground dark:text-dark-foreground outline-sky-400 transition focus-visible:outline-2`} } relative rounded-full px-3 py-1.5 text-sm text-light-foreground dark:text-dark-foreground outline-sky-400 transition focus-visible:outline-2`}
style={{ style={{
WebkitTapHighlightColor: "transparent", WebkitTapHighlightColor: "transparent",
}} }}
@@ -51,7 +59,7 @@ function Header() {
{activeTab === tab.id && ( {activeTab === tab.id && (
<motion.div <motion.div
layoutId="underline" layoutId="underline"
className="absolute inset-x-0 bottom-0 h-1 bg-light-green-1 dark:bg-dark-green-1" className={`absolute inset-x-0 bottom-0 h-1 ${tabColors[tab.color]}`}
style={{ marginLeft: "0.75em", marginRight: "0.75em", borderRadius: 9999 }} style={{ marginLeft: "0.75em", marginRight: "0.75em", borderRadius: 9999 }}
transition={{ type: "spring", bounce: 0.2, duration: 0.6 }} transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
/> />
@@ -60,6 +68,7 @@ function Header() {
</motion.a> </motion.a>
</Link> </Link>
))} ))}
<ThemeToggle />
</div> </div>
</div> </div>
); );