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

Fix stagger effect

Browse Source
This commit is contained in:
Timothy Pidashev
2024-03-19 12:18:21 -07:00
parent 2c9c0b08d0
commit 4136bf2622
1 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,24 +35,30 @@ function Header() {
<AnimatePresence> <AnimatePresence>
{mounted && ( {mounted && (
<motion.div <motion.div
initial={{ opacity: 0 }} initial="hidden"
animate={{ opacity: 1 }} animate="visible"
exit={{ opacity: 0 }} exit="hidden"
className="flex items-center" variants={{
visible: {
opacity: 1,
transition: { staggerChildren: 0.1 }
},
hidden: { opacity: 0 }
}}
className="flex space-x-1"
> >
{tabs.map((tab) => ( {tabs.map((tab, index) => (
<Link key={tab.id} href={`/${tab.id}`} passHref> <Link key={tab.id} href={`/${tab.id}`} passHref>
<motion.a <motion.a
onClick={() => setActiveTab(tab.id)} onClick={() => setActiveTab(tab.id)}
className={`${ className={`${
activeTab === tab.id ? "" : "" activeTab === tab.id ? "" : ""
} }
flex justify-center relative rounded-full relative rounded-full
lg:px-6 md:px-5 sm:px-4 lg:py-1.5 md:py-1.5 sm:py-1.5 lg:px-6 md:px-5 sm:px-4 lg:py-1.5 md:py-1.5 sm:py-1.5
lg:mr-8 md:mr-4 sm:mr-2 lg:mb-1 md:mb-1 sm:mb-1 lg:mr-8 md:mr-4 sm:mr-2 lg:mb-1 md:mb-1 sm:mb-1
lg:text-4xl md:text-3xl sm:text-2xl font-bold text-light-foreground dark:text-dark-foreground lg:text-4xl md:text-3xl sm:text-2xl font-bold text-light-foreground dark:text-dark-foreground
transition-all focus-visible:outline-2 transition-all focus-visible:outline-2`}
`}
style={{ style={{
WebkitTapHighlightColor: "transparent", WebkitTapHighlightColor: "transparent",
}} }}