Switch to version 2: modified src/components/ui/NavbarCentered.tsx

src/components/ui/NavbarCentered.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-
-import { Plus, ArrowRight } from "lucide-react";
+import { motion, AnimatePresence } from "motion/react";
 import { Plus, ArrowRight } from "lucide-react";
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
@@ -52,8 +51,8 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
     <>
       <nav
         className={cls(
-          "fixed z-1000 top-3 left-3 right-3 transition-all duration-500 ease-in-out",
-          isScrolled ? "h-15 bg-background/80 backdrop-blur-[2px] rounded-lg" : "h-20 bg-background/0 backdrop-blur-0"
+          "fixed z-1000 top-0 left-0 w-full transition-all duration-500 ease-in-out",
+          isScrolled ? "h-15 bg-background/80 backdrop-blur-sm" : "h-20 bg-background/0 backdrop-blur-0"
         )}
       >
         <div className="relative mx-auto flex items-center justify-between h-full w-content-width">
@@ -90,12 +89,15 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
         </div>
       </nav>
 
-      <div
+      <AnimatePresence>
+        {menuOpen && (
+          <motion.div
             ref={menuRef}
-        className={cls(
-          "md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded-lg bg-background/80 backdrop-blur-[2px] transition-all duration-300 ease-in-out",
-          menuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4 pointer-events-none"
-        )}
+            initial={{ y: "-135%" }}
+            animate={{ y: 0 }}
+            exit={{ y: "-135%" }}
+            transition={{ type: "spring", damping: 26, stiffness: 170 }}
+            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded card"
           >
             <div className="flex items-center justify-between mb-6">
               <p className="text-xl text-foreground">Menu</p>
@@ -129,7 +131,9 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
             <div className="mt-6">
               <Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} className="w-full" />
             </div>
-      </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
     </>
   );
 };