import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ClickAwayListener, Drawer } from "@material-ui/core";
import styled from "styled-components";
export const DockedSidebar = (props) => {
    return (_jsxs(Wrapper, { children: [_jsx(ContentWrapper, Object.assign({ open: props.open, sidebarWidth: props.sidebarWidth }, { children: props.content() }), void 0),
            props.toogleIcon && (_jsx(StyledOpenButton, Object.assign({ "data-testid": `editconfig-btn-toggle` }, { children: props.toogleIcon() }), void 0)),
            _jsx(ClickAwayListener, Object.assign({ onClickAway: () => {
                    if (props.open) {
                        props.onClose();
                    }
                }, mouseEvent: "onMouseDown" }, { children: _jsx(StyledDrawer, Object.assign({ open: props.open, variant: "persistent", anchor: "right", onClose: props.onClose, width: props.sidebarWidth, "data-testid": `editconfig-${props.open ? "open" : "close"}` }, { children: _jsxs(StyledSidebarContent, { children: [props.sidebar(), props.toogleIcon && (_jsx(StyledCloseButton, Object.assign({ open: props.open }, { children: props.toogleIcon() }), void 0))] }, void 0) }), void 0) }), void 0)] }, void 0));
};
const Wrapper = styled.div `
    display: flex;
    flex: 1;
    position: relative;
    overflow: hidden;
`;
const ContentWrapper = styled.div `
    width: ${(props) => (props.open ? `calc(100% - ${props.sidebarWidth}px)` : "100%")};
    height: 100%;
    overflow: auto;
`;
const StyledDrawer = styled(Drawer) `
    && {
        .MuiDrawer-paper {
            width: ${(props) => props.width}px;
            position: absolute;
            overflow: visible;
        }
    }
`;
const StyledOpenButton = styled.div `
    position: absolute;
    top: 20px;
    right: 0;
`;
const StyledCloseButton = styled.div `
    position: absolute;
    top: 20px;
    left: -40px;
    visibility: ${(props) => (props.open ? "visible" : "hidden")};
`;
const StyledSidebarContent = styled.div `
    position: relative;
    width: 100%;
    height: 100%;
`;
//# sourceMappingURL=DockSidebar.js.map