From 3c25b2520f2ecce9ab98c881dbdc2b9398e78cc7 Mon Sep 17 00:00:00 2001
From: Rei <reicareich@gmail.com>
Date: Tue, 23 Sep 2025 22:35:50 -0500
Subject: [PATCH 1/5] Add basic NavBar component

---
 src/app/page.tsx          |  7 ++++++-
 src/components/NavBar.tsx | 26 ++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 src/components/NavBar.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index dc57993..652c2f2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,5 @@
 import type { Metadata } from 'next';
+import NavBar from '@components/NavBar';
 
 export const metadata: Metadata = {
   alternates: {
@@ -7,7 +8,11 @@ export const metadata: Metadata = {
 };
 
 const Home = () => {
-  return 'UTD Notebook';
+  return (
+    <>
+      <NavBar />
+    </>
+  );
 };
 
 export default Home;
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
new file mode 100644
index 0000000..526fd41
--- /dev/null
+++ b/src/components/NavBar.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import Link from 'next/link';
+import { Button } from '@mui/material';
+
+export default function NavBar() {
+  return (
+    <>
+      <div className="relative flex flex-wrap items-center gap-x-2 gap-y-0 overflow-hidden border-b-1 px-4 py-1 sm:flex-nowrap md:gap-x-4 md:px-8 md:py-4 lg:gap-x-8 lg:px-16">
+        <Link
+          href="/"
+          className="font-display flex items-center gap-2 text-lg font-medium md:text-xl md:font-bold"
+        >
+          UTD Notebook
+        </Link>
+        <div className="ml-auto flex gap-x-2 md:gap-x-4">
+          <Button href="/dashboard" className="shrink-0 text-white normal-case">
+            Dashboard
+          </Button>
+          <Button href="/about" className="shrink-0 text-white normal-case">
+            About
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}

From 9d621260342fa011e42371bdf8bfdc94f590f412 Mon Sep 17 00:00:00 2001
From: Darrion Nguyen <111015952+t1np0t@users.noreply.github.com>
Date: Wed, 24 Sep 2025 18:29:12 -0500
Subject: [PATCH 2/5] Created NavBar design

---
 src/components/NavBar.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 526fd41..4a5a68d 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,11 +1,18 @@
 import React from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 import { Button } from '@mui/material';
 
 export default function NavBar() {
   return (
     <>
       <div className="relative flex flex-wrap items-center gap-x-2 gap-y-0 overflow-hidden border-b-1 px-4 py-1 sm:flex-nowrap md:gap-x-4 md:px-8 md:py-4 lg:gap-x-8 lg:px-16">
+        <Image
+          src={"/background.png"}
+          alt="backgroundd"
+          className="-z-10"
+          fill
+        />
         <Link
           href="/"
           className="font-display flex items-center gap-2 text-lg font-medium md:text-xl md:font-bold"
@@ -16,8 +23,17 @@ export default function NavBar() {
           <Button href="/dashboard" className="shrink-0 text-white normal-case">
             Dashboard
           </Button>
-          <Button href="/about" className="shrink-0 text-white normal-case">
-            About
+          <Button href="/courses" className="shrink-0 text-white normal-case">
+            Courses
+          </Button>
+          <Button href="/notes" className="shrink-0 text-white normal-case">
+            Notes
+          </Button>
+          <Button href="/resources" className="shrink-0 text-white normal-case">
+            Resources
+          </Button>
+          <Button href="/profile" className="shrink-0 text-white normal-case">
+            Profile
           </Button>
         </div>
       </div>

From cf481f2bbedc98c47275d016a2749fea6dd1a8c6 Mon Sep 17 00:00:00 2001
From: Rei <reicareich@gmail.com>
Date: Wed, 1 Oct 2025 18:33:40 -0500
Subject: [PATCH 3/5] Match navbar to wireframe

---
 src/components/NavBar.tsx | 26 +++++++++-----------------
 1 file changed, 9 insertions(+), 17 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 4a5a68d..2845e45 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -6,10 +6,10 @@ import { Button } from '@mui/material';
 export default function NavBar() {
   return (
     <>
-      <div className="relative flex flex-wrap items-center gap-x-2 gap-y-0 overflow-hidden border-b-1 px-4 py-1 sm:flex-nowrap md:gap-x-4 md:px-8 md:py-4 lg:gap-x-8 lg:px-16">
+      <div className="relative flex flex-wrap items-center gap-x-2 gap-y-0 overflow-hidden border-b-1 px-4 py-1 sm:flex-nowrap md:gap-x-4 md:px-8 md:py-1 lg:gap-x-8 lg:px-16">
         <Image
           src={"/background.png"}
-          alt="backgroundd"
+          alt="background"
           className="-z-10"
           fill
         />
@@ -20,21 +20,13 @@ export default function NavBar() {
           UTD Notebook
         </Link>
         <div className="ml-auto flex gap-x-2 md:gap-x-4">
-          <Button href="/dashboard" className="shrink-0 text-white normal-case">
-            Dashboard
-          </Button>
-          <Button href="/courses" className="shrink-0 text-white normal-case">
-            Courses
-          </Button>
-          <Button href="/notes" className="shrink-0 text-white normal-case">
-            Notes
-          </Button>
-          <Button href="/resources" className="shrink-0 text-white normal-case">
-            Resources
-          </Button>
-          <Button href="/profile" className="shrink-0 text-white normal-case">
-            Profile
-          </Button>
+            <Image
+              src={"/"}
+              alt="profile picture"
+              width={256}
+              height={256}
+              className='flex rounded-full border border-white size-16 flex-shrink-0'
+            />
         </div>
       </div>
     </>

From 55b6bd8446abfbeb27c13741e6f432be586fc609 Mon Sep 17 00:00:00 2001
From: Rei <reicareich@gmail.com>
Date: Thu, 2 Oct 2025 19:20:17 -0500
Subject: [PATCH 4/5] Update profile image as MUI IconButton

---
 src/components/NavBar.tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 2845e45..5274262 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
-import { Button } from '@mui/material';
+import { IconButton } from '@mui/material';
 
 export default function NavBar() {
   return (
     <>
-      <div className="relative flex flex-wrap items-center gap-x-2 gap-y-0 overflow-hidden border-b-1 px-4 py-1 sm:flex-nowrap md:gap-x-4 md:px-8 md:py-1 lg:gap-x-8 lg:px-16">
+      <div className="bg-darken relative flex flex-wrap items-center gap-x-2 gap-y-0 overflow-hidden border-b-1 px-4 py-1 sm:flex-nowrap md:gap-x-4 md:px-8 md:py-1 lg:gap-x-8 lg:px-16">
         <Image
-          src={"/background.png"}
+          src={'/background.png'}
           alt="background"
           className="-z-10"
           fill
@@ -20,13 +20,16 @@ export default function NavBar() {
           UTD Notebook
         </Link>
         <div className="ml-auto flex gap-x-2 md:gap-x-4">
-            <Image
-              src={"/"}
-              alt="profile picture"
-              width={256}
-              height={256}
-              className='flex rounded-full border border-white size-16 flex-shrink-0'
-            />
+          <IconButton size="large" sx={{ p: 0 }}>
+            <div className="relative size-16 flex-shrink-0">
+              <Image
+                src="/icon-white.svg"
+                alt="profile picture"
+                fill
+                className="rounded-full border border-white object-cover"
+              />
+            </div>
+          </IconButton>
         </div>
       </div>
     </>

From c2d61e0cf1380063d8ed1b09c6c43bb5cd5095f6 Mon Sep 17 00:00:00 2001
From: Rei <reicareich@gmail.com>
Date: Tue, 7 Oct 2025 18:02:39 -0500
Subject: [PATCH 5/5] Add tooltip and update profile icon

---
 src/components/NavBar.tsx | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 5274262..85b5d43 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
-import { IconButton } from '@mui/material';
+import { IconButton, Tooltip } from '@mui/material';
 
 export default function NavBar() {
   return (
@@ -10,26 +10,30 @@ export default function NavBar() {
         <Image
           src={'/background.png'}
           alt="background"
-          className="-z-10"
+          className="-z-10 object-cover"
           fill
         />
+
         <Link
           href="/"
           className="font-display flex items-center gap-2 text-lg font-medium md:text-xl md:font-bold"
         >
           UTD Notebook
         </Link>
-        <div className="ml-auto flex gap-x-2 md:gap-x-4">
-          <IconButton size="large" sx={{ p: 0 }}>
-            <div className="relative size-16 flex-shrink-0">
-              <Image
-                src="/icon-white.svg"
-                alt="profile picture"
-                fill
-                className="rounded-full border border-white object-cover"
-              />
-            </div>
-          </IconButton>
+
+        <div className="ml-auto flex items-center gap-x-2 md:gap-x-4">
+          <Tooltip title="Profile">
+            <IconButton size="medium" href="/profile">
+              <div className="relative size-10 flex-shrink-0 md:size-12">
+                <Image
+                  src="/icon-white.svg"
+                  alt="profile picture"
+                  fill
+                  className="rounded-full border-2 border-white object-cover"
+                />
+              </div>
+            </IconButton>
+          </Tooltip>
         </div>
       </div>
     </>