refactor: delete `Navigation.tsx`

app/components/Navigation.tsx

@@ -1,73 +0,0 @@
-"use client";
-
-import { useRef, useState } from "react";
-import { ProfilePicture } from "./images/ProfilePicture";
-import { Hamburger } from "./nav/Hamburger";
-import { Links } from "./nav/Links";
-import { Close } from "./icons/Close";
-import Link from "next/link";
-import { Dialog } from "@headlessui/react";
-import { usePathname } from "next/navigation";
-
-export const NavBar = () => {
-  const path = usePathname();
-  const focusedRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const checkPath = (href: string) => {
-    if (href === path) {
-      setIsOpen(false);
-    }
-  };
-
-  return (
-    <>
-      <nav className="self-center w-full max-w-xl lg:max-w-3xl xl:max-w-6xl">
-        <div className="p-4 flex flex-row items-center justify-between text-md lg:text-lg xl:text-xl">
-          <ProfilePicture />
-          <div className="hidden md:flex flex-row gap-x-4 font-bold tracking-tight">
-            <Links />
-          </div>
-          <button
-            className="md:hidden px-4 py-2 hover:bg-crust dark:hover:bg-base rounded-lg"
-            aria-label="Open Menu"
-            onClick={() => setIsOpen((prev) => !prev)}
-          >
-            <Hamburger />
-          </button>
-        </div>
-      </nav>
-
-      <Dialog
-        className={
-          isOpen
-            ? "block w-full h-screen absolute overflow-hidden inset-0 bg-base dark:bg-crust z-10 flex-col items-center"
-            : "hidden"
-        }
-        open={isOpen}
-        onClose={() => setIsOpen(false)}
-        // initialFocus={focusedRef}
-      >
-        <div className="max-w-xl mx-auto">
-          <div className="p-4 w-full flex flex-row items-center justify-between">
-            <ProfilePicture />
-            <button
-              className="px-4 py-1 hover:bg-crust dark:hover:bg-base rounded-lg focus:bg-crust dark:focus:bg-base"
-              onClick={() => setIsOpen((prev) => !prev)}
-              ref={focusedRef}
-            >
-              <Close />
-            </button>
-          </div>
-          <ul className="flex flex-col space-y-6 items-center text-2xl font-semibold justify-center">
-            <Link href="/" onClick={() => checkPath("/")}>
-              &lt; Home /&gt;
-            </Link>
-            <Link href="/projects" onClick={() => checkPath("/projects")}>
-              &lt; Projects /&gt;
-            </Link>
-          </ul>
-        </div>
-      </Dialog>
-    </>
-  );
-};

app/components/nav/Navbar.tsx

@@ -1,3 +1,83 @@
+"use client";
+
+import { Dispatch, SetStateAction, useRef, useState } from "react";
+import { ProfilePicture } from "../images/ProfilePicture";
+import { Hamburger } from "./Hamburger";
+import { Links } from "./Links";
+import { Close } from "../icons/Close";
+import Link from "next/link";
+import { Dialog } from "@headlessui/react";
+import { usePathname } from "next/navigation";
+
 export const Navbar = () => {
-  return 
+  const [isOpen, setIsOpen] = useState(false);
-}
+  return (
+    <>
+      <nav className="self-center w-full max-w-xl lg:max-w-3xl xl:max-w-6xl">
+        <div className="p-4 flex flex-row items-center justify-between text-md lg:text-lg xl:text-xl">
+          <ProfilePicture />
+          <div className="hidden md:flex flex-row gap-x-4 font-bold tracking-tight">
+            <Links />
+          </div>
+          <button
+            className="md:hidden px-4 py-2 hover:bg-crust dark:hover:bg-base rounded-lg"
+            aria-label="Open Menu"
+            onClick={() => setIsOpen((prev) => !prev)}
+          >
+            <Hamburger />
+          </button>
+        </div>
+      </nav>
+      <MobileMenu isOpen={isOpen} setIsOpen={setIsOpen} />
+    </>
+  );
+};
+
+export const MobileMenu = ({
+  isOpen,
+  setIsOpen,
+}: {
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const focusedRef = useRef(null);
+  const path = usePathname();
+  const checkPath = (href: string) => {
+    if (href === path) {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <Dialog
+      className={
+        isOpen
+          ? "block w-full h-screen absolute overflow-hidden inset-0 bg-base dark:bg-crust z-10 flex-col items-center"
+          : "hidden"
+      }
+      open={isOpen}
+      onClose={() => setIsOpen(false)}
+    >
+      <div className="max-w-xl mx-auto">
+        <div className="p-4 w-full flex flex-row items-center justify-between">
+          <ProfilePicture />
+          <button
+            className="px-4 py-1 hover:bg-crust dark:hover:bg-base rounded-lg focus:bg-crust dark:focus:bg-base"
+            onClick={() => setIsOpen((prev) => !prev)}
+            ref={focusedRef}
+          >
+            <Close />
+          </button>
+        </div>
+        <ul className="flex flex-col space-y-6 items-center text-2xl font-semibold justify-center">
+          <Link href="/" onClick={() => checkPath("/")}>
+            &lt; Home /&gt;
+          </Link>
+          <Link href="/projects" onClick={() => checkPath("/projects")}>
+            &lt; Projects /&gt;
+          </Link>
+        </ul>
+      </div>
+    </Dialog>
+  );
+};

app/page.tsx

@@ -1,13 +1,13 @@
 import { Header } from "./components/Header";
 import { About } from "./components/About";
 import { Projects } from "./components/Projects";
-import { NavBar } from "./components/Navigation";
+import { Navbar } from "./components/nav/Navbar";
 
 export default function Home() {
   return (
     /* Inherits from the RootLayout */
     <div className="flex flex-col">
-      <NavBar />
+      <Navbar />
       <div className="self-center max-w-md lg:max-w-lg xl:max-w-xl flex flex-col space-y-10 grow">
         <Header />
         <About />

app/projects/page.tsx

@@ -2,7 +2,7 @@ import { fetchUserRepositories } from "../lib/api";
 import { Project } from "../components/Projects";
 import { Text } from "../components/utils/Text";
 import { H1 } from "../components/utils/Titles";
-import { NavBar } from "../components/Navigation";
+import { Navbar } from "../components/nav/Navbar";
 
 export default async function Projects() {
   const projects = await fetchUserRepositories().then((res) =>
@@ -14,7 +14,7 @@ export default async function Projects() {
   return (
     /* Inherits from the RootLayout */
     <div className="flex flex-col">
-      <NavBar />
+      <Navbar />
       <div className="self-center max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-4xl flex flex-col space-y-10 grow">
         <H1>All Projects</H1>
         <div className="flex flex-col mx-3 gap-3 text-center">