From 4136bf262276ba7c8e2ee6a8964f1bc80a42aeb7 Mon Sep 17 00:00:00 2001
From: Timothy Pidashev <pidashev.tim@gmail.com>
Date: Tue, 19 Mar 2024 12:18:21 -0700
Subject: [PATCH] Fix stagger effect

---
 src/web/src/components/header.jsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/web/src/components/header.jsx b/src/web/src/components/header.jsx
index 83dc3b3..f5c02ab 100644
--- a/src/web/src/components/header.jsx
+++ b/src/web/src/components/header.jsx
@@ -35,24 +35,30 @@ function Header() {
       <AnimatePresence>
         {mounted && (
           <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="flex items-center"
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            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>
                 <motion.a
                   onClick={() => setActiveTab(tab.id)}
                   className={`${
                     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: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
-                  transition-all focus-visible:outline-2
-                  `}
+                  transition-all focus-visible:outline-2`}
                   style={{
                     WebkitTapHighlightColor: "transparent",
                   }}