From 03893753d715f440a059c485a50dff839cf3111e Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:35:04 -0700
Subject: [PATCH 01/20] feat: Refactor menu items with { active } to use
 headlessui highlighting

---
 components/ThemeSwitch.tsx | 54 +++++++++++++++++++++++++-------------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/components/ThemeSwitch.tsx b/components/ThemeSwitch.tsx
index 178ec46c6..14957b8b8 100644
--- a/components/ThemeSwitch.tsx
+++ b/components/ThemeSwitch.tsx
@@ -72,32 +72,50 @@ const ThemeSwitch = () => {
               <div className="p-1">
                 <RadioGroup.Option value="light">
                   <Menu.Item>
-                    <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
-                      <div className="mr-2">
-                        <Sun />
-                      </div>
-                      Light
-                    </button>
+                    {({ active }) => (
+                      <button
+                        className={`${
+                          active ? 'bg-primary-600 text-white' : ''
+                        } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+                      >
+                        <div className="mr-2">
+                          <Sun />
+                        </div>
+                        Light
+                      </button>
+                    )}
                   </Menu.Item>
                 </RadioGroup.Option>
                 <RadioGroup.Option value="dark">
                   <Menu.Item>
-                    <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
-                      <div className="mr-2">
-                        <Moon />
-                      </div>
-                      Dark
-                    </button>
+                    {({ active }) => (
+                      <button
+                        className={`${
+                          active ? 'bg-primary-600 text-white' : ''
+                        } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+                      >
+                        <div className="mr-2">
+                          <Moon />
+                        </div>
+                        Dark
+                      </button>
+                    )}
                   </Menu.Item>
                 </RadioGroup.Option>
                 <RadioGroup.Option value="system">
                   <Menu.Item>
-                    <button className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
-                      <div className="mr-2">
-                        <Monitor />
-                      </div>
-                      System
-                    </button>
+                    {({ active }) => (
+                      <button
+                        className={`${
+                          active ? 'bg-primary-600 text-white' : ''
+                        } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+                      >
+                        <div className="mr-2">
+                          <Monitor />
+                        </div>
+                        System
+                      </button>
+                    )}
                   </Menu.Item>
                 </RadioGroup.Option>
               </div>

From 0d6b12fdcb350942e8d44a9b5f58165689e098d4 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:38:39 -0700
Subject: [PATCH 02/20] feat: Switch to headerNavLinks import for NavOptions

---
 components/NavOptions.tsx | 48 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 components/NavOptions.tsx

diff --git a/components/NavOptions.tsx b/components/NavOptions.tsx
new file mode 100644
index 000000000..4e44e3952
--- /dev/null
+++ b/components/NavOptions.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import { Fragment, useEffect, useState } from 'react'
+import { useTheme } from 'next-themes'
+import { Menu, RadioGroup, Transition } from '@headlessui/react'
+import headerNavLinks from '@/data/headerNavLinks'
+import Link from 'next/link'
+
+export const NavOptions = () => {
+  return (
+    <div className="mr-5">
+      <Menu as="div" className="relative inline-block text-left">
+        <div>
+          {headerNavLinks.title && (
+            <Menu.Button className={'hidden font-medium text-gray-900 dark:text-gray-100 sm:block'}>
+              {headerNavLinks.title}
+            </Menu.Button>
+          )}
+        </div>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items className="absolute right-0 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800">
+            <div className="p-1">
+              {headerNavLinks.children &&
+                headerNavLinks.children.map((link) => (
+                  <Menu.Item key={link.title}>
+                    <Link
+                      href={link.href}
+                      className="group flex w-full items-center rounded-md px-2 py-2 text-sm"
+                    >
+                      {link.title}
+                    </Link>
+                  </Menu.Item>
+                ))}
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </div>
+  )
+}

From 402722baf714fa97f8dc46460876b672761fe623 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:40:04 -0700
Subject: [PATCH 03/20] feat: Update object structure to inlcude "children"
 prop

---
 data/headerNavLinks.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/data/headerNavLinks.ts b/data/headerNavLinks.ts
index 8ca9493db..1641e1606 100644
--- a/data/headerNavLinks.ts
+++ b/data/headerNavLinks.ts
@@ -4,6 +4,13 @@ const headerNavLinks = [
   { href: '/tags', title: 'Tags' },
   { href: '/projects', title: 'Projects' },
   { href: '/about', title: 'About' },
+  {
+    title: 'Dropdown',
+    children: [
+      { href: '/projects', title: 'Projects' },
+      { href: '/about', title: 'About' },
+    ],
+  },
 ]
 
 export default headerNavLinks

From a21945a8b06802a1bd5f20b31c657a6de7b5cf3f Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:40:30 -0700
Subject: [PATCH 04/20] feat: Create type NavItem for headerNavLinks

---
 data/headerNavLinks.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/data/headerNavLinks.ts b/data/headerNavLinks.ts
index 1641e1606..12667350b 100644
--- a/data/headerNavLinks.ts
+++ b/data/headerNavLinks.ts
@@ -13,4 +13,10 @@ const headerNavLinks = [
   },
 ]
 
+export interface NavItem {
+  href?: string
+  title: string
+  children?: NavItem[]
+}
+
 export default headerNavLinks

From 818c64575155c6683901be869eeb9f0ebcbbefdc Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:40:49 -0700
Subject: [PATCH 05/20] feat: Import NavItem type into NavOptions

---
 components/NavOptions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/NavOptions.tsx b/components/NavOptions.tsx
index 4e44e3952..7a044aeee 100644
--- a/components/NavOptions.tsx
+++ b/components/NavOptions.tsx
@@ -3,7 +3,7 @@
 import { Fragment, useEffect, useState } from 'react'
 import { useTheme } from 'next-themes'
 import { Menu, RadioGroup, Transition } from '@headlessui/react'
-import headerNavLinks from '@/data/headerNavLinks'
+import headerNavLinks, { NavItem } from '@/data/headerNavLinks'
 import Link from 'next/link'
 
 export const NavOptions = () => {

From 24241049b7f7804052d5505fcf19dd11ad853a63 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:41:10 -0700
Subject: [PATCH 06/20] feat: Create RenderNavLinks helper function

---
 components/NavOptions.tsx | 52 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/components/NavOptions.tsx b/components/NavOptions.tsx
index 7a044aeee..c4ac05b47 100644
--- a/components/NavOptions.tsx
+++ b/components/NavOptions.tsx
@@ -46,3 +46,55 @@ export const NavOptions = () => {
     </div>
   )
 }
+
+const RenderNavLink = ({ navItem }: { navItem: NavItem }) => {
+  if (!navItem.children) {
+    return (
+      <Link
+        key={navItem.title}
+        href={navItem.href}
+        className="hidden font-medium text-gray-900 dark:text-gray-100 sm:block"
+      >
+        {navItem.title}
+      </Link>
+    )
+  }
+  return (
+    <div className="mr-5">
+      <Menu as="div" className="relative inline-block text-left">
+        <div>
+          {navItem.title && (
+            <Menu.Button className={'hidden font-medium text-gray-900 dark:text-gray-100 sm:block'}>
+              {navItem.title}
+            </Menu.Button>
+          )}
+        </div>
+        <Transition
+          as={Fragment}
+          enter="transition ease-out duration-100"
+          enterFrom="transform opacity-0 scale-95"
+          enterTo="transform opacity-100 scale-100"
+          leave="transition ease-in duration-75"
+          leaveFrom="transform opacity-100 scale-100"
+          leaveTo="transform opacity-0 scale-95"
+        >
+          <Menu.Items className="absolute right-0 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800">
+            <div className="p-1">
+              {navItem.children &&
+                navItem.children.map((link) => (
+                  <Menu.Item key={link.title}>
+                    <Link
+                      href={link.href}
+                      className="group flex w-full items-center rounded-md px-2 py-2 text-sm"
+                    >
+                      {link.title}
+                    </Link>
+                  </Menu.Item>
+                ))}
+            </div>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </div>
+  )
+}

From fdd1ce84bccda7854ea12afe7f66432efaf4988d Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:41:31 -0700
Subject: [PATCH 07/20] feat: Use helper function in NavOptions .map()

---
 components/NavOptions.tsx | 43 +++++++--------------------------------
 1 file changed, 7 insertions(+), 36 deletions(-)

diff --git a/components/NavOptions.tsx b/components/NavOptions.tsx
index c4ac05b47..04f067db8 100644
--- a/components/NavOptions.tsx
+++ b/components/NavOptions.tsx
@@ -8,42 +8,13 @@ import Link from 'next/link'
 
 export const NavOptions = () => {
   return (
-    <div className="mr-5">
-      <Menu as="div" className="relative inline-block text-left">
-        <div>
-          {headerNavLinks.title && (
-            <Menu.Button className={'hidden font-medium text-gray-900 dark:text-gray-100 sm:block'}>
-              {headerNavLinks.title}
-            </Menu.Button>
-          )}
-        </div>
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <Menu.Items className="absolute right-0 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800">
-            <div className="p-1">
-              {headerNavLinks.children &&
-                headerNavLinks.children.map((link) => (
-                  <Menu.Item key={link.title}>
-                    <Link
-                      href={link.href}
-                      className="group flex w-full items-center rounded-md px-2 py-2 text-sm"
-                    >
-                      {link.title}
-                    </Link>
-                  </Menu.Item>
-                ))}
-            </div>
-          </Menu.Items>
-        </Transition>
-      </Menu>
-    </div>
+    <>
+      {headerNavLinks
+        .filter((link) => link.href !== '/')
+        .map((link) => (
+          <RenderNavLink navItem={link} key={link.title} />
+        ))}
+    </>
   )
 }
 

From 478321f87e8b6d75c1a1e6d610c6b5afcdc11108 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:41:45 -0700
Subject: [PATCH 08/20] feat: Create NavItemChild type, add to NavItem type

---
 data/headerNavLinks.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/data/headerNavLinks.ts b/data/headerNavLinks.ts
index 12667350b..71425dd8c 100644
--- a/data/headerNavLinks.ts
+++ b/data/headerNavLinks.ts
@@ -16,7 +16,12 @@ const headerNavLinks = [
 export interface NavItem {
   href?: string
   title: string
-  children?: NavItem[]
+  children?: NavItemChild[]
+}
+
+export interface NavItemChild {
+  href: string
+  title: string
 }
 
 export default headerNavLinks

From 6af7466cc480ba28d79b12ad0c39d30e0be97dd4 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:42:02 -0700
Subject: [PATCH 09/20] feat: Add NavItemChild import t

---
 components/NavOptions.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/NavOptions.tsx b/components/NavOptions.tsx
index 04f067db8..d90031d35 100644
--- a/components/NavOptions.tsx
+++ b/components/NavOptions.tsx
@@ -3,7 +3,7 @@
 import { Fragment, useEffect, useState } from 'react'
 import { useTheme } from 'next-themes'
 import { Menu, RadioGroup, Transition } from '@headlessui/react'
-import headerNavLinks, { NavItem } from '@/data/headerNavLinks'
+import headerNavLinks, { NavItem, NavItemChild } from '@/data/headerNavLinks'
 import Link from 'next/link'
 
 export const NavOptions = () => {
@@ -52,7 +52,7 @@ const RenderNavLink = ({ navItem }: { navItem: NavItem }) => {
           <Menu.Items className="absolute right-0 mt-2 w-32 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-gray-800">
             <div className="p-1">
               {navItem.children &&
-                navItem.children.map((link) => (
+                navItem.children.map((link: NavItemChild) => (
                   <Menu.Item key={link.title}>
                     <Link
                       href={link.href}

From fd96713abbf4e80ed5bf12a5219804be83ac7d66 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:42:15 -0700
Subject: [PATCH 10/20] feat: Add { active } to RenderNavLink, highlighting for
 dropdown

---
 components/NavOptions.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/NavOptions.tsx b/components/NavOptions.tsx
index d90031d35..4a17499be 100644
--- a/components/NavOptions.tsx
+++ b/components/NavOptions.tsx
@@ -54,12 +54,16 @@ const RenderNavLink = ({ navItem }: { navItem: NavItem }) => {
               {navItem.children &&
                 navItem.children.map((link: NavItemChild) => (
                   <Menu.Item key={link.title}>
-                    <Link
-                      href={link.href}
-                      className="group flex w-full items-center rounded-md px-2 py-2 text-sm"
-                    >
-                      {link.title}
-                    </Link>
+                    {({ active }) => (
+                      <Link
+                        href={link.href}
+                        className={`${
+                          active ? 'bg-primary-600 text-white' : ''
+                        } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+                      >
+                        {link.title}
+                      </Link>
+                    )}
                   </Menu.Item>
                 ))}
             </div>

