36 lines
1.1 KiB
JavaScript
36 lines
1.1 KiB
JavaScript
// components/Menu.js
|
|
// import { Tag, For } from "../sigpro.js";
|
|
import { val, ui } from "../core/utils.js";
|
|
|
|
/**
|
|
* Menu component
|
|
*
|
|
* daisyUI classes used:
|
|
* - menu, menu-dropdown, menu-dropdown-show
|
|
* - bg-base-200, rounded-box
|
|
* - details, summary, ul, li, a
|
|
* - mr-2, active
|
|
*/
|
|
export const Menu = (props) => {
|
|
const { class: className, items, ...rest } = props;
|
|
|
|
const renderItems = (items) =>
|
|
For(
|
|
() => items || [],
|
|
(it) =>
|
|
Tag("li", {}, [
|
|
it.children
|
|
? Tag("details", { open: it.open }, [
|
|
Tag("summary", {}, [it.icon && Tag("span", { class: "mr-2" }, it.icon), it.label]),
|
|
Tag("ul", {}, renderItems(it.children)),
|
|
])
|
|
: Tag("a", { class: () => (val(it.active) ? "active" : ""), onclick: it.onclick }, [
|
|
it.icon && Tag("span", { class: "mr-2" }, it.icon),
|
|
it.label,
|
|
]),
|
|
]),
|
|
(it, i) => it.label || i,
|
|
);
|
|
|
|
return Tag("ul", { ...rest, class: ui('menu bg-base-200 rounded-box', className) }, renderItems(items));
|
|
}; |