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

Stagger tabs on animate

Browse Source
This commit is contained in:
Timothy Pidashev
2024-03-18 22:56:35 -07:00
parent 6c2b82086a
commit 773085b2e0
1 changed files with 47 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
import ThemeToggle from "@/components/theme-toggle" import ThemeToggle from "@/components/theme-toggle"
import Link from "next/link"; import Link from "next/link";
import { motion } from "framer-motion"; import { motion, AnimatePresence } from "framer-motion";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
@@ -30,46 +30,54 @@ function Header() {
setMounted(true); setMounted(true);
}, []); }, []);
if (!mounted) {
return (
<div className="flex space-x-1">
{tabs.map((tab) => (
<div key={tab.id} className="invisible">
{/* Placeholder for each tab */}
</div>
))}
</div>
);
}
return ( return (
<div className="flex justify-center items-center"> <div className="flex justify-center items-center">
<div className="flex space-x-1"> <AnimatePresence>
{tabs.map((tab) => ( {mounted && (
<Link key={tab.id} href={`/${tab.id}`} passHref> <motion.div
<motion.a initial="hidden"
onClick={() => setActiveTab(tab.id)} animate="visible"
className={`${ exit="hidden"
activeTab === tab.id ? "" : "hover:text-white/60" variants={{
} relative rounded-full px-3 py-1.5 text-sm text-light-foreground dark:text-dark-foreground transition-all focus-visible:outline-2`} visible: {
style={{ opacity: 1,
WebkitTapHighlightColor: "transparent", transition: { staggerChildren: 0.1 }
}} },
> hidden: { opacity: 0 }
{activeTab === tab.id && ( }}
<motion.div className="flex space-x-1"
layoutId="underline" >
className={`absolute inset-x-0 bottom-0 h-1 ${tabColors[tab.color]}`} {tabs.map((tab, index) => (
style={{ marginLeft: "0.75em", marginRight: "0.75em", borderRadius: 9999 }} <Link key={tab.id} href={`/${tab.id}`} passHref>
transition={{ type: "spring", bounce: 0.2, duration: 0.6 }} <motion.a
/> onClick={() => setActiveTab(tab.id)}
)} className={`${
{tab.label} activeTab === tab.id ? "" : ""
</motion.a> } relative rounded-full px-3 py-1.5 text-sm text-light-foreground dark:text-dark-foreground transition-all focus-visible:outline-2`}
</Link> style={{
))} WebkitTapHighlightColor: "transparent",
<ThemeToggle /> }}
</div> variants={{
visible: { opacity: 1, x: 0 },
hidden: { opacity: 0, x: -50 }
}}
transition={{ duration: 0.3 }}
>
{activeTab === tab.id && (
<motion.div
layoutId="underline"
className={`absolute inset-x-0 bottom-0 h-1 ${tabColors[tab.color]}`}
style={{ marginLeft: "0.75em", marginRight: "0.75em", borderRadius: 9999 }}
transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
/>
)}
{tab.label}
</motion.a>
</Link>
))}
</motion.div>
)}
</AnimatePresence>
</div> </div>
); );
} }