timlrx#867 Created Dropdown Options

pratikkabade · Apr 18, 2024 · a0b0048 · a0b0048
1 parent b2d0c6c
commit a0b0048
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 24 deletions.
diff --git 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}
diff --git 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
@@ -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
@@ -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>
+  )
+}
diff --git 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