feat(NavBar): Implemented a responsive navbar

package.json

@@ -9,7 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@nextui-org/react": "^2.3.6",
     "axios": "^1.6.8",
+    "framer-motion": "^11.1.9",
     "limiter": "^2.1.0",
     "mongodb": "^6.5.0",
     "next": "^14.2.3",

src/app/about/page.tsx

@@ -5,14 +5,14 @@ export const metadata: Metadata = {
   title: "Create Next App",
   description: "This is a base site for Andy to create his websites.",
 };
-const Home = () => {
+const About = () => {
   return (
     <section className="About flex min-h-screen w-full items-center justify-center bg-light dark:bg-dark">
-      <h1 className="Homepage-text text-8xl font-bold text-dark dark:text-light">
+      <h1 className="Homepage-text text-8xl font-bold text-dark dark:text-light text-center">
         About Page
       </h1>
     </section>
   );
 };
 
-export default Home;
+export default About;

src/app/contact/page.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "This is a base site for Andy to create his websites.",
+};
+const Contact = () => {
+  return (
+    <section className="About flex min-h-screen w-full items-center justify-center bg-light dark:bg-dark">
+      <h1 className="Homepage-text text-center text-8xl font-bold text-dark dark:text-light">
+        Contact Page
+      </h1>
+    </section>
+  );
+};
+
+export default Contact;

src/app/education/page.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { ObjectId } from "mongodb";
 import type { Metadata } from "next";
 import EducationAPI from "./api";
 import type { Education } from "./interfaces";
