@alauda/doom
Version:
Doctor Doom making docs.
68 lines (67 loc) • 4.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Tag } from '@rspress/core/theme';
import { isExternalUrl, } from '@rspress/shared';
import { useRef, useState } from 'react';
import { matchNavbar } from '../../shared/index.js';
import { Down } from './Down.js';
import { NavMenuSingleItem, } from './NavMenuSingleItem.js';
import { SvgWrapper } from './SvgWrapper.js';
function ActiveGroupItem({ item }) {
return (_jsxs("div", { className: "rp-rounded-2xl rp-my-1 rp-flex", style: {
padding: '0.4rem 1.5rem 0.4rem 0.75rem',
}, children: [item.tag && _jsx(Tag, { tag: item.tag }), _jsx("span", { className: "rp-text-brand", children: item.text })] }, item.link));
}
function NormalGroupItem({ item }) {
return (_jsx("div", { className: "rp-font-medium rp-my-1", children: _jsx("a", { href: item.link, target: isExternalUrl(item.link) ? '_blank' : undefined, rel: "noopener noreferrer", children: _jsx("div", { className: "rp-rounded-2xl hover:rp-bg-mute", style: {
padding: '0.4rem 1.5rem 0.4rem 0.75rem',
}, children: _jsxs("div", { className: "rp-flex", children: [item.tag && _jsx(Tag, { tag: item.tag }), _jsx("span", { children: item.text })] }) }) }) }, item.link));
}
export function NavMenuGroup(item) {
const { activeValue, items: groupItems, base = '', link = '', pathname = '', } = item;
const [isOpen, setIsOpen] = useState(false);
const closeTimerRef = useRef(null);
const clearCloseTimer = () => {
if (closeTimerRef.current) {
clearTimeout(closeTimerRef.current);
closeTimerRef.current = null;
}
};
/**
* Handle mouse leave event for the dropdown menu
* Closes the menu after a 150ms delay to allow diagonal mouse movement
* to the dropdown content area
*/
const handleMouseLeave = () => {
closeTimerRef.current = window.setTimeout(() => {
setIsOpen(false);
}, 150);
};
const handleMouseEnter = () => {
clearCloseTimer();
setIsOpen(true);
};
const renderLinkItem = (item) => {
const isLinkActive = matchNavbar(item, pathname, base);
if (activeValue === item.text || (!activeValue && isLinkActive)) {
return _jsx(ActiveGroupItem, { item: item }, item.link);
}
return _jsx(NormalGroupItem, { item: item }, item.link);
};
const renderGroup = (item) => {
return (_jsxs("div", { children: ['link' in item ? (renderLinkItem(item)) : (_jsx("p", { className: "rp-font-bold rp-text-gray-400 rp-my-1 not:first:rp-border", children: item.text })), item.items.map(renderLinkItem)] }));
};
return (_jsxs("div", { className: "rp-relative rp-flex rp-items-center rp-justify-center rp-h-14", onMouseLeave: handleMouseLeave, children: [_jsx("div", { onMouseEnter: handleMouseEnter, className: "rspress-nav-menu-group-button rp-flex rp-justify-center rp-items-center rp-font-medium rp-text-sm rp-text-text-1 hover:rp-text-text-2 rp-transition-colors rp-duration-200 rp-cursor-pointer", children: link ? (_jsx(NavMenuSingleItem, { ...item, rightIcon: _jsx(SvgWrapper, { icon: Down }) })) : (_jsxs(_Fragment, { children: [_jsxs("span", { className: "rp-text-sm rp-font-medium rp-flex", style: {
marginRight: '2px',
}, children: [_jsx(Tag, { tag: item.tag }), item.text] }), _jsx(SvgWrapper, { icon: Down })] })) }), _jsx("div", { className: "rspress-nav-menu-group-content rp-absolute rp-mx-0.8 rp-transition-opacity rp-duration-300", style: {
opacity: isOpen ? 1 : 0,
visibility: isOpen ? 'visible' : 'hidden',
right: 0,
top: '52px',
}, onMouseEnter: clearCloseTimer, children: _jsx("div", { className: "rp-p-3 rp-pr-2 rp-w-full rp-h-full rp-max-h-100vh rp-whitespace-nowrap", style: {
boxShadow: 'var(--rp-shadow-3)',
zIndex: 100,
border: '1px solid var(--rp-c-divider-light)',
borderRadius: 'var(--rp-radius-large)',
background: 'var(--rp-c-bg)',
}, children: groupItems.map((item) => (_jsx("div", { children: 'items' in item ? renderGroup(item) : renderLinkItem(item) }, item.text))) }) })] }));
}