Stagger tabs on animate

src/web/src/components/header.jsx

@@ -2,7 +2,7 @@
 
 import ThemeToggle from "@/components/theme-toggle"
 import Link from "next/link";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import { useState, useEffect } from "react";
 
 
@@ -30,31 +30,38 @@ function Header() {
     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 (
     <div className="flex justify-center items-center">
-      <div className="flex space-x-1">
-        {tabs.map((tab) => (
+      <AnimatePresence>
+        {mounted && (
+          <motion.div
+            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, index) => (
               <Link key={tab.id} href={`/${tab.id}`} passHref>
                 <motion.a
                   onClick={() => setActiveTab(tab.id)}
                   className={`${
-                activeTab === tab.id ? "" : "hover:text-white/60"
+                    activeTab === tab.id ? "" : ""
                   } relative rounded-full px-3 py-1.5 text-sm text-light-foreground dark:text-dark-foreground transition-all focus-visible:outline-2`}
                   style={{
                     WebkitTapHighlightColor: "transparent",
                   }}
+                  variants={{
+                    visible: { opacity: 1, x: 0 },
+                    hidden: { opacity: 0, x: -50 }
+                  }}
+                  transition={{ duration: 0.3 }}
                 >
                   {activeTab === tab.id && (
                     <motion.div
@@ -68,8 +75,9 @@ function Header() {
                 </motion.a>
               </Link>
             ))}
-        <ThemeToggle />
-      </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </div>
   );
 }