therealgilles
commented
3 years ago I ended up adapting the dropdown code externally to add: • open on hover or click on menu button • menu button can be a link (will be followed on 2nd click as first one opens or closes dropdown) • close on moving away from button / dropdown • close on click outside dropdown
PS: Styling is a work in progress. I could not find focus:shadow-outline-blue so used focus:ring-blue-300 for now.
const Dropdown = ({ name, url, subItems }) => {
const dropdownRef = useRef(null)
// NOTE: useDetectOutsideClick is not necessary with hover, useState(false) would do here
const [openDropdown, setOpenDropdown] = useDetectOutsideClick(dropdownRef, false)
const [mouseOverButton, setMouseOverButton] = useState(false)
const [mouseOverMenu, setMouseOverMenu] = useState(false)
const timeoutDuration = 200
let timeoutButton
let timeoutMenu
const onMouseEnterButton = () => {
clearTimeout(timeoutButton)
setOpenDropdown(true)
setMouseOverButton(true)
}
const onMouseLeaveButton = () => {
timeoutButton = setTimeout(() => setMouseOverButton(false), timeoutDuration)
}
const onMouseEnterMenu = () => {
clearTimeout(timeoutMenu)
setMouseOverMenu(true)
}
const onMouseLeaveMenu = () => {
timeoutMenu = setTimeout(() => setMouseOverMenu(false), timeoutDuration)
}
const show = openDropdown && (mouseOverMenu || mouseOverButton)
return (
<Menu>
{({ open }) => (
<>
<div
css={tw`rounded-md shadow-sm`}
onClick={() => setOpenDropdown(!openDropdown)}
onMouseEnter={onMouseEnterButton}
onMouseLeave={onMouseLeaveButton}
onKeyPress={null}
role="button"
tabIndex="0"
>
<Menu.Button
css={[
tw`inline-flex justify-center w-full px-4 py-2 font-medium`,
tw`leading-5 text-gray-700 transition duration-150 ease-in-out bg-white`,
tw`border border-gray-300 rounded-md hover:text-gray-500`,
tw`focus:outline-none focus:border-blue-300 focus:ring-blue-300`,
tw`active:bg-gray-50 active:text-gray-800 cursor-pointer`,
]}
as="a"
href={url}
>
<span>{name}</span>
<svg css={tw`w-5 h-5 ml-2 -mr-1`} viewBox="0 0 20 20" fill="currentColor">
<path
fillRule="evenodd"
d={
`M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 ` +
`1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z`
}
clipRule="evenodd"
/>
</svg>
</Menu.Button>
</div>
<Transition
show={show}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items
ref={dropdownRef}
onMouseEnter={onMouseEnterMenu}
onMouseLeave={onMouseLeaveMenu}
static
css={[
tw`absolute right-0 w-56 mt-2 origin-top-right bg-white`,
tw`border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none`,
]}
>
<div css={tw`py-1`}>
{subItems.map(item => (
<Menu.Item key={item.key} onClick={() => setOpenDropdown(false)}>
{({ active }) => (
<a
href={item.url}
css={[
active ? tw`bg-gray-100 text-gray-900` : tw`text-gray-700`,
tw`flex justify-between w-full px-4 py-2 leading-5 text-left`,
]}
>
{item.name}
</a>
)}
</Menu.Item>
))}
</div>
</Menu.Items>
</Transition>
</>
)}
</Menu>
)
}Here is the code for useDetectOutsideClick. It may be better to use useOnClickOutside here.
const useDetectOutsideClick = (el, initialState) => {
const [isActive, setIsActive] = useState(initialState)
useEffect(() => {
const pageClickEvent = e => {
const elements = Array.isArray(el) ? el : [el]
let outside = true
// If the active element exists and is clicked outside of
elements.forEach(element => {
if (element.current !== null && element.current.contains(e.target)) {
outside = false
}
})
if (outside) setIsActive(false)
}
// If the item is active (ie open) then listen for clicks
if (isActive) {
window.addEventListener('click', pageClickEvent)
}
return () => {
window.removeEventListener('click', pageClickEvent)
}
}, [isActive, el])
return [isActive, setIsActive]
}PS: useDetectOutsideClick is not necessary with hover.
singleseeker
RobinMalfait
DoctorDerek
ScottJr
DopamineDriven
gn0rt0n
HerrSammyDE
garrettmaring
shadeemerhi
ahmadaldabouqii
benjamincanac
jrhart08
vladimirrostok
oliviercperrier
Eviwang
A fair number of websites use navigation menus that open on hover. One of the reasons is because the top menu item is sometimes also a link and clicking on it directs to a different page. Other site use hover so that visitors don't have to click to see the dropdown items.
I think it would be a great option to add.