import React, { useState } from 'react';
import { makeStyles, Fade } from '@material-ui/core';
import { FluentIconButton } from '../../UI/inputs/buttons/FluentIconButton';
import { ChevronRightIcon, ChevronLeftIcon } from '@fluentui/react-icons';
const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        flexDirection: 'row',
        width: '100%',
        position: 'relative'
    },
    column: {
        display: 'flex',
        flexDirection: 'row',
        flex: 1
    },
    content: {
        flex: 1
    },
    sideBar: {
        height: '100vh',
        background: theme.palette.primary.light
    }
}));
export const SideBarTemplate = ({ children, sidebar }) => {
    const classes = useStyles();
    const [open, setOpen] = useState(true);
    const toggleSidebar = () => {
        setOpen(!open);
    };
    return (React.createElement("div", { className: classes.root }, React.createElement("div", { className: classes.column }, React.createElement("div", { className: classes.content }, children), React.createElement("div", { style: { position: 'absolute', top: 0, right: open ? 300 : 0 } }, React.createElement(FluentIconButton, { color: "primary", icon: open ? ChevronRightIcon : ChevronLeftIcon, onClick: toggleSidebar })), open && (React.createElement(Fade, { in: open, timeout: { enter: 1000, exit: 1000 } }, React.createElement("div", { className: classes.sideBar }, sidebar))))));
};
//# sourceMappingURL=SideBarTemplate.js.map