import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import './style.scss';
const Sidebar = ({ isOpen, onClose, children }) => {
    const [isTransitionFinished, setIsTransitionFinished] = useState(false);
    const handleTransitionEnd = () => {
        if (!isOpen) {
            setIsTransitionFinished(false);
        }
    };
    const sidebarClass = `sidebar ${isOpen ? 'open' : ''} ${isTransitionFinished ? 'transition-finished' : ''}`;
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: sidebarClass, onTransitionEnd: handleTransitionEnd, children: _jsx("div", { className: "sidebar-content", children: children }) }), isOpen && _jsx("div", { className: "sidebar-backdrop", onClick: onClose })] }));
};
export default Sidebar;
