shelving/ui/menu/MenuItem.js

Toolkit for using data in JavaScript.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { getLink, isArray, isURLProud } from "../../util/index.js";
import { Clickable } from "../form/Clickable.js";
import { requireMeta } from "../misc/MetaContext.js";
import { getModuleClass } from "../util/css.js";
import MENU_CSS from "./Menu.module.css";
/**
 * A `<li>` containing an `<a>` link, plus optional submenu content shown when this item is "proud".
 * - Reads the current page URL from `<Meta>` and computes `active` / `proud` against its own `href`.
 * - Splits `children` into `[label, ...after]`: label goes inside the `<a>`; `after` is rendered as siblings below it, only when proud.
 */
export function MenuItem({ href, children, ...props }) {
    const { url, root } = requireMeta();
    const link = getLink(href, url, root);
    const proud = isURLProud(url, link);
    const [label, ...after] = isArray(children) ? children : [children];
    return (_jsxs("li", { className: getModuleClass(MENU_CSS, "item", { proud }), children: [_jsx(Clickable, { href: href, ...props, className: getModuleClass(MENU_CSS, "link"), children: label }), proud && after] }));
}