[chris]Extracted links + navbar

src/components/desktopHeader.jsx

@@ -1,10 +1,6 @@
-import Link from "next/link";
+import { DesktopNavbar } from "./desktopNavbar";
+import { Links } from "./links";
 
 export const DesktopHeader = () => <div className="hidden lg:block ">
-<nav
- className="w-full flex justify-center items-center gap-4 bg-[#C5C6C7] h-20"
- >
-    <Link href="/" className="text-2xl text-[#1F2833]">Home</Link>
-    <Link href="/movies" className="text-2xl text-[#1F2833]">Movies</Link>
-</nav>
+  <DesktopNavbar links={Links}/>
 </div>

src/components/desktopNavbar.jsx

@@ -0,0 +1,8 @@
+import Link from "next/link";
+
+export const DesktopNavbar = ({ links }) => (
+  <nav className="w-full flex justify-center items-center gap-4 bg-[#C5C6C7] h-20">
+    {links.map((link, index) => 
+        ( <Link key={index} href={link.route} className="text-2xl text-[#1F2833]">{link.name}</Link> ))}
+    </nav>
+);

src/components/links.js

@@ -0,0 +1,4 @@
+export const Links = [
+    { route: "/", name: "Home" },
+    { route: "/movies", name: "Movies" },
+];

src/components/mobileHeader/navbar.jsx

@@ -0,0 +1,8 @@
+import Link from "next/link";
+
+export const Navbar = ({ links }) => (
+    <nav className="flex items-center flex-col gap-5">
+        {links.map((link, index) => 
+            ( <Link key={index} href={link.route} className="w-1/2 bg-slate-900 text-center h-12 flex items-center justify-center" onClick={() => setIsOpen(false)}>{link.name}</Link> ))}
+    </nav>
+);

src/components/mobileHeader/overlay.jsx

@@ -1,8 +1,11 @@
-import { BurgerSvg, XIconSvg } from "./xIconSvg";
+import { XIconSvg } from "./xIconSvg";
+import { Navbar } from "./navbar";
+import { Links } from "../links";
 
 export const Overlay = ({ setIsOpen, isOpen }) => 
 <div className={`absolute left-0 top-0 h-full bg-[#C5C6C7] w-full ${isOpen ? "block" : "hidden"} z-10`}>
     <button onClick={() => setIsOpen(false)}>
-        <XIconSvg />
+        <XIconSvg/>
     </button>
+    <Navbar links = { Links }/>
 </div>