First iteration of blog

2024-10-14 00:18:50 -05:00
parent 336b7b579a
commit 081f5b1f67
112 changed files with 18927 additions and 124 deletions
@@ -0,0 +1,108 @@
+'use client'
+
+import { Dialog, Transition } from '@headlessui/react'
+import { disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
+import { Fragment, useState, useEffect, useRef } from 'react'
+import Link from './Link'
+import headerNavLinks from '@/data/headerNavLinks'
+
+const MobileNav = () => {
+  const [navShow, setNavShow] = useState(false)
+  const navRef = useRef(null)
+
+  const onToggleNav = () => {
+    setNavShow((status) => {
+      if (status) {
+        enableBodyScroll(navRef.current)
+      } else {
+        // Prevent scrolling
+        disableBodyScroll(navRef.current)
+      }
+      return !status
+    })
+  }
+
+  useEffect(() => {
+    return clearAllBodyScrollLocks
+  })
+
+  return (
+    <>
+      <button aria-label="Toggle Menu" onClick={onToggleNav} className="sm:hidden">
+        <svg
+          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 dark:hover:text-primary-400"
+        >
+          <path
+            fillRule="evenodd"
+            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+            clipRule="evenodd"
+          />
+        </svg>
+      </button>
+      <Transition appear show={navShow} as={Fragment} unmount={false}>
+        <Dialog as="div" onClose={onToggleNav} unmount={false}>
+          <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"
+            unmount={false}
+          >
+            <div className="fixed inset-0 z-60 bg-black/25" />
+          </Transition.Child>
+
+          <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"
+            unmount={false}
+          >
+            <Dialog.Panel className="fixed left-0 top-0 z-70 h-full w-full bg-white opacity-95 duration-300 dark:bg-gray-950 dark:opacity-[0.98]">
+              <nav
+                ref={navRef}
+                className="mt-8 flex h-full basis-0 flex-col items-start overflow-y-auto pl-12 pt-2 text-left"
+              >
+                {headerNavLinks.map((link) => (
+                  <Link
+                    key={link.title}
+                    href={link.href}
+                    className="mb-4 py-2 pr-4 text-2xl font-bold tracking-widest text-gray-900 outline outline-0 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
+                    onClick={onToggleNav}
+                  >
+                    {link.title}
+                  </Link>
+                ))}
+              </nav>
+
+              <button
+                className="fixed right-4 top-7 z-80 h-16 w-16 p-4 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
+                aria-label="Toggle Menu"
+                onClick={onToggleNav}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                  <path
+                    fillRule="evenodd"
+                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </button>
+            </Dialog.Panel>
+          </Transition.Child>
+        </Dialog>
+      </Transition>
+    </>
+  )
+}
+
+export default MobileNav