Merge branch 'dev' into 'production'

Merge dev into production

See merge request rheinsw/website!27

components/Navbar/MobileNav.tsx

@@ -0,0 +1,62 @@
+import { navLinks } from "@/constant/Constant";
+import Link from "next/link";
+import React, { useContext } from "react";
+import { CgClose } from "react-icons/cg";
+import { ThemeContext } from "@/components/provider/ThemeProvider";
+import { themeColors } from "@/components/Helper/ThemeColors";
+
+type Props = {
+    showNav: boolean;
+    closeNav: () => void;
+};
+
+const MobileNav = ({ closeNav, showNav }: Props) => {
+    const navOpen = showNav ? "translate-y-0 opacity-100" : "-translate-y-20 opacity-0 pointer-events-none";
+    const { theme, toggleTheme } = useContext(ThemeContext);
+    const colors = themeColors[theme];
+    return (
+        <div className="lg:hidden">
+            {/* overlay background */}
+            <div
+                className={`fixed inset-0 z-[10000] transition-opacity duration-500 ${
+                    showNav ? "opacity-60 bg-black" : "opacity-0 pointer-events-none"
+                }`}
+                onClick={closeNav}
+            />
+
+            {/* nav menu */}
+            <div
+                className={`fixed top-0 left-0 w-full z-[10006] transform ${navOpen} transition-all duration-500 ease-in-out text-[var(--primary-text)] shadow-md rounded-b-2xl`}
+                style={{ backgroundColor: theme === "dark" ? "#2A2A2A" : "#ffffff", color: theme === "dark" ? "#f5f5f5" : "#1a1a1a" }}
+            >
+                <div className="flex flex-col items-center justify-center py-8 space-y-4 px-4 relative">
+                    {/* Close icon */}
+                    <CgClose
+                        onClick={closeNav}
+                        className="absolute top-4 right-6 sm:right-8 sm:w-7 sm:h-7 w-6 h-6 cursor-pointer p-1"
+                        style={{ color: colors.primaryText }}
+                    />
+
+                    {navLinks.map((link) => (
+                        <Link href={link.url} key={link.id}>
+                            <p className="nav__link uppercase text-[14px] sm:text-[16px] border-b pb-1 border-gray-400 transition-all duration-300 ease-in-out hover:scale-105">
+                                {link.label}
+                            </p>
+                        </Link>
+                    ))}
+
+                    {/* Theme toggle button */}
+                    <button
+                        onClick={toggleTheme}
+                        className="mt-4 w-8 h-8 flex items-center justify-center rounded-full border border-gray-400 transition-all duration-300"
+                        style={{ backgroundColor: colors.secondaryBg, color: colors.primaryText }}
+                    >
+                        {theme === "dark" ? "🌙" : "☀️"}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default MobileNav;