Add Menu component for rendering menu items

This commit is contained in:
Natxo
2026-03-31 12:14:53 +02:00
committed by GitHub
parent b920a14b5e
commit d4bf359501

25
src/components/Menu.js Normal file
View File

@@ -0,0 +1,25 @@
import { $html, $for } from "sigpro";
import { val, joinClass } from "../core/utils.js";
/** MENU */
export const Menu = (props) => {
const renderItems = (items) =>
$for(
() => items || [],
(it) =>
$html("li", {}, [
it.children
? $html("details", { open: it.open }, [
$html("summary", {}, [it.icon && $html("span", { class: "mr-2" }, it.icon), it.label]),
$html("ul", {}, renderItems(it.children)),
])
: $html("a", { class: () => (val(it.active) ? "active" : ""), onclick: it.onclick }, [
it.icon && $html("span", { class: "mr-2" }, it.icon),
it.label,
]),
]),
(it, i) => it.label || i,
);
return $html("ul", { ...props, class: joinClass("menu bg-base-200 rounded-box", props.class) }, renderItems(props.items));
};