From 3c27cd08c998fe9d4898ec158588cc7968063cb1 Mon Sep 17 00:00:00 2001
From: sgoudham <sgoudham@gmail.com>
Date: Tue, 15 Aug 2023 00:05:34 +0100
Subject: [PATCH] refactor: delete `Navigation.tsx`

---
 app/components/Navigation.tsx | 73 ------------------------------
 app/components/nav/Navbar.tsx | 84 ++++++++++++++++++++++++++++++++++-
 app/page.tsx                  |  4 +-
 app/projects/page.tsx         |  4 +-
 4 files changed, 86 insertions(+), 79 deletions(-)
 delete mode 100644 app/components/Navigation.tsx

diff --git a/app/components/Navigation.tsx b/app/components/Navigation.tsx
deleted file mode 100644
index de2cd3b..0000000
--- a/app/components/Navigation.tsx
+++ /dev/null
@@ -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>
-    </>
-  );
-};
diff --git a/app/components/nav/Navbar.tsx b/app/components/nav/Navbar.tsx
index b49d06a..529fc02 100644
--- a/app/components/nav/Navbar.tsx
+++ b/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 
-}
\ No newline at end of file
+  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>
+  );
+};
diff --git a/app/page.tsx b/app/page.tsx
index 8d07a1f..0e3e664 100644
--- a/app/page.tsx
+++ b/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 />
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index dd43a44..6dcaf0c 100644
--- a/app/projects/page.tsx
+++ b/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">