Created Dropdown Options

app/tag-data.json

@@ -1,20 +1 @@
-{
- "markdown": 1,
- "code": 1,
- "features": 1,
- "next-js": 6,
- "math": 1,
- "ols": 1,
- "github": 1,
- "guide": 5,
- "tailwind": 3,
- "hello": 1,
- "holiday": 1,
- "canada": 1,
- "images": 1,
- "feature": 2,
- "writings": 1,
- "book": 1,
- "reflection": 1,
- "multi-author": 1
-}
+{"markdown":1,"code":1,"features":1,"next-js":6,"math":1,"ols":1,"github":1,"guide":5,"tailwind":3,"holiday":1,"canada":1,"images":1,"feature":2,"writings":1,"book":1,"reflection":1,"multi-author":1}

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 (
@@ -37,6 +38,7 @@ const Header = () => {
  {link.title}
  </Link>
  ))}
+ <NavOptions />
  <SearchButton />
  <ThemeSwitch />
  <MobileNav />

components/MobileNav.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 import Link from './Link'
-import headerNavLinks from '@/data/headerNavLinks'
+import headerNavLinks, { headerNavOptions } from '@/data/headerNavLinks'
 
 const MobileNav = () => {
  const [navShow, setNavShow] = useState(false)
@@ -68,6 +68,18 @@ const MobileNav = () => {
  </Link>
  </div>
  ))}
+ {headerNavOptions.children &&
+ headerNavOptions.children.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>
+ ))}
  </nav>
  </div>
  </>

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 { headerNavOptions } 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>
+ {headerNavOptions.title && (
+ <Menu.Button className={'hidden font-medium text-gray-900 dark:text-gray-100 sm:block'}>
+ {headerNavOptions.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">
+ {headerNavOptions.children &&
+ headerNavOptions.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>
+ )
+}

data/headerNavLinks.ts

@@ -6,4 +6,12 @@ const headerNavLinks = [
  { href: '/about', title: 'About' },
 ]
 
+export const headerNavOptions = { 
+ title: 'Dropdown', children: [
+ {href: '/projects', title: 'Projects',},
+ {href: '/about', title: 'About',},
+ ]
+}
+
+
 export default headerNavLinks