import { AppBar, styled } from "@mui/material";

const drawerWidth = 388;

export const OpenMainBarPanel = styled(AppBar)(({ theme }) => ({
    marginLeft: drawerWidth,
    color: theme.palette.primary.contrastText,
    background: theme.palette.primary.main,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
    }),
}))

export const CloseMainBarPanel = styled(AppBar)(({ theme }) => ({
    color: theme.palette.primary.contrastText,
    background: theme.palette.primary.main,
    zIndex: theme.zIndex.drawer + 1,
    width: `calc(100% - ${theme.spacing(8)} + 1px)`,
    transition: theme.transitions.create(['width', 'margin'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
    }),
}))