function DropdownNavbarItemDesktop()

in src/theme/NavbarItem/DropdownNavbarItem/index.tsx [28:86]
52 lines of code
6 McCabe index (conditional complexity)

function DropdownNavbarItemDesktop({ items, position, className, onClick, ...props }: DesktopOrMobileNavBarItemProps) {
    const dropdownRef = useRef<HTMLDivElement>(null);
    const [showDropdown, setShowDropdown] = useState(false);

    useEffect(() => {
        const handleClickOutside = (event: MouseEvent | TouchEvent | FocusEvent) => {
            if (!dropdownRef.current || dropdownRef.current.contains(event.target as Node)) {
                return;
            }
            setShowDropdown(false);
        };

        document.addEventListener('mousedown', handleClickOutside);
        document.addEventListener('touchstart', handleClickOutside);
        document.addEventListener('focusin', handleClickOutside);

        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
            document.removeEventListener('touchstart', handleClickOutside);
            document.removeEventListener('focusin', handleClickOutside);
        };
    }, [dropdownRef]);

    return (
        <div
            ref={dropdownRef}
            className={clsx('navbar__item', 'dropdown', 'dropdown--hoverable', {
                'dropdown--right': position === 'right',
                'dropdown--show': showDropdown,
            })}
        >
            <NavbarNavLink
                aria-haspopup="true"
                aria-expanded={showDropdown}
                role="button"
                // # hash permits to make the <a> tag focusable in case no link target
                // See https://github.com/facebook/docusaurus/pull/6003
                // There's probably a better solution though...
                href={props.to ? undefined : '#'}
                className={clsx('navbar__link', className)}
                {...props}
                onClick={props.to ? undefined : e => e.preventDefault()}
                onKeyDown={e => {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        setShowDropdown(!showDropdown);
                    }
                }}
            >
                {props.children ?? props.label}
            </NavbarNavLink>
            <ul className="dropdown__menu">
                {items.map((childItemProps, i) => (
                    <NavbarItem isDropdownItem activeClassName="dropdown__link--active" {...childItemProps} key={i} />
                ))}
            </ul>
        </div>
    );
}