Add Menu component for rendering menu items
This commit is contained in:
25
src/components/Menu.js
Normal file
25
src/components/Menu.js
Normal 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));
|
||||
};
|
||||
Reference in New Issue
Block a user