upstream #1
@ -7,42 +7,41 @@ import ThemeSwitch from './ThemeSwitch'
|
|||||||
import SearchButton from './SearchButton'
|
import SearchButton from './SearchButton'
|
||||||
|
|
||||||
const Header = () => {
|
const Header = () => {
|
||||||
let headerClass = 'flex items-center bg-white dark:bg-gray-950 justify-between py-10'
|
let headerClass = 'flex items-center w-full bg-white dark:bg-gray-950 justify-between py-10'
|
||||||
if (siteMetadata.stickyNav) {
|
if (siteMetadata.stickyNav) {
|
||||||
headerClass += ' sticky top-0'
|
headerClass += ' sticky top-0'
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className={headerClass}>
|
<header className={headerClass}>
|
||||||
<div>
|
<Link href="/" aria-label={siteMetadata.headerTitle}>
|
||||||
<Link href="/" aria-label={siteMetadata.headerTitle}>
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center justify-between">
|
<div className="mr-3">
|
||||||
<div className="mr-3">
|
<Logo />
|
||||||
<Logo />
|
|
||||||
</div>
|
|
||||||
{typeof siteMetadata.headerTitle === 'string' ? (
|
|
||||||
<div className="hidden h-6 text-2xl font-semibold sm:block">
|
|
||||||
{siteMetadata.headerTitle}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
siteMetadata.headerTitle
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
{typeof siteMetadata.headerTitle === 'string' ? (
|
||||||
</div>
|
<div className="hidden h-6 text-2xl font-semibold sm:block">
|
||||||
|
{siteMetadata.headerTitle}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
siteMetadata.headerTitle
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
<div className="flex items-center space-x-4 leading-5 sm:space-x-6">
|
<div className="flex items-center space-x-4 leading-5 sm:space-x-6">
|
||||||
{headerNavLinks
|
<div className="no-scrollbar hidden max-w-40 items-center space-x-4 overflow-x-auto sm:flex sm:space-x-6 md:max-w-72 lg:max-w-96">
|
||||||
.filter((link) => link.href !== '/')
|
{headerNavLinks
|
||||||
.map((link) => (
|
.filter((link) => link.href !== '/')
|
||||||
<Link
|
.map((link) => (
|
||||||
key={link.title}
|
<Link
|
||||||
href={link.href}
|
key={link.title}
|
||||||
className="hidden font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400
|
href={link.href}
|
||||||
sm:block"
|
className="block font-medium text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
|
||||||
>
|
>
|
||||||
{link.title}
|
{link.title}
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
|
</div>
|
||||||
<SearchButton />
|
<SearchButton />
|
||||||
<ThemeSwitch />
|
<ThemeSwitch />
|
||||||
<MobileNav />
|
<MobileNav />
|
||||||
|
|||||||
@ -42,8 +42,8 @@ const MobileNav = () => {
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
<Transition appear show={navShow} as={Fragment}>
|
<Transition appear show={navShow} as={Fragment} unmount={false}>
|
||||||
<Dialog as="div" ref={navRef} className="relative z-10" onClose={onToggleNav}>
|
<Dialog as="div" onClose={onToggleNav} unmount={false}>
|
||||||
<Transition.Child
|
<Transition.Child
|
||||||
as={Fragment}
|
as={Fragment}
|
||||||
enter="ease-out duration-300"
|
enter="ease-out duration-300"
|
||||||
@ -53,59 +53,51 @@ const MobileNav = () => {
|
|||||||
leaveFrom="opacity-100"
|
leaveFrom="opacity-100"
|
||||||
leaveTo="opacity-0"
|
leaveTo="opacity-0"
|
||||||
>
|
>
|
||||||
<div className="fixed inset-0 bg-black/25" />
|
<div className="z-5 fixed inset-0 bg-black/25" />
|
||||||
</Transition.Child>
|
</Transition.Child>
|
||||||
|
|
||||||
<div className="fixed inset-0 overflow-y-auto">
|
<Transition.Child
|
||||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
as={Fragment}
|
||||||
<Transition.Child
|
enter="transition ease-in-out duration-300 transform"
|
||||||
as={Fragment}
|
enterFrom="translate-x-full opacity-0"
|
||||||
enter="transition ease-in-out duration-300 transform"
|
enterTo="translate-x-0 opacity-95"
|
||||||
enterFrom="translate-x-full opacity-0"
|
leave="transition ease-in duration-200 transform"
|
||||||
enterTo="translate-x-0 opacity-95"
|
leaveFrom="translate-x-0 opacity-95"
|
||||||
leave="transition ease-in duration-200 transform"
|
leaveTo="translate-x-full opacity-0"
|
||||||
leaveFrom="translate-x-0 opacity-95"
|
unmount={false}
|
||||||
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
|
||||||
|
ref={navRef}
|
||||||
|
className="mt-8 flex h-full basis-0 flex-col items-start overflow-y-auto pl-12 pt-2 text-left"
|
||||||
>
|
>
|
||||||
<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]">
|
{headerNavLinks.map((link) => (
|
||||||
<nav className="fixed mt-8 h-full text-left">
|
<Link
|
||||||
{headerNavLinks.map((link) => (
|
key={link.title}
|
||||||
<div key={link.title} className="px-12 py-4">
|
href={link.href}
|
||||||
<Link
|
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"
|
||||||
href={link.href}
|
onClick={onToggleNav}
|
||||||
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>
|
||||||
{link.title}
|
))}
|
||||||
</Link>
|
</nav>
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<div className="flex justify-end">
|
<button
|
||||||
<button
|
className="fixed right-4 top-7 z-20 h-16 w-16 p-4 text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
|
||||||
className="mr-8 mt-11 h-8 w-8"
|
aria-label="Toggle Menu"
|
||||||
aria-label="Toggle Menu"
|
onClick={onToggleNav}
|
||||||
onClick={onToggleNav}
|
>
|
||||||
>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||||
<svg
|
<path
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
fillRule="evenodd"
|
||||||
viewBox="0 0 20 20"
|
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"
|
||||||
fill="currentColor"
|
clipRule="evenodd"
|
||||||
className="text-gray-900 hover:text-primary-500 dark:text-gray-100 dark:hover:text-primary-400"
|
/>
|
||||||
>
|
</svg>
|
||||||
<path
|
</button>
|
||||||
fillRule="evenodd"
|
</Dialog.Panel>
|
||||||
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"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</Dialog.Panel>
|
|
||||||
</Transition.Child>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
</Dialog>
|
||||||
</Transition>
|
</Transition>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@ -22,6 +22,15 @@
|
|||||||
@apply my-5;
|
@apply my-5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.no-scrollbar::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-scrollbar {
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
|
||||||
/* https://stackoverflow.com/questions/61083813/how-to-avoid-internal-autofill-selected-style-to-be-applied */
|
/* https://stackoverflow.com/questions/61083813/how-to-avoid-internal-autofill-selected-style-to-be-applied */
|
||||||
input:-webkit-autofill,
|
input:-webkit-autofill,
|
||||||
input:-webkit-autofill:focus {
|
input:-webkit-autofill:focus {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user