@smitch/fluid
Version:
A Next/React ui-component libray.
56 lines (55 loc) • 2.9 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 = {
left: 'left-0',
right: 'right-0',
};
var sidebarClasses = 'fixed top-0 z-100 max-w-md h-full overflow-y-auto bg-light text-dark dark:bg-dark dark:text-light duration-500';
var Sidebar = function (_a) {
var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.position, position = _c === void 0 ? 'right' : _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];
var _g = useState(null), touchPosition = _g[0], setTouchPosition = _g[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 handleTouchStart = function (e) {
setTouchPosition(e.touches[0].clientX);
};
var handleTouchMove = function (e) {
if (touchPosition === null)
return;
var diff = touchPosition - e.touches[0].clientX;
if (position === 'right' && diff < -5) {
close();
setTouchPosition(null);
}
if (position === 'left' && diff > 5) {
close();
setTouchPosition(null);
}
};
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"), onClick: close })), _jsxs("aside", { className: twMerge("sidebar ".concat(sidebarClasses, " ").concat(positionClasses, " ").concat(show
? 'translate-x-0'
: position === 'right'
? 'translate-x-full'
: '-translate-x-full'), className), style: style, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, children: [_jsx("header", { className: "sidebar-header", children: _jsx(CloseButton, { onClick: close, layout: 'circle', size: 'md', className: "fixed top-3 ".concat(position === 'right' ? 'left-3' : 'right-3') }) }), _jsx("div", { className: "sidebar-content max-h-full overflow-y-auto p-0 pt-8", children: children })] })] }));
};
export default Sidebar;