Spaces:
Sleeping
Sleeping
| import { useEffect, useId, useRef, useState } from 'react' | |
| import { Link } from 'react-router-dom' | |
| export type HeaderNavItem = { | |
| to: string | |
| label: string | |
| } | |
| type Props = { | |
| label: string | |
| active: boolean | |
| items: HeaderNavItem[] | |
| /** When set with onPinnedChange, pin state is controlled by the parent. */ | |
| pinnedOpen: boolean | |
| onPinnedChange: (pinned: boolean) => void | |
| } | |
| /** | |
| * Header topic menu: hover opens transiently; click pins until click again, | |
| * menu item navigation, Escape, or outside click. | |
| */ | |
| export function HeaderNavDropdown({ | |
| label, | |
| active, | |
| items, | |
| pinnedOpen, | |
| onPinnedChange, | |
| }: Props) { | |
| const menuId = useId() | |
| const ref = useRef<HTMLDivElement>(null) | |
| const onPinnedChangeRef = useRef(onPinnedChange) | |
| const [hoverOpen, setHoverOpen] = useState(false) | |
| const open = pinnedOpen || hoverOpen | |
| useEffect(() => { | |
| onPinnedChangeRef.current = onPinnedChange | |
| }, [onPinnedChange]) | |
| useEffect(() => { | |
| if (!open) return | |
| function onPointerDown(e: MouseEvent) { | |
| if (ref.current && !ref.current.contains(e.target as Node)) { | |
| onPinnedChangeRef.current(false) | |
| setHoverOpen(false) | |
| } | |
| } | |
| function onKeyDown(e: KeyboardEvent) { | |
| if (e.key === 'Escape') { | |
| onPinnedChangeRef.current(false) | |
| setHoverOpen(false) | |
| } | |
| } | |
| document.addEventListener('mousedown', onPointerDown) | |
| document.addEventListener('keydown', onKeyDown) | |
| return () => { | |
| document.removeEventListener('mousedown', onPointerDown) | |
| document.removeEventListener('keydown', onKeyDown) | |
| } | |
| }, [open]) | |
| const closeAll = () => { | |
| onPinnedChange(false) | |
| setHoverOpen(false) | |
| } | |
| const triggerClass = `header-nav-link header-nav-trigger${ | |
| active ? ' header-nav-link--current' : '' | |
| }${open ? ' header-nav-trigger--open' : ''}` | |
| return ( | |
| <div | |
| className="header-nav-dropdown" | |
| ref={ref} | |
| onMouseEnter={() => setHoverOpen(true)} | |
| onMouseLeave={() => { | |
| if (!pinnedOpen) setHoverOpen(false) | |
| }} | |
| > | |
| <button | |
| type="button" | |
| className={triggerClass} | |
| aria-expanded={open} | |
| aria-haspopup="menu" | |
| aria-controls={menuId} | |
| onClick={() => { | |
| const next = !pinnedOpen | |
| onPinnedChange(next) | |
| setHoverOpen(next) | |
| }} | |
| > | |
| <span>{label}</span> | |
| <span className="header-nav-caret" aria-hidden> | |
| ▾ | |
| </span> | |
| </button> | |
| {open && ( | |
| <div className="header-nav-menu" role="menu" id={menuId}> | |
| {items.map((item) => ( | |
| <Link | |
| key={item.to} | |
| to={item.to} | |
| role="menuitem" | |
| className="header-nav-menu-item" | |
| onClick={closeAll} | |
| > | |
| {item.label} | |
| </Link> | |
| ))} | |
| </div> | |
| )} | |
| </div> | |
| ) | |
| } | |