44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
import {navLinks} from "@/constant/Constant";
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
import {CgClose} from "react-icons/cg";
|
|
|
|
type Props = {
|
|
showNav: boolean;
|
|
closeNav: () => void;
|
|
};
|
|
|
|
const MobileNav = ({closeNav, showNav}: Props) => {
|
|
const navOpen = showNav ? "translate-x-0" : "translate-x-[-100%]";
|
|
|
|
return (
|
|
<div>
|
|
{/* overlay */}
|
|
<div
|
|
className={`fixed ${navOpen} inset-0 transform transition-all duration-500 z-[10000] bg-black opacity-70 w-full h-screen`}
|
|
></div>
|
|
{/* Navlinks */}
|
|
<div
|
|
className={`text-white ${navOpen} fixed justify-center flex flex-col h-full transform transition-all duration-500 delay-300 w-[80%] sm:w-[60%] bg-indigo-900 space-y-6 z-[10006]`}
|
|
>
|
|
{navLinks.map((link) => {
|
|
return (
|
|
<Link href={link.url} key={link.id}>
|
|
<p className="nav__link text-white text-[20px] ml-12 border-b-[1.5px] pb-1 border-white sm:text-[30px]">
|
|
{link.label}
|
|
</p>
|
|
</Link>
|
|
);
|
|
})}
|
|
{/* Close icon */}
|
|
<CgClose
|
|
onClick={closeNav}
|
|
className="absolute top-[0.7rem] right-[1.4rem] sm:w-8 sm:h-8 w-6 h-6"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MobileNav;
|