Moved Navbar-related components out of 'Home' directory.

components/Navbar/MobileNav.tsx

@@ -0,0 +1,43 @@
+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;