@@ -19,7 +18,7 @@ const Education = async () => {
   const education: Education[] = await getData();
 
   return (
-    <section className="About flex min-h-screen w-full items-center justify-center bg-light dark:bg-dark">
+    <section className="Education flex w-full items-center justify-center bg-light dark:bg-dark p-8">
       {education.map((edu) => {
         return (
           <div key={edu._id as unknown as string}>

src/app/experience/page.tsx

@@ -5,14 +5,14 @@ export const metadata: Metadata = {
   title: "Create Next App",
   description: "This is a base site for Andy to create his websites.",
 };
-const Home = () => {
+const Experience = () => {
   return (
     <section className="About flex min-h-screen w-full items-center justify-center bg-light dark:bg-dark">
-      <h1 className="Homepage-text text-8xl font-bold text-dark dark:text-light">
-        About Page
+      <h1 className="Homepage-text text-center text-8xl font-bold text-dark dark:text-light">
+        Experience Page
       </h1>
     </section>
   );
 };
 
-export default Home;
+export default Experience;

src/app/layout.tsx

@@ -18,10 +18,10 @@ const RootLayout = ({
         <Providers>
           <main className="flex">
             <NavBar />
-            <div className="flex flex-col w-full">
-            <Header />
-            {children}
-            <Footer />
+            <div className="flex min-h-screen w-full flex-col bg-light dark:bg-dark">
+              <Header />
+              {children}
+              <Footer />
             </div>
           </main>
         </Providers>

src/app/page.tsx

@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 const Home = () => {
   return (
     <section className="Home flex min-h-screen w-full items-center justify-center bg-light dark:bg-dark">
-      <h1 className="Home-text text-8xl font-bold text-dark dark:text-ligh text-center">
+      <h1 className="Home-text text-8xl font-bold text-dark dark:text-light text-center">
         Hello World
       </h1>
     </section>

src/app/projects/page.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "This is a base site for Andy to create his websites.",
+};
+const Projects = () => {
+  return (
+    <section className="About flex min-h-screen w-full items-center justify-center bg-light dark:bg-dark">
+      <h1 className="Homepage-text text-8xl text-center font-bold text-dark dark:text-light">
+        Projects Page
+      </h1>
+    </section>
+  );
+};
+
+export default Projects;

src/components/Footer.tsx

@@ -2,10 +2,8 @@ import React from "react";
 
 const Footer = () => {
   return (
-    <footer className="Footer flex h-16 w-full items-center justify-center bg-light text-lg font-medium text-dark dark:bg-dark dark:text-light">
-      <h1>
-        {new Date().getFullYear()} &copy; Andy Luu. All Rights Reserved.
-      </h1>
+    <footer className="Footer mt-auto flex h-16 w-full items-center justify-center text-lg font-medium text-dark dark:text-light">
+      <h1>{new Date().getFullYear()} &copy; Andy Luu. All Rights Reserved.</h1>
     </footer>
   );
 };

src/components/NavBar.tsx

@@ -1,12 +1,80 @@
-import React from "react";
+"use client";
+
+import React, { useState, useEffect } from "react";
 import ThemeSwitcher from "./ThemeSwitcher";
+import NavBarExpander from "./NavBarExpander";
+import {
+  FaHouseChimney,
+  FaAddressCard,
+  FaGraduationCap,
+  FaSuitcase,
+  FaCode,
+  FaEnvelope,
+} from "react-icons/fa6";
+import NavBarLink from "./NavBarLink";
 
-const NavBarLinks = [{ key: "about", label: "About", link: "/about" }];
+const navBarLinks = [
+  {
+    keyProp: "home",
+    label: "Home",
+    link: "/",
+    icon: <FaHouseChimney size={24} />,
+  },
+  {
+    keyProp: "about",
+    label: "About",
+    link: "/about",
+    icon: <FaAddressCard size={24} />,
+  },
+  {
+    keyProp: "education",
+    label: "Education",
+    link: "/education",
+    icon: <FaGraduationCap size={24} />,
+  },
+  {
+    keyProp: "experience",
+    label: "Experience",
+    link: "/experience",
+    icon: <FaSuitcase size={24} />,
+  },
+  {
+    keyProp: "projects",
+    label: "Projects",
+    link: "/projects",
+    icon: <FaCode size={24} />,
+  },
+  {
+    keyProp: "contact",
+    label: "Contact",
+    link: "/contact",
+    icon: <FaEnvelope size={24} />,
+  },
+];
 
 const NavBar = () => {
+  const [expanded, setExpanded] = useState(false);
+
   return (
-    <div className="NavBar flex w-16 flex-col gap-2 bg-primary p-2">
-      <ThemeSwitcher />
+    <div
+      className={`NavBar flex h-screen bg-primary md:static md:w-72 ${expanded && "absolute w-full"}`}>
+      <div
+        className={`NavBar flex flex-col justify-center gap-2 p-2 w-full`}>
+        <ThemeSwitcher expanded={expanded} />
+
+        {navBarLinks.map((navBarLink) => {
+          return (
+            <NavBarLink
+              key={navBarLink.keyProp}
+              label={navBarLink.label}
+              link={navBarLink.link}
+              icon={navBarLink.icon}
+              expanded={expanded}
+            />
+          );
+        })}
+      </div>
+      <NavBarExpander expanded={expanded} setExpanded={setExpanded} />
     </div>
   );
 };

src/components/NavBarExpander.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { FaAngleRight, FaAngleLeft } from "react-icons/fa";
+import React from "react";
+import { Button } from "@nextui-org/react";
+
+const NavBarExpander = ({
+  expanded,
+  setExpanded,
+}: {
+  expanded: boolean;
+  setExpanded: Function;
+}) => {
+  if (!expanded) {
+    return (
+      <Button
+        isIconOnly={true}
+        onClick={() => setExpanded(true)}
+        aria-label="Expand"
+        color="default"
+        className="h-full w-5 md:hidden">
+        <FaAngleRight size={24} className=" text-dark dark:text-light" />
+      </Button>
+    );
+  }
+
+  if (expanded) {
+    return (
+      <Button
+        isIconOnly={true}
+        onClick={() => setExpanded(false)}
+        aria-label="Unexpand"
+        color="default"
+        className="h-full w-10 md:hidden">
+        <FaAngleLeft size={48} className=" text-dark dark:text-light" />
+      </Button>
+    );
+  }
+};
+
+export default NavBarExpander;

src/components/NavBarLink.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import React, { ReactNode } from "react";
+import { Link, Button } from "@nextui-org/react";
+
+const NavBarLink = ({
+  label,
+  link,
+  icon,
+  expanded,
+}: {
+  label: string;
+  link: string;
+  icon: ReactNode;
+  expanded: boolean;
+}) => {
+  const pathname = usePathname();
+
+  return (
+    <Button
+      as={Link}
+      isIconOnly={true}
+      href={link}
+      aria-label={label}
+      color="default"
+      className={`flex justify-start rounded-lg p-3 hover:bg-light dark:hover:bg-dark md:w-full ${expanded ? "w-full" : "w-12"} ${pathname === link && "bg-light dark:bg-dark"}`}>
+      {icon}
+      {
+        <div
+          className={`text-2xl font-semibold md:block ${expanded ? "block" : "hidden"}`}>
+          {label}
+        </div>
+      }
+    </Button>
+  );
+};
+
+export default NavBarLink;