import React, { useMemo } from 'react';
import { observer } from 'mobx-react-lite';
function _SidePanelModalItem(props) {
    const { state, id, children, width } = props;
    const { sidePanel } = state;
    const style = useMemo(() => {
        const visible = sidePanel.currentPanelId === id;
        const left = visible ? 0 : width;
        return {
            position: 'absolute',
            width: '100%',
            bottom: 0,
            top: 0,
            transform: `translate(${left}px, 0px)`,
            visibility: visible ? undefined : 'hidden',
        };
    }, [sidePanel.currentPanelId, id, width]);
    return React.createElement("div", { style: style }, children);
}
export const SidePanelModalItem = observer(_SidePanelModalItem);
//# sourceMappingURL=SidePanelModalItem.js.map