Update components/navbar/mobile-navbar.tsx

components/navbar/mobile-navbar.tsx

@@ -0,0 +1,101 @@
+"use client";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { useState } from "react";
+import { IoIosMenu, IoIosClose } from "react-icons/io";
+import { Logo } from "../Logo";
+import { useMotionValueEvent, useScroll } from "framer-motion";
+
+type NavItem = {
+  title: string;
+  link: string;
+  target?: "_blank";
+  children?: NavItem[];
+};
+
+type Props = {
+  navItems: NavItem[];
+};
+
+export const MobileNavbar = ({ navItems }: Props) => {
+  const [open, setOpen] = useState(false);
+
+  const { scrollY } = useScroll();
+
+  const [showBackground, setShowBackground] = useState(false);
+
+  useMotionValueEvent(scrollY, "change", (value) => {
+    if (value > 100) {
+      setShowBackground(true);
+    } else {
+      setShowBackground(false);
+    }
+  });
+
+  return (
+    <div
+      className={cn(
+        "flex justify-between bg-white items-center w-full rounded-full px-2.5 py-1.5 transition duration-200",
+        showBackground &&
+          "bg-neutral-50 shadow-[0px_-2px_0px_0px_var(--neutral-100),0px_2px_0px_0px_var(--neutral-100)]"
+      )}
+    >
+      <Logo />
+      <IoIosMenu
+        className="text-black h-6 w-6"
+        onClick={() => setOpen(!open)}
+      />
+      {open && (
+        <div className="fixed inset-0 bg-white z-50 flex flex-col items-start justify-start space-y-10 pt-5 text-xl text-zinc-600 transition duration-200 hover:text-zinc-800">
+          <div className="flex items-center justify-between w-full px-5">
+            <Logo />
+            <div className="flex items-center space-x-2">
+              <IoIosClose
+                className="h-8 w-8 text-black"
+                onClick={() => setOpen(!open)}
+              />
+            </div>
+          </div>
+          <div className="flex flex-col items-start justify-start gap-[14px] px-8">
+            {navItems.map((navItem) =>
+              navItem.children && navItem.children.length > 0 ? (
+                navItem.children.map((childNavItem) => (
+                  <Link
+                    key={`${navItem.title}-${childNavItem.title}`}
+                    href={childNavItem.link}
+                    onClick={() => setOpen(false)}
+                    className="relative max-w-[15rem] text-left text-2xl"
+                  >
+                    <span className="block text-black ">
+                      {childNavItem.title}
+                    </span>
+                  </Link>
+                ))
+              ) : (
+                <Link
+                  key={navItem.title}
+                  href={navItem.link}
+                  onClick={() => setOpen(false)}
+                  className="relative"
+                >
+                  <span className="block text-[26px] text-black ">
+                    {navItem.title}
+                  </span>
+                </Link>
+              )
+            )}
+          </div>
+          {/* Login/Signup buttons - uncomment to enable authentication */}
+          {/* <div className="flex flex-row w-full items-start gap-2.5  px-8 py-4 ">
+            <Button asChild href="/signup">
+              Sign Up
+            </Button>
+            <Button variant="ghost" asChild href="/login">
+              Login
+            </Button>
+          </div> */}
+        </div>
+      )}
+    </div>
+  );
+};