63 lines
2.7 KiB
TypeScript
63 lines
2.7 KiB
TypeScript
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;
|