46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
// components/Drawer.js
|
|
import { Tag } from "../sigpro.js";
|
|
import { ui } from "../core/utils.js";
|
|
|
|
/**
|
|
* Drawer component
|
|
*
|
|
* daisyUI classes used:
|
|
* - drawer, drawer-toggle, drawer-content, drawer-side, drawer-overlay
|
|
* - bg-base-200, w-80, min-h-full
|
|
*/
|
|
export const Drawer = (props, children) => {
|
|
const { class: className, id, open, side, content, ...rest } = props;
|
|
|
|
const drawerId = id || `drawer-${Math.random().toString(36).slice(2, 9)}`;
|
|
|
|
return Tag("div", {
|
|
...rest,
|
|
class: ui('drawer', className),
|
|
}, [
|
|
Tag("input", {
|
|
id: drawerId,
|
|
type: "checkbox",
|
|
class: "drawer-toggle",
|
|
checked: () => typeof open === "function" ? open() : open,
|
|
onchange: (e) => {
|
|
if (typeof open === "function") open(e.target.checked);
|
|
}
|
|
}),
|
|
Tag("div", { class: "drawer-content" }, [
|
|
typeof content === "function" ? content() : content
|
|
]),
|
|
Tag("div", { class: "drawer-side" }, [
|
|
Tag("label", {
|
|
for: drawerId,
|
|
class: "drawer-overlay",
|
|
onclick: () => {
|
|
if (typeof open === "function") open(false);
|
|
}
|
|
}),
|
|
Tag("div", { class: "min-h-full bg-base-200 w-80" }, [
|
|
typeof side === "function" ? side() : side
|
|
])
|
|
])
|
|
]);
|
|
}; |