shelving/ui/tree/TreeSidebar.js

Toolkit for using data in JavaScript.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { filterElements } from "../../util/element.js";
import { Menu } from "../menu/Menu.js";
import { MenuItem } from "../menu/MenuItem.js";
import { matchMenuElement, TreeMenuMapper } from "./TreeMenu.js";
/**
 * Sidebar built from a tree element.
 * - Renders a single "home" `<MenuItem>` for the root element itself, then the root's children as a `<TreeMenuMapper>` underneath.
 * - The home link uses `path` as its href (defaulting to `/`). The children's hrefs are computed by appending their `name` to the root's path.
 * - To customise child renderers wrap in `<TreeMenuMapping mapping={…}>` (same context as `<TreeMenu>`).
 */
export function TreeSidebar({ tree, path = "/" }) {
    return (_jsxs(Menu, { children: [_jsx(MenuItem, { href: path, children: tree.props.title ?? tree.props.name }), _jsx(TreeMenuMapper, { path: path, children: filterElements(tree.props.children, matchMenuElement) })] }));
}