@smitch/fluid/lib/drawer/Drawer.js

A lightweight, Tailwind-powered React/Next.js UI component library.

"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState, useEffect, useMemo } from "react";
import { twMerge } from "tailwind-merge";
import { CloseButton } from "..";
var positions = {
    top: "top-0",
    bottom: "bottom-0",
};
var drawerClasses = "fixed left-0 right-0 z-100 min-h-min w-full max-h-screen pb-4 bg-light text-dark dark:bg-dark dark:text-light duration-500";
var Drawer = function (_a) {
    var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.position, position = _c === void 0 ? "bottom" : _c, _d = _a.backdrop, backdrop = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? "" : _e, style = _a.style, children = _a.children, onClose = _a.onClose;
    var _f = useState(false), show = _f[0], setShow = _f[1];
    useEffect(function () {
        if (open) {
            setShow(true);
            document.body.style.overflow = "hidden";
        }
        else {
            setShow(false);
            document.body.style.overflow = "";
        }
        return function () {
            setShow(false);
            document.body.style.overflow = "";
        };
    }, [open]);
    var positionClasses = useMemo(function () { return positions[position]; }, [position]);
    var close = function () {
        onClose(false);
    };
    return (_jsxs(_Fragment, { children: [backdrop && (_jsx("div", { className: "backdrop bg-dark dark:bg-neutral fixed top-0 right-0 bottom-0 left-0 w-full ".concat(show ? "block opacity-50" : "hidden opacity-0", " transition-opacity duration-500"), onClick: close })), _jsxs("aside", { className: twMerge("drawer group ".concat(drawerClasses, " ").concat(positionClasses, " ").concat(show
                    ? "translate-y-0"
                    : position === "bottom"
                        ? "translate-y-full"
                        : "-translate-y-full"), className), style: style, children: [_jsx("header", { className: "sidebar-header", children: _jsx(CloseButton, { onClick: close, layout: "circle", size: "md", className: "fixed top-3 right-3 !p-0" }) }), _jsx("div", { className: "sidebar-content max-h-full overflow-y-auto p-4 pt-8", children: children })] })] }));
};
export default Drawer;
//# sourceMappingURL=Drawer.js.map