@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
17 lines (16 loc) • 1.39 kB
JavaScript
import { h } from "@stencil/core";
/**
* Renders a submenu section with optional title and menu items
* @param subMenu - The submenu configuration containing title and items
* @param onMenuItemClick - Callback function when a menu item is clicked
* @returns JSX element for the submenu section or null if no items
*/
export const renderSubMenu = (subMenu, onMenuItemClick, isMainMenu) => {
if (!subMenu || !subMenu.items || subMenu.items.length === 0) {
return null;
}
return (h("div", { class: isMainMenu ? 'main-menu-section' : 'submenu-section' }, !isMainMenu && (h("div", { class: "submenu-title-container" }, subMenu.title && (h("modus-wc-typography", { customClass: "submenu-title", hierarchy: "p", size: "sm", weight: "bold", label: subMenu.title })))), h("modus-wc-menu", { size: "md" }, subMenu.items.map((item) => {
var _a, _b;
return (h("modus-wc-menu-item", { label: item.label, value: (_a = item.value) !== null && _a !== void 0 ? _a : item.label, onItemSelect: () => { var _a; return onMenuItemClick === null || onMenuItemClick === void 0 ? void 0 : onMenuItemClick((_a = item.value) !== null && _a !== void 0 ? _a : item.label); } }, item.icon && (h("modus-wc-icon", { slot: "start-icon", name: item.icon, size: (_b = item.iconSize) !== null && _b !== void 0 ? _b : 'sm', variant: item.iconVariant || 'solid' }))));
}))));
};