natxocc
5a5f593025
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
31 lines
1.1 KiB
JavaScript
31 lines
1.1 KiB
JavaScript
// components/Drawer.js
|
|
import { Tag } from "sigpro";
|
|
|
|
export const Drawer = (props, children) => {
|
|
children === undefined && (children = props, props = {});
|
|
return Tag("div", { ...props, class: `drawer ${props.class ?? ''}` }, children);
|
|
};
|
|
|
|
export const Sidebar = (props) => {
|
|
const id = props.id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
|
|
return Tag("div", { ...props, class: `drawer ${props.class ?? ''}` }, [
|
|
Tag("input", {
|
|
id,
|
|
type: "checkbox",
|
|
class: "drawer-toggle",
|
|
checked: () => (typeof props.open === "function" ? props.open() : props.open),
|
|
onchange: (e) => typeof props.open === "function" && props.open(e.target.checked)
|
|
}),
|
|
Tag("div", { class: "drawer-content" }, props.children),
|
|
Tag("div", { class: "drawer-side" }, [
|
|
Tag("label", {
|
|
for: id,
|
|
class: "drawer-overlay",
|
|
onclick: () => typeof props.open === "function" && props.open(false)
|
|
}),
|
|
Tag("div", { class: "min-h-full bg-base-200 w-80 p-4" },
|
|
typeof props.content === "function" ? props.content() : props.content
|
|
)
|
|
])
|
|
]);
|
|
}; |