jblu/jonbio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upstream #1

Merged
jblu merged 1007 commits from upstream into main 2024-11-04 22:35:57 -06:00
Conversation 0 Commits 1007 Files Changed 24 +67 -38
1 changed files with 67 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d81f28ba3a - Show all commits

105
components/MobileNav.tsx
View File

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