From a0b00485bc09ccca85a8059b639928cbeb0e81fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pr=C3=A3t!k=20K=C3=A0b=C3=A1d=C3=A9?=
 <pratikkabade@hotmail.com>
Date: Thu, 18 Apr 2024 04:01:20 +0000
Subject: [PATCH 1/2] #867 Created Dropdown Options

---
 app/tag-data.json         | 21 +----------------
 components/Header.tsx     |  2 ++
 components/MobileNav.tsx  | 19 ++++++++++++----
 components/NavOptions.tsx | 47 +++++++++++++++++++++++++++++++++++++++
 data/headerNavLinks.ts    |  8 +++++++
 5 files changed, 73 insertions(+), 24 deletions(-)
 create mode 100644 components/NavOptions.tsx

diff --git a/app/tag-data.json b/app/tag-data.json
index 7bacbaf8c4..bbe15acaae 100644
--- a/app/tag-data.json
+++ b/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,"hello":1,"holiday":1,"canada":1,"images":1,"feature":2,"writings":1,"book":1,"reflection":1,"multi-author":1}
\ No newline at end of file
diff --git a/components/Header.tsx b/components/Header.tsx
index 362b7cdd9d..4e703425ca 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 (
@@ -37,6 +38,7 @@ const Header = () => {
               {link.title}
             </Link>
           ))}
+          <NavOptions/>
         <SearchButton />
         <ThemeSwitch />
         <MobileNav />
diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index b777b822c6..16f37c33b3 100644
--- a/components/MobileNav.tsx
+++ b/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)
@@ -36,9 +36,8 @@ const MobileNav = () => {
         </svg>
       </button>
       <div
-        className={`fixed left-0 top-0 z-10 h-full w-full transform bg-white opacity-95 duration-300 ease-in-out dark:bg-gray-950 dark:opacity-[0.98] ${
-          navShow ? 'translate-x-0' : 'translate-x-full'
-        }`}
+        className={`fixed left-0 top-0 z-10 h-full w-full transform bg-white opacity-95 duration-300 ease-in-out dark:bg-gray-950 dark:opacity-[0.98] ${navShow ? 'translate-x-0' : 'translate-x-full'
+          }`}
       >
         <div className="flex justify-end">
           <button className="mr-8 mt-11 h-8 w-8" aria-label="Toggle Menu" onClick={onToggleNav}>
@@ -68,6 +67,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>
     </>
diff --git a/components/NavOptions.tsx b/components/NavOptions.tsx
new file mode 100644
index 0000000000..c79cfe236a
--- /dev/null
+++ b/components/NavOptions.tsx
@@ -0,0 +1,47 @@
+'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>
+                  <Link
+                    key={link.title}
+                    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>
+  )
+}
\ No newline at end of file
diff --git a/data/headerNavLinks.ts b/data/headerNavLinks.ts
index 8ca9493dbb..7005935f75 100644
--- a/data/headerNavLinks.ts
+++ b/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

From c6e2fb1f3b80a393adeb4610e9516b6050e12203 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pr=C3=A3t!k=20K=C3=A0b=C3=A1d=C3=A9?=
 <pratikkabade@hotmail.com>
Date: Mon, 22 Apr 2024 07:24:51 +0000
Subject: [PATCH 2/2] prettier `fix`

---
 app/tag-data.json         |  2 +-
 components/Header.tsx     |  2 +-
 components/MobileNav.tsx  |  9 +++++----
 components/NavOptions.tsx | 23 ++++++++++++-----------
 4 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/app/tag-data.json b/app/tag-data.json
index bbe15acaae..e35862a4fd 100644
--- a/app/tag-data.json
+++ b/app/tag-data.json
@@ -1 +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}
\ No newline at end of file
+{"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}
\ No newline at end of file
diff --git a/components/Header.tsx b/components/Header.tsx
index 4e703425ca..a8db0a39d2 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -38,7 +38,7 @@ const Header = () => {
               {link.title}
             </Link>
           ))}
-          <NavOptions/>
+        <NavOptions />
         <SearchButton />
         <ThemeSwitch />
         <MobileNav />
diff --git a/components/MobileNav.tsx b/components/MobileNav.tsx
index 16f37c33b3..0fbec479da 100644
--- a/components/MobileNav.tsx
+++ b/components/MobileNav.tsx
@@ -36,8 +36,9 @@ const MobileNav = () => {
         </svg>
       </button>
       <div
-        className={`fixed left-0 top-0 z-10 h-full w-full transform bg-white opacity-95 duration-300 ease-in-out dark:bg-gray-950 dark:opacity-[0.98] ${navShow ? 'translate-x-0' : 'translate-x-full'
-          }`}
+        className={`fixed left-0 top-0 z-10 h-full w-full transform bg-white opacity-95 duration-300 ease-in-out dark:bg-gray-950 dark:opacity-[0.98] ${
+          navShow ? 'translate-x-0' : 'translate-x-full'
+        }`}
       >
         <div className="flex justify-end">
           <button className="mr-8 mt-11 h-8 w-8" aria-label="Toggle Menu" onClick={onToggleNav}>
@@ -67,7 +68,7 @@ const MobileNav = () => {
               </Link>
             </div>
           ))}
-          {headerNavOptions.children && (
+          {headerNavOptions.children &&
             headerNavOptions.children.map((link) => (
               <div key={link.title} className="px-12 py-4">
                 <Link
@@ -78,7 +79,7 @@ const MobileNav = () => {
                   {link.title}
                 </Link>
               </div>
-            )))}
+            ))}
         </nav>
       </div>
     </>
diff --git a/components/NavOptions.tsx b/components/NavOptions.tsx
index c79cfe236a..8e390bfe97 100644
--- a/components/NavOptions.tsx
+++ b/components/NavOptions.tsx
@@ -28,20 +28,21 @@ export const NavOptions = () => {
         >
           <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>
-                  <Link
-                    key={link.title}
-                    href={link.href}
-                    className="group flex w-full items-center rounded-md px-2 py-2 text-sm">
-                    {link.title}
-                  </Link>
-                </Menu.Item>
-              ))}
+              {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>
   )
-}
\ No newline at end of file
+}