From b7a117d58c514f36ca2c6421a355cf491679c31e Mon Sep 17 00:00:00 2001
From: Vaibhav Tripathi <vaibhavxtripathi@gmail.com>
Date: Sat, 31 May 2025 14:50:18 +0530
Subject: [PATCH 1/2] GFG | refactor: updated navbar

---
 components/ui/FloatingNavbar.tsx | 171 ++++++++++++++++++++++++++-----
 1 file changed, 147 insertions(+), 24 deletions(-)

diff --git a/components/ui/FloatingNavbar.tsx b/components/ui/FloatingNavbar.tsx
index 4abb6e4..acb4303 100644
--- a/components/ui/FloatingNavbar.tsx
+++ b/components/ui/FloatingNavbar.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import React, { use, useState } from "react";
 import {
   motion,
   AnimatePresence,
@@ -8,8 +8,9 @@ import {
 } from "framer-motion";
 import Link from "next/link";
 import { cn } from "@/lib/utils";
+import Image from "next/image";
+import { usePathname } from "next/navigation";
 
-// Accept props correctly (function parameter was broken)
 interface NavItem {
   name: string;
   link: string;
@@ -23,54 +24,176 @@ interface Props {
 
 const FloatingNavbar: React.FC<Props> = ({ navItems, className }) => {
   const { scrollYProgress } = useScroll();
+
+  // set true for the initial state so that nav bar is visible in the hero section
   const [visible, setVisible] = useState(true);
+  const [isScrolled, setIsScrolled] = useState(false);
 
   useMotionValueEvent(scrollYProgress, "change", (current) => {
+    // Check if current is not undefined and is a number
     if (typeof current === "number") {
-      const previous = scrollYProgress.getPrevious();
-      const direction = current - (previous ?? 0);
+      let direction = current! - scrollYProgress.getPrevious()!;
 
       if (scrollYProgress.get() < 0.05) {
+        // also set true for the initial state
         setVisible(true);
+        setIsScrolled(false);
       } else {
-        setVisible(direction < 0);
+        if (direction < 0) {
+          setVisible(true);
+        }
+        setIsScrolled(true);
       }
     }
   });
+  const pathname = usePathname();
+  const isDashboard = pathname?.startsWith("/dashboard");
+  const isAdminDashboard = pathname === "/dashboard/admin";
 
   return (
     <AnimatePresence mode="wait">
       <motion.div
-        initial={{ opacity: 1, y: -100 }}
+        initial={{
+          opacity: 1,
+          y: -100,
+        }}
         animate={{
           y: visible ? 0 : -100,
           opacity: visible ? 1 : 0,
         }}
-        transition={{ duration: 0.2 }}
+        transition={{
+          duration: 0.2,
+        }}
         className={cn(
-          "flex max-w-fit md:min-w-[70vw] lg:min-w-fit fixed z-[5000] top-10 inset-x-0 mx-auto px-10 py-5 rounded-lg border border-black/10 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] items-center justify-center space-x-4",
+          "flex max-w-fit md:min-w-[70vw] lg:min-w-fit fixed z-[5000] top-10 inset-x-0 mx-auto px-8 py-5 rounded-lg border-black/.1 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] items-center justify-between",
           className
         )}
         style={{
-          backdropFilter: "blur(16px) saturate(180%)",
-          backgroundColor: "rgba(17, 25, 40, 0.75)",
-          borderRadius: "12px",
-          border: "1px solid rgba(255, 255, 255, 0.125)",
+          ...(isScrolled
+            ? {
+                backdropFilter: "blur(16px) saturate(180%)",
+                backgroundColor: "rgba(17, 25, 40, 0.75)",
+                borderRadius: "20px",
+                border: "1px solid rgba(255, 255, 255, 0.125)",
+              }
+            : {}),
+          willChange: "transform, opacity",
         }}
       >
-        {navItems.map((navItem, idx) => (
-          <Link
-            key={`nav-link-${idx}`}
-            href={navItem.link}
-            className="relative dark:text-neutral-50 flex items-center space-x-1 text-neutral-600 dark:hover:text-neutral-300 hover:text-neutral-500"
-          >
-            <span className="block sm:hidden">{navItem.icon}</span>
-            <span className="text-sm !cursor-pointer">{navItem.name}</span>
-          </Link>
-        ))}
+        {/* Elixir text on the left */}
+        <motion.div
+          animate={{
+            scale: isScrolled ? 0.95 : 1,
+            x: isScrolled ? 10 : 0,
+            marginRight: isScrolled ? 48 : 224,
+          }}
+          transition={{
+            duration: 0.22,
+            ease: [0.22, 1, 0.36, 1],
+          }}
+          className={cn(
+            "flex items-center gap-2 text-white font-bold text-xl transition-all duration-400",
+            isScrolled ? "mr-12" : "mr-56"
+          )}
+          style={{ willChange: "transform, opacity, margin-right" }}
+        >
+          <Image
+            src="/Elixir-logo.png"
+            alt="Elixir Logo"
+            width={28}
+            height={28}
+            className="rounded-md mr-2"
+            style={{ objectFit: "contain" }}
+          />
+          <span>Elixir</span>
+        </motion.div>
+
+        {/* Navigation items in the center */}
+        <motion.div
+          animate={{
+            scale: isScrolled ? 0.98 : 1,
+            opacity: isScrolled ? 0.9 : 1,
+          }}
+          transition={{
+            duration: 0.22,
+            ease: [0.22, 1, 0.36, 1],
+          }}
+          className="flex items-center space-x-4"
+          style={{ willChange: "transform, opacity" }}
+        >
+          {navItems.map((navItem: any, idx: number) => (
+            <motion.div
+              key={`link=${idx}`}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+              style={{ willChange: "transform, opacity" }}
+            >
+              <Link
+                href={navItem.link}
+                className={cn(
+                  "relative dark:text-neutral-50 items-center flex space-x-1 text-neutral-600 dark:hover:text-neutral-300 hover:text-neutral-500"
+                )}
+              >
+                <span className="block sm:hidden">{navItem.icon}</span>
+                <span className="text-sm !cursor-pointer">{navItem.name}</span>
+              </Link>
+            </motion.div>
+          ))}
+        </motion.div>
+
+        {/* Login button on the right */}
+        <motion.button
+          animate={{
+            scale: isScrolled ? 0.95 : 1,
+            x: isScrolled ? -10 : 0,
+            marginLeft: isScrolled ? 48 : 224,
+          }}
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          transition={{
+            duration: 0.22,
+            ease: [0.22, 1, 0.36, 1],
+          }}
+          className={cn(
+            "border text-sm font-medium relative border-neutral-200 dark:border-white/[0.2] text-white px-4 py-2 rounded-full hover:bg-white/10 transition-all duration-400",
+            isScrolled ? "ml-12" : "ml-56"
+          )}
+          style={{ willChange: "transform, opacity, margin-left" }}
+        >
+          <div className="flex items-center gap-4">
+            {!isDashboard ? (
+              <Link
+                href="/dashboard"
+                className="text-white/80 hover:text-white transition-colors"
+              >
+                Login
+              </Link>
+            ) : isAdminDashboard ? (
+              <div className="text-white/80 hover:text-white transition-colors cursor-pointer">
+                Admin
+              </div>
+            ) : (
+              <div className="text-white/80 hover:text-white transition-colors cursor-pointer">
+                User
+              </div>
+            )}
+          </div>
+
+          <motion.span
+            animate={{
+              scale: isScrolled ? 0.9 : 1,
+              opacity: isScrolled ? 0.8 : 1,
+            }}
+            transition={{
+              duration: 0.22,
+              ease: [0.22, 1, 0.36, 1],
+            }}
+            className="absolute inset-x-0 w-1/2 mx-auto -bottom-px bg-gradient-to-r from-transparent via-blue-500 to-transparent h-px"
+            style={{ willChange: "transform, opacity" }}
+          />
+        </motion.button>
       </motion.div>
     </AnimatePresence>
   );
 };
-
-export default FloatingNavbar;
+export default FloatingNavbar;
\ No newline at end of file

From ef7530bbc46c2182c3a40816d2696075a60ceb65 Mon Sep 17 00:00:00 2001
From: Vaibhav Tripathi <vaibhavxtripathi@gmail.com>
Date: Sat, 31 May 2025 16:55:44 +0530
Subject: [PATCH 2/2] GFG | refactor: updated navbar for smaller screen

---
 components/ui/FloatingNavbar.tsx | 279 +++++++++++++++++--------------
 components/ui/MobileNavModal.tsx | 148 ++++++++++++++++
 2 files changed, 299 insertions(+), 128 deletions(-)
 create mode 100644 components/ui/MobileNavModal.tsx

diff --git a/components/ui/FloatingNavbar.tsx b/components/ui/FloatingNavbar.tsx
index acb4303..660ecde 100644
--- a/components/ui/FloatingNavbar.tsx
+++ b/components/ui/FloatingNavbar.tsx
@@ -1,5 +1,5 @@
 "use client";
-import React, { use, useState } from "react";
+import React, { useState } from "react";
 import {
   motion,
   AnimatePresence,
@@ -10,6 +10,8 @@ import Link from "next/link";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
 import { usePathname } from "next/navigation";
+import MobileNavModal from "./MobileNavModal";
+import { HiMenu } from "react-icons/hi";
 
 interface NavItem {
   name: string;
@@ -28,6 +30,7 @@ const FloatingNavbar: React.FC<Props> = ({ navItems, className }) => {
   // set true for the initial state so that nav bar is visible in the hero section
   const [visible, setVisible] = useState(true);
   const [isScrolled, setIsScrolled] = useState(false);
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
   useMotionValueEvent(scrollYProgress, "change", (current) => {
     // Check if current is not undefined and is a number
@@ -51,149 +54,169 @@ const FloatingNavbar: React.FC<Props> = ({ navItems, className }) => {
   const isAdminDashboard = pathname === "/dashboard/admin";
 
   return (
-    <AnimatePresence mode="wait">
-      <motion.div
-        initial={{
-          opacity: 1,
-          y: -100,
-        }}
-        animate={{
-          y: visible ? 0 : -100,
-          opacity: visible ? 1 : 0,
-        }}
-        transition={{
-          duration: 0.2,
-        }}
-        className={cn(
-          "flex max-w-fit md:min-w-[70vw] lg:min-w-fit fixed z-[5000] top-10 inset-x-0 mx-auto px-8 py-5 rounded-lg border-black/.1 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] items-center justify-between",
-          className
-        )}
-        style={{
-          ...(isScrolled
-            ? {
-                backdropFilter: "blur(16px) saturate(180%)",
-                backgroundColor: "rgba(17, 25, 40, 0.75)",
-                borderRadius: "20px",
-                border: "1px solid rgba(255, 255, 255, 0.125)",
-              }
-            : {}),
-          willChange: "transform, opacity",
-        }}
-      >
-        {/* Elixir text on the left */}
-        <motion.div
-          animate={{
-            scale: isScrolled ? 0.95 : 1,
-            x: isScrolled ? 10 : 0,
-            marginRight: isScrolled ? 48 : 224,
-          }}
-          transition={{
-            duration: 0.22,
-            ease: [0.22, 1, 0.36, 1],
-          }}
-          className={cn(
-            "flex items-center gap-2 text-white font-bold text-xl transition-all duration-400",
-            isScrolled ? "mr-12" : "mr-56"
-          )}
-          style={{ willChange: "transform, opacity, margin-right" }}
-        >
-          <Image
-            src="/Elixir-logo.png"
-            alt="Elixir Logo"
-            width={28}
-            height={28}
-            className="rounded-md mr-2"
-            style={{ objectFit: "contain" }}
-          />
-          <span>Elixir</span>
-        </motion.div>
-
-        {/* Navigation items in the center */}
+    <>
+      <AnimatePresence mode="wait">
         <motion.div
-          animate={{
-            scale: isScrolled ? 0.98 : 1,
-            opacity: isScrolled ? 0.9 : 1,
+          initial={{
+            opacity: 1,
+            y: -100,
           }}
-          transition={{
-            duration: 0.22,
-            ease: [0.22, 1, 0.36, 1],
-          }}
-          className="flex items-center space-x-4"
-          style={{ willChange: "transform, opacity" }}
-        >
-          {navItems.map((navItem: any, idx: number) => (
-            <motion.div
-              key={`link=${idx}`}
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              style={{ willChange: "transform, opacity" }}
-            >
-              <Link
-                href={navItem.link}
-                className={cn(
-                  "relative dark:text-neutral-50 items-center flex space-x-1 text-neutral-600 dark:hover:text-neutral-300 hover:text-neutral-500"
-                )}
-              >
-                <span className="block sm:hidden">{navItem.icon}</span>
-                <span className="text-sm !cursor-pointer">{navItem.name}</span>
-              </Link>
-            </motion.div>
-          ))}
-        </motion.div>
-
-        {/* Login button on the right */}
-        <motion.button
           animate={{
-            scale: isScrolled ? 0.95 : 1,
-            x: isScrolled ? -10 : 0,
-            marginLeft: isScrolled ? 48 : 224,
+            y: visible ? 0 : -100,
+            opacity: visible ? 1 : 0,
           }}
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.95 }}
           transition={{
-            duration: 0.22,
-            ease: [0.22, 1, 0.36, 1],
+            duration: 0.2,
           }}
           className={cn(
-            "border text-sm font-medium relative border-neutral-200 dark:border-white/[0.2] text-white px-4 py-2 rounded-full hover:bg-white/10 transition-all duration-400",
-            isScrolled ? "ml-12" : "ml-56"
+            "flex max-w-fit md:min-w-[70vw] lg:min-w-fit fixed z-[5000] lg:top-10 top-5 inset-x-0 mx-auto px-8 py-5 rounded-lg border-black/.1 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] items-center justify-between",
+            className
           )}
-          style={{ willChange: "transform, opacity, margin-left" }}
+          style={{
+            ...(isScrolled
+              ? {
+                  backdropFilter: "blur(16px) saturate(180%)",
+                  backgroundColor: "rgba(17, 25, 40, 0.75)",
+                  borderRadius: "20px",
+                  border: "1px solid rgba(255, 255, 255, 0.125)",
+                }
+              : {}),
+            willChange: "transform, opacity",
+          }}
         >
-          <div className="flex items-center gap-4">
-            {!isDashboard ? (
-              <Link
-                href="/dashboard"
-                className="text-white/80 hover:text-white transition-colors"
-              >
-                Login
-              </Link>
-            ) : isAdminDashboard ? (
-              <div className="text-white/80 hover:text-white transition-colors cursor-pointer">
-                Admin
-              </div>
-            ) : (
-              <div className="text-white/80 hover:text-white transition-colors cursor-pointer">
-                User
-              </div>
+        {/* Elixir text on the left */}
+          <motion.div
+            animate={{
+              scale: isScrolled ? 0.95 : 1,
+              x: isScrolled ? 10 : 0,
+            marginRight: isScrolled ? 48 : 224,
+            }}
+            transition={{
+              duration: 0.22,
+              ease: [0.420, 0.000, 0.580, 1.000],
+            }}
+            className={cn(
+              "flex items-center gap-2 text-white font-bold text-xl transition-all duration-400",
+            isScrolled ? "mr-12" : "mr-56"
             )}
+            style={{ willChange: "transform, opacity, margin-right" }}
+          >
+            <Image
+              src="/Elixir-logo.png"
+              alt="Elixir Logo"
+              width={28}
+              height={28}
+              className="rounded-md mr-2"
+              style={{ objectFit: "contain" }}
+            />
+            <span>Elixir</span>
+          </motion.div>
+          {/* Hamburger icon for mobile */}
+          <div className="md:hidden flex items-center ml-auto">
+            <button
+              aria-label="Open navigation menu"
+              onClick={() => setMobileNavOpen(true)}
+              className="p-2 rounded-md text-white hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <HiMenu size={28} />
+            </button>
           </div>
-
-          <motion.span
+          {/* Navigation items in the center (hidden on mobile) */}
+          <motion.div
             animate={{
-              scale: isScrolled ? 0.9 : 1,
-              opacity: isScrolled ? 0.8 : 1,
+              scale: isScrolled ? 0.98 : 1,
+              opacity: isScrolled ? 0.9 : 1,
             }}
             transition={{
               duration: 0.22,
-              ease: [0.22, 1, 0.36, 1],
+              ease: [0.420, 0.000, 0.580, 1.000],
             }}
-            className="absolute inset-x-0 w-1/2 mx-auto -bottom-px bg-gradient-to-r from-transparent via-blue-500 to-transparent h-px"
+            className="hidden md:flex items-center space-x-4"
             style={{ willChange: "transform, opacity" }}
-          />
-        </motion.button>
-      </motion.div>
-    </AnimatePresence>
+          >
+            {navItems.map((navItem: any, idx: number) => (
+              <motion.div
+                key={`link=${idx}`}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                style={{ willChange: "transform, opacity" }}
+              >
+                <Link
+                  href={navItem.link}
+                  className={cn(
+                    "relative dark:text-neutral-50 items-center flex space-x-1 text-neutral-600 dark:hover:text-neutral-300 hover:text-neutral-500"
+                  )}
+                >
+                  <span className="block sm:hidden">{navItem.icon}</span>
+                  <span className="text-sm !cursor-pointer">
+                    {navItem.name}
+                  </span>
+                </Link>
+              </motion.div>
+            ))}
+          </motion.div>
+          {/* Login button on the right (hidden on mobile) */}
+          <motion.button
+            animate={{
+              scale: isScrolled ? 0.95 : 1,
+              x: isScrolled ? -10 : 0,
+              marginLeft: isScrolled ? 48 : 224,
+            }}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            transition={{
+              duration: 0.22,
+              ease: [0.420, 0.000, 0.580, 1.000],
+            }}
+            className={cn(
+              "hidden md:flex border text-sm font-medium relative border-neutral-200 dark:border-white/[0.2] text-white px-4 py-2 rounded-full hover:bg-white/10 transition-all duration-400",
+              isScrolled ? "ml-12" : "ml-56"
+            )}
+            style={{ willChange: "transform, opacity, margin-left" }}
+          >
+            <div className="flex items-center gap-4">
+              {!isDashboard ? (
+                <>
+                  <Link
+                    href="/dashboard"
+                    className="text-white/80 hover:text-white transition-colors"
+                  >
+                    Login
+                  </Link>
+                </>
+              ) : isAdminDashboard ? (
+                <div className="text-white/80 hover:text-white transition-colors cursor-pointer">
+                  Admin
+                </div>
+              ) : (
+                <div className="text-white/80 hover:text-white transition-colors cursor-pointer">
+                  User
+                </div>
+              )}
+            </div>
+
+            <motion.span
+              animate={{
+                scale: isScrolled ? 0.9 : 1,
+                opacity: isScrolled ? 0.8 : 1,
+              }}
+              transition={{
+                duration: 0.22,
+                ease: [0.420, 0.000, 0.580, 1.000],
+              }}
+              className="absolute inset-x-0 w-1/2 mx-auto -bottom-px bg-gradient-to-r from-transparent via-blue-500 to-transparent h-px"
+              style={{ willChange: "transform, opacity" }}
+            />
+          </motion.button>
+        </motion.div>
+      </AnimatePresence>
+      {/* Mobile Navigation Modal */}
+      <MobileNavModal
+        open={mobileNavOpen}
+        onClose={() => setMobileNavOpen(false)}
+        navItems={navItems}
+      />
+    </>
   );
 };
-export default FloatingNavbar;
\ No newline at end of file
+export default FloatingNavbar;
diff --git a/components/ui/MobileNavModal.tsx b/components/ui/MobileNavModal.tsx
new file mode 100644
index 0000000..3e9fdaf
--- /dev/null
+++ b/components/ui/MobileNavModal.tsx
@@ -0,0 +1,148 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import Image from "next/image";
+import { HiX, HiArrowRight } from "react-icons/hi";
+
+interface NavItem {
+  name: string;
+  link: string;
+  icon?: JSX.Element;
+}
+
+interface MobileNavModalProps {
+  open: boolean;
+  onClose: () => void;
+  navItems: NavItem[];
+}
+
+const overlayVariants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1 },
+};
+
+const modalVariants = {
+  hidden: { y: "100%", opacity: 0 },
+  visible: { y: 0, opacity: 1 },
+};
+
+const MobileNavModal: React.FC<MobileNavModalProps> = ({
+  open,
+  onClose,
+  navItems,
+}) => {
+  const pathname = usePathname();
+  const isDashboard = pathname?.startsWith("/dashboard");
+  const isAdminDashboard = pathname === "/dashboard/admin";
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <>
+          {/* Overlay */}
+          <motion.div
+            className="fixed inset-0 z-[9999] bg-black/40 backdrop-blur-[8px]"
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            variants={overlayVariants}
+            transition={{ duration: 0.18 }}
+            onClick={onClose}
+          />
+          {/* Modal */}
+          <motion.div
+            className="fixed z-[10000] left-0 right-0 bottom-0 mx-auto w-full max-w-md rounded-t-2xl bg-[rgba(28,32,44,0.82)] border border-white/10 backdrop-blur-xl shadow-xl px-5 pt-5 pb-7 flex flex-col items-center"
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            variants={modalVariants}
+            transition={{ type: "spring", stiffness: 320, damping: 30 }}
+            style={{
+              boxShadow: "0 4px 24px 0 rgba(31, 38, 135, 0.10)",
+              border: "1px solid rgba(255,255,255,0.05)",
+            }}
+          >
+            {/* Logo/brand and close button row */}
+            <div className="w-full flex items-center justify-between mb-4 mt-1 select-none">
+              <div className="flex items-center gap-2">
+                <Image
+                  src="/Elixir-logo.png"
+                  alt="Elixir Logo"
+                  width={28}
+                  height={28}
+                  className="rounded-md"
+                  style={{ objectFit: "contain" }}
+                />
+                <span className="text-white font-semibold text-lg tracking-tight">
+                  Elixir
+                </span>
+              </div>
+              <button
+                onClick={onClose}
+                className="p-2 rounded-full bg-white/5 hover:bg-white/10 text-white focus:outline-none focus:ring-2 focus:ring-blue-400 z-10 transition"
+                aria-label="Close navigation menu"
+              >
+                <HiX size={22} />
+              </button>
+            </div>
+            {/* Nav items */}
+            <nav className="w-full flex flex-col divide-y divide-white/8 mb-7 bg-white/0 rounded-xl overflow-hidden shadow-none">
+              {navItems.map((item, idx) => (
+                <Link
+                  key={item.link + idx}
+                  href={item.link}
+                  className={cn(
+                    "flex items-center gap-3 text-base font-medium text-white/90 hover:text-white transition-colors px-4 py-3 w-full bg-transparent hover:bg-white/5 active:scale-[0.99] focus:outline-none focus:ring-1 focus:ring-blue-400",
+                    idx === 0 ? "rounded-t-xl" : "",
+                    idx === navItems.length - 1 ? "rounded-b-xl" : ""
+                  )}
+                  onClick={onClose}
+                  style={{
+                    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
+                  }}
+                >
+                  {item.icon && (
+                    <span className="text-lg opacity-80">{item.icon}</span>
+                  )}
+                  <span className="flex-1 text-left">{item.name}</span>
+                </Link>
+              ))}
+            </nav>
+            {/* Login/Dashboard button */}
+            <div className="w-full flex flex-col gap-2">
+              {!isDashboard ? (
+                <Link
+                  href="/dashboard"
+                  className="relative w-full py-2.5 rounded-full border border-white/40 bg-transparent text-white/90 text-md flex items-center justify-center transition-all duration-200 text-center focus:outline-none focus:ring-2 focus:ring-blue-300 overflow-hidden"
+                  onClick={onClose}
+                  style={{
+                    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif",
+                  }}
+                >
+                  Login
+                  <HiArrowRight size={15} className="ml-1" />
+                  {/* Blue highlight at the bottom center */}
+                  <span className="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-0 w-1/3 h-[2px] bg-gradient-to-r from-transparent via-blue-400 to-transparent opacity-80" />
+                </Link>
+              ) : isAdminDashboard ? (
+                <div className="w-full py-2.5 rounded-full border border-white/15 bg-transparent text-white/90 font-medium text-xl flex items-center justify-center text-center select-none cursor-default relative overflow-hidden">
+                  Admin
+                  <span className="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-0 w-1/3 h-[2px] bg-gradient-to-r from-transparent via-blue-400 to-transparent opacity-80" />
+                </div>
+              ) : (
+                <div className="w-full py-2.5 rounded-full border border-white/15 bg-transparent text-white/90 font-medium text-xl flex items-center justify-center text-center select-none cursor-default relative overflow-hidden">
+                  User
+                  <span className="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-0 w-1/3 h-[2px] bg-gradient-to-r from-transparent via-blue-400 to-transparent opacity-80" />
+                </div>
+              )}
+            </div>
+          </motion.div>
+        </>
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default MobileNavModal;