components/MobileNav.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useState } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import { Fragment, useState } from 'react'
 import Link from './Link'
 import headerNavLinks from '@/data/headerNavLinks'
 
@@ -26,8 +27,7 @@ const MobileNav = () => {
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
           fill="currentColor"
-          className="h-8 w-8 text-gray-900 hover:text-primary-500 dark:text-gray-100
+          className="h-8 w-8 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
-          dark:hover:text-primary-400"
         >
           <path
             fillRule="evenodd"
@@ -36,19 +36,57 @@ const MobileNav = () => {
           />
         </svg>
       </button>
-      <div
+      <Transition appear show={navShow} as={Fragment}>
-        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] ${
+        <Dialog as="div" className="relative z-10" onClose={onToggleNav}>
-          navShow ? 'translate-x-0' : 'translate-x-full'
+          <Transition.Child
-        }`}
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
           >
+            <div className="fixed inset-0 bg-black/25" />
+          </Transition.Child>
+
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="transition ease-in-out duration-300 transform"
+                enterFrom="translate-x-full opacity-0"
+                enterTo="translate-x-0 opacity-95"
+                leave="transition ease-in duration-200 transform"
+                leaveFrom="translate-x-0 opacity-95"
+                leaveTo="translate-x-full opacity-0"
+              >
+                <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>
+                    ))}
+                  </nav>
+
                   <div className="flex justify-end">
-          <button className="mr-8 mt-11 h-8 w-8" aria-label="Toggle Menu" onClick={onToggleNav}>
+                    <button
+                      className="mr-8 mt-11 h-8 w-8"
+                      aria-label="Toggle Menu"
+                      onClick={onToggleNav}
+                    >
                       <svg
                         xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 20 20"
                         fill="currentColor"
-              className="text-gray-900 hover:text-primary-500 dark:text-gray-100
+                        className="text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
-              dark:hover:text-primary-400"
                       >
                         <path
                           fillRule="evenodd"
@@ -58,21 +96,12 @@ const MobileNav = () => {
                       </svg>
                     </button>
                   </div>
-        <nav className="fixed mt-8 h-full">
+                </Dialog.Panel>
-          {headerNavLinks.map((link) => (
+              </Transition.Child>
-            <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>
-          ))}
-        </nav>
           </div>
+        </Dialog>
+      </Transition>
     </>
   )
 }