a954575397
* [#858,site][xl]: add Examples to the Navbar, rename gallery to showcases, remove examples from showcases, move github stars to the navbar, add view on github button to the hero section, reduce padding on buttons, add RHS image to the hero * [#858,site][xl]: make sidebar consistent on all pages * [site][xs]: fix ts error on GitHub button component * [site][xs]: fix external links on navbar needing two clicks to open * [site, hero][xs]: align RHS image to the top
78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import { Menu, Transition } from '@headlessui/react';
|
|
import Link from 'next/link';
|
|
import { Fragment, useRef, useState } from 'react';
|
|
|
|
import BaseLink from './BaseLink';
|
|
|
|
export default function NavItem({ item }) {
|
|
const dropdownRef = useRef(null);
|
|
const [showDropdown, setshowDropdown] = useState(false);
|
|
|
|
const timeoutDuration = 200;
|
|
let timeoutId;
|
|
|
|
const openDropdown = () => {
|
|
clearTimeout(timeoutId);
|
|
setshowDropdown(true);
|
|
};
|
|
const closeDropdown = () => {
|
|
timeoutId = setTimeout(() => setshowDropdown(false), timeoutDuration);
|
|
};
|
|
|
|
return (
|
|
<Menu as="div" className="relative">
|
|
<Menu.Item>
|
|
{Object.prototype.hasOwnProperty.call(item, 'href') ? (
|
|
<Link
|
|
href={item.href}
|
|
onMouseEnter={openDropdown}
|
|
onMouseLeave={closeDropdown}
|
|
target={item.target || '_self'}
|
|
onClick={() => setshowDropdown(!showDropdown)}
|
|
className="text-slate-600 dark:text-slate-400 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-500"
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
) : (
|
|
<div className="text-slate-600 dark:text-slate-400 inline-flex items-center mr-2 px-1 pt-1 text-sm font-medium hover:text-slate-500 fill-slate-500 hover:fill-slate-600">
|
|
{item.name}
|
|
</div>
|
|
)}
|
|
</Menu.Item>
|
|
|
|
{Object.prototype.hasOwnProperty.call(item, 'subItems') && (
|
|
<Transition
|
|
as={Fragment}
|
|
show={showDropdown}
|
|
enter="transition ease-out duration-200"
|
|
enterFrom="transform opacity-0 scale-5"
|
|
enterTo="transform opacity-100 scale-100"
|
|
leave="transition ease-in duration-75"
|
|
leaveFrom="transform opacity-100 scale-100"
|
|
leaveTo="transform opacity-0 scale-5"
|
|
>
|
|
<Menu.Items
|
|
className="absolute top-5 flex flex-col dark:bg-slate-900/95 backdrop-blur"
|
|
ref={dropdownRef}
|
|
onMouseEnter={openDropdown}
|
|
onMouseLeave={closeDropdown}
|
|
>
|
|
{item.subItems.map((subItem) => (
|
|
<Menu.Item key={subItem.name}>
|
|
<BaseLink
|
|
href={subItem.href}
|
|
target={item.target || '_self'}
|
|
className="text-slate-500 inline-flex items-center mt-2 px-1 pt-1 text-sm font-medium hover:text-slate-600"
|
|
onClick={() => setshowDropdown(false)}
|
|
>
|
|
{subItem.name}
|
|
</BaseLink>
|
|
</Menu.Item>
|
|
))}
|
|
</Menu.Items>
|
|
</Transition>
|
|
)}
|
|
</Menu>
|
|
);
|
|
}
|