From bccdbb18a689808a1e47060902f4ba1012e3037e Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:44:21 -0700
Subject: [PATCH 11/20] feat: Add { NavOptions } import to Header.tsx

---
 components/Header.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/Header.tsx b/components/Header.tsx
index 362b7cdd9..47c60148f 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -5,6 +5,7 @@ import Link from './Link'
 import MobileNav from './MobileNav'
 import ThemeSwitch from './ThemeSwitch'
 import SearchButton from './SearchButton'
+import { NavOptions } from './NavOptions'
 
 const Header = () => {
   return (

From 88a7710cb0306f0926a8ace586c9742b1085dcbf Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:45:12 -0700
Subject: [PATCH 12/20] feat: Remove headerNavLinks from Header.tsx

---
 components/Header.tsx | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/components/Header.tsx b/components/Header.tsx
index 47c60148f..d67666d57 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,5 +1,4 @@
 import siteMetadata from '@/data/siteMetadata'
-import headerNavLinks from '@/data/headerNavLinks'
 import Logo from '@/data/logo.svg'
 import Link from './Link'
 import MobileNav from './MobileNav'
@@ -27,17 +26,7 @@ const Header = () => {
         </Link>
       </div>
       <div className="flex items-center space-x-4 leading-5 sm:space-x-6">
-        {headerNavLinks
-          .filter((link) => link.href !== '/')
-          .map((link) => (
-            <Link
-              key={link.title}
-              href={link.href}
-              className="hidden font-medium text-gray-900 dark:text-gray-100 sm:block"
-            >
-              {link.title}
-            </Link>
-          ))}
+        <NavOptions />
         <SearchButton />
         <ThemeSwitch />
         <MobileNav />

From 23a983a642336ef913a8c25fb49a067ee485d339 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:46:35 -0700
Subject: [PATCH 13/20] fix: Restore nav links highlighting

---
 components/NavOptions.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/NavOptions.tsx b/components/NavOptions.tsx
index 4a17499be..390db704e 100644
--- a/components/NavOptions.tsx
+++ b/components/NavOptions.tsx
@@ -24,7 +24,7 @@ const RenderNavLink = ({ navItem }: { navItem: NavItem }) => {
       <Link
         key={navItem.title}
         href={navItem.href}
-        className="hidden font-medium text-gray-900 dark:text-gray-100 sm:block"
+        className="hidden font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100  dark:hover:text-primary-400 sm:block"
       >
         {navItem.title}
       </Link>
@@ -35,7 +35,11 @@ const RenderNavLink = ({ navItem }: { navItem: NavItem }) => {
       <Menu as="div" className="relative inline-block text-left">
         <div>
           {navItem.title && (
-            <Menu.Button className={'hidden font-medium text-gray-900 dark:text-gray-100 sm:block'}>
+            <Menu.Button
+              className={
+                'hidden font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100  dark:hover:text-primary-400 sm:block'
+              }
+            >
               {navItem.title}
             </Menu.Button>
           )}

From 17f0c22648ccf2a6fd4f84998b4cc074ee10ea83 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:46:54 -0700
Subject: [PATCH 14/20] feat: Create RenderMobileNavLink helper func

---
 components/MobileNav.tsx | 43 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index 1435567cd..03586388d 100644
--- a/components/MobileNav.tsx
+++ b/components/MobileNav.tsx
@@ -108,3 +108,46 @@ const MobileNav = () => {
 }
 
 export default MobileNav
+
+interface RenderMobileNavLinkProps extends NavItem {
+  clickFunc: () => void
+  navLink: NavItem
+}
+
+const RenderMobileNavLink = ({ navLink, clickFunc }: RenderMobileNavLinkProps) => {
+  const children: NavItemChild[] = navLink?.children || []
+
+  if (children?.length > 0) {
+    return (
+      <div key={navLink.title} className="px-12 py-4">
+        <h3 className="border-b border-gray-500 text-2xl font-bold tracking-widest text-gray-700 dark:border-gray-400 dark:text-gray-300">
+          {navLink.title}
+        </h3>
+        <div className="ml-6 flex flex-col items-start">
+          {children.map((cLink) => (
+            <Link
+              key={cLink.title}
+              href={cLink.href}
+              className="mt-4 text-2xl font-bold tracking-widest text-gray-900 hover:text-primary-500 dark:text-gray-100  dark:hover:text-primary-400"
+              onClick={clickFunc}
+            >
+              {cLink.title}
+            </Link>
+          ))}
+        </div>
+      </div>
+    )
+  } else {
+    return (
+      <div key={navLink.title} className="px-12 py-4">
+        <Link
+          href={navLink.href}
+          className="text-2xl font-bold tracking-widest text-gray-900 hover:text-primary-500 dark:text-gray-100  dark:hover:text-primary-400"
+          onClick={clickFunc}
+        >
+          {navLink.title}
+        </Link>
+      </div>
+    )
+  }
+}

From b4b89b5168229ea8ab446c548f7ed9c580163a93 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:47:56 -0700
Subject: [PATCH 15/20] feat: Import types form headerNavLinks

---
 components/MobileNav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index 03586388d..b494a3202 100644
--- a/components/MobileNav.tsx
+++ b/components/MobileNav.tsx
@@ -3,7 +3,7 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { Fragment, useState } from 'react'
 import Link from './Link'
-import headerNavLinks from '@/data/headerNavLinks'
+import headerNavLinks, { NavItem, NavItemChild } from '@/data/headerNavLinks'
 
 const MobileNav = () => {
   const [navShow, setNavShow] = useState(false)

From b301981712f5f522abb13ccc3bdd7289de45e304 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:48:24 -0700
Subject: [PATCH 16/20] feat: Render links with heperFunc

---
 components/MobileNav.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index b494a3202..84a988820 100644
--- a/components/MobileNav.tsx
+++ b/components/MobileNav.tsx
@@ -64,17 +64,15 @@ const MobileNav = () => {
               >
                 <Dialog.Panel className="fixed left-0 top-0 z-10 h-full w-full bg-white opacity-95 duration-300 dark:bg-gray-950 dark:opacity-[0.98]">
                   <nav className="fixed mt-8 h-full text-left">
-                    {headerNavLinks.map((link) => (
-                      <div key={link.title} className="px-12 py-4">
-                        <Link
-                          href={link.href}
-                          className="text-2xl font-bold tracking-widest text-gray-900 dark:text-gray-100"
-                          onClick={onToggleNav}
-                        >
-                          {link.title}
-                        </Link>
-                      </div>
-                    ))}
+                    {headerNavLinks.map((link) => {
+                      return (
+                        <RenderMobileNavLink
+                          navLink={link}
+                          clickFunc={onToggleNav}
+                          key={link.title}
+                        />
+                      )
+                    })}
                   </nav>
 
                   <div className="flex justify-end">

From 959bc72f319b05d98046b755540b7211e2127da6 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 01:48:44 -0700
Subject: [PATCH 17/20] fix: Force href to be '' if no href is supplied in Link

---
 components/MobileNav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index 84a988820..1142e5702 100644
--- a/components/MobileNav.tsx
+++ b/components/MobileNav.tsx
@@ -139,7 +139,7 @@ const RenderMobileNavLink = ({ navLink, clickFunc }: RenderMobileNavLinkProps) =
     return (
       <div key={navLink.title} className="px-12 py-4">
         <Link
-          href={navLink.href}
+          href={navLink.href ?? ''}
           className="text-2xl font-bold tracking-widest text-gray-900 hover:text-primary-500 dark:text-gray-100  dark:hover:text-primary-400"
           onClick={clickFunc}
         >

From fd6f4a0b62dd90cc114f8a64e97ceff7769da10c Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sat, 22 Jun 2024 02:08:47 -0700
Subject: [PATCH 18/20] feat: Update NavLinks types

---
 data/headerNavLinks.ts | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/data/headerNavLinks.ts b/data/headerNavLinks.ts
index 71425dd8c..6a3ecd223 100644
--- a/data/headerNavLinks.ts
+++ b/data/headerNavLinks.ts
@@ -13,10 +13,18 @@ const headerNavLinks = [
   },
 ]
 
-export interface NavItem {
-  href?: string
+type NavItemBase = {
   title: string
-  children?: NavItemChild[]
+}
+
+type NavItemWithHref = NavItemBase & {
+  href: string
+  children?: never
+}
+
+type NavItemWithChildren = NavItemBase & {
+  children: NavItemChild[]
+  href?: never
 }
 
 export interface NavItemChild {
@@ -24,4 +32,6 @@ export interface NavItemChild {
   title: string
 }
 
+export type NavItem = NavItemWithHref | NavItemWithChildren
+
 export default headerNavLinks

From 0789274dd9db09e97ed2e0c9e9632a36132b7dfc Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sun, 23 Jun 2024 04:23:27 -0700
Subject: [PATCH 19/20] feat: Move NavLink type to NavOptions

---
 components/MobileNav.tsx  |  3 ++-
 components/NavOptions.tsx | 23 ++++++++++++++++++++++-
 data/headerNavLinks.ts    | 21 ---------------------
 3 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index ca940412a..f992e29ef 100644
--- a/components/MobileNav.tsx
+++ b/components/MobileNav.tsx
@@ -3,7 +3,8 @@
 import { Dialog, Transition } from '@headlessui/react'
 import { Fragment, useState } from 'react'
 import Link from './Link'
-import headerNavLinks, { NavItem, NavItemChild } from '@/data/headerNavLinks'
+import headerNavLinks from '@/data/headerNavLinks'
+import { NavItem, NavItemChild } from '@/components/NavOptions'
 
 const MobileNav = () => {
   const [navShow, setNavShow] = useState(false)
diff --git a/components/NavOptions.tsx b/components/NavOptions.tsx
index 390db704e..ca6a6979e 100644
--- a/components/NavOptions.tsx
+++ b/components/NavOptions.tsx
@@ -3,9 +3,30 @@
 import { Fragment, useEffect, useState } from 'react'
 import { useTheme } from 'next-themes'
 import { Menu, RadioGroup, Transition } from '@headlessui/react'
-import headerNavLinks, { NavItem, NavItemChild } from '@/data/headerNavLinks'
+import headerNavLinks from '@/data/headerNavLinks'
 import Link from 'next/link'
 
+type NavItemBase = {
+  title: string
+}
+
+type NavItemWithHref = NavItemBase & {
+  href: string
+  children?: never
+}
+
+type NavItemWithChildren = NavItemBase & {
+  children: NavItemChild[]
+  href?: never
+}
+
+export type NavItemChild = {
+  href: string
+  title: string
+}
+
+export type NavItem = NavItemWithHref | NavItemWithChildren
+
 export const NavOptions = () => {
   return (
     <>
diff --git a/data/headerNavLinks.ts b/data/headerNavLinks.ts
index 6a3ecd223..1641e1606 100644
--- a/data/headerNavLinks.ts
+++ b/data/headerNavLinks.ts
@@ -13,25 +13,4 @@ const headerNavLinks = [
   },
 ]
 
-type NavItemBase = {
-  title: string
-}
-
-type NavItemWithHref = NavItemBase & {
-  href: string
-  children?: never
-}
-
-type NavItemWithChildren = NavItemBase & {
-  children: NavItemChild[]
-  href?: never
-}
-
-export interface NavItemChild {
-  href: string
-  title: string
-}
-
-export type NavItem = NavItemWithHref | NavItemWithChildren
-
 export default headerNavLinks

From 792067c8d3c2ab76a83b29d12f1f76b7843414e6 Mon Sep 17 00:00:00 2001
From: Trillium Smith <spiteless@gmail.com>
Date: Sun, 23 Jun 2024 04:24:12 -0700
Subject: [PATCH 20/20] fix: Update RenderMobileNavLinkProps

---
 components/MobileNav.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index f992e29ef..73e122e01 100644
--- a/components/MobileNav.tsx
+++ b/components/MobileNav.tsx
@@ -107,7 +107,7 @@ const MobileNav = () => {
 
 export default MobileNav
 
-interface RenderMobileNavLinkProps extends NavItem {
+type RenderMobileNavLinkProps = {
   clickFunc: () => void
   navLink: NavItem
 }
@@ -122,7 +122,7 @@ const RenderMobileNavLink = ({ navLink, clickFunc }: RenderMobileNavLinkProps) =
           {navLink.title}
         </h3>
         <div className="ml-6 flex flex-col items-start">
-          {children.map((cLink) => (
+          {children.map((cLink: NavItemChild) => (
             <Link
               key={cLink.title}
               href={cLink.href}