Continue Create Dropdown Options

components/Header.tsx

@@ -1,10 +1,10 @@
 import siteMetadata from '@/data/siteMetadata'
-import headerNavLinks from '@/data/headerNavLinks'
 import Logo from '@/data/logo.svg'
 import Link from './Link'
 import MobileNav from './MobileNav'
 import ThemeSwitch from './ThemeSwitch'
 import SearchButton from './SearchButton'
+import { NavOptions } from './NavOptions'
 
 const Header = () => {
   return (
@@ -26,18 +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 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400
-              sm:block"
-            >
-              {link.title}
-            </Link>
-          ))}
+        <NavOptions />
         <SearchButton />
         <ThemeSwitch />
         <MobileNav />

components/MobileNav.tsx

@@ -4,6 +4,7 @@ import { Dialog, Transition } from '@headlessui/react'
 import { Fragment, useState } from 'react'
 import Link from './Link'
 import headerNavLinks from '@/data/headerNavLinks'
+import { NavItem, NavItemChild } from '@/components/NavOptions'
 
 const MobileNav = () => {
   const [navShow, setNavShow] = useState(false)
@@ -63,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 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
-                          onClick={onToggleNav}
-                        >
-                          {link.title}
-                        </Link>
-                      </div>
-                    ))}
+                    {headerNavLinks.map((link) => {
+                      return (
+                        <RenderMobileNavLink
+                          navLink={link}
+                          clickFunc={onToggleNav}
+                          key={link.title}
+                        />
+                      )
+                    })}
                   </nav>
 
                   <div className="flex justify-end">
@@ -107,3 +106,46 @@ const MobileNav = () => {
 }
 
 export default MobileNav
+
+type RenderMobileNavLinkProps = {
+  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: NavItemChild) => (
+            <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>
+    )
+  }
+}

components/NavOptions.tsx

@@ -0,0 +1,100 @@
+'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'
+
+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 (
+    <>
+      {headerNavLinks
+        .filter((link) => link.href !== '/')
+        .map((link) => (
+          <RenderNavLink navItem={link} key={link.title} />
+        ))}
+    </>
+  )
+}
+
+const RenderNavLink = ({ navItem }: { navItem: NavItem }) => {
+  if (!navItem.children) {
+    return (
+      <Link
+        key={navItem.title}
+        href={navItem.href}
+        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>
+    )
+  }
+  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 hover:text-primary-500 dark:text-gray-100  dark:hover:text-primary-400 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: NavItemChild) => (
+                  <Menu.Item key={link.title}>
+                    {({ 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>
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </div>
+  )
+}

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