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

const drawerWidth = 388;

export const OpenSideMenuPanel = styled('div')(({ theme }) => ({
    width: drawerWidth,
    background: theme.palette.background.default,
    borderRightWidth: '1px',
    borderRightStyle: 'solid',
    borderRightColor: theme.palette.divider,
    flexShrink: 0,
    whiteSpace: 'nowrap',
    position: 'absolute',
    height: '100%',
    zIndex: 1250,
    display: 'flex',
    flexDirection: 'column',
}))

export const CloseSideMenuPanel = styled('div')(({ theme }) => ({
    width: `calc(${theme.spacing(8)} + 1px)`,
    background: theme.palette.background.default,
    borderRightWidth: '1px',
    borderRightStyle: 'solid',
    borderRightColor: theme.palette.divider,
    flexShrink: 0,
    whiteSpace: 'nowrap',
    position: 'absolute',
    height: '100%',
    zIndex: 1250,
    display: 'flex',
    flexDirection: 'column',
    transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
        delay: '.5s'
    }),
    "& .app-sidemenu-show": {
        opacity: 0,
        transition: theme.transitions.create('opacity', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
            delay: '.5s'
        }),
    },
    "&:focus-within": {
        width: drawerWidth,
        boxShadow: theme.shadows[5],
    },
    "&:hover": {
        width: drawerWidth,
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
        boxShadow: theme.shadows[5],
    },
    "&:focus-within .app-sidemenu-show": {
        opacity: 1,
    },
    "&:hover .app-sidemenu-show": {
        opacity: 1,
        transition: theme.transitions.create('opacity', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },
}))

export const CloseNotHoverSideMenuPanel = styled('div')(({ theme }) => ({
    width: `calc(${theme.spacing(8)} + 1px)`,
    background: theme.palette.background.default,
    borderRightWidth: '1px',
    borderRightStyle: 'solid',
    borderRightColor: theme.palette.divider,
    flexShrink: 0,
    whiteSpace: 'nowrap',
    position: 'absolute',
    height: '100%',
    zIndex: 1250,
    display: 'flex',
    flexDirection: 'column',
    transition: theme.transitions.create('width', {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen,
    }),
}))