import { useRef, useState } from 'react' import { Popover } from '@headlessui/react' import { DotsHorizontalIcon } from '@heroicons/react/solid' import Link from 'next/link' export default function NavDropMenu({ menuTitle = '', linksArray = [] }) { const buttonRef = useRef(null) const [openState, setOpenState] = useState(false) const toggleMenu = () => { setOpenState((openState) => !openState) buttonRef?.current?.click() } const onHover = (open, action) => { if ( (!open && !openState && action === 'onMouseEnter') || (open && openState && action === 'onMouseLeave') ) { toggleMenu() } } const handleClick = (open) => { setOpenState(!open) } return (
{({ open }) => (
onHover(open, 'onMouseEnter')} onMouseLeave={() => onHover(open, 'onMouseLeave')} className="flex flex-col" >
handleClick(open)} > {menuTitle}
{linksArray.map(([name, href, isExternal]) => !isExternal ? ( {name} ) : ( {name} ) )}
)}
) }