@smitch/fluid/lib/sidebar/Sidebar.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 = {
    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;
//# sourceMappingURL=Sidebar.js.map