@smitch/fluid
Version:
A Next/React ui-component libray.
39 lines (38 loc) • 2.25 kB
JavaScript
'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 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;