components/MobileNav.tsx

@@ -36,12 +36,34 @@ 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] ${
+      <Transition appear show={navShow} as={Fragment}>
-          navShow ? 'translate-x-0' : 'hidden translate-x-full'
+        <Dialog as="div" className="relative z-10" onClose={onToggleNav}>
-        }`}
+          <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"
           >
-        <nav className="fixed mt-8 h-full">
+            <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
@@ -54,8 +76,13 @@ const MobileNav = () => {
                       </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"
@@ -70,7 +97,12 @@ const MobileNav = () => {
                       </svg>
                     </button>
                   </div>
+                </Dialog.Panel>
+              </Transition.Child>
             </div>
+          </div>
+        </Dialog>
+      </Transition>
     </>
   )
 }