@totalsoft/rocket-ui
Version:
A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.
54 lines • 1.6 kB
JavaScript
import { styled } from '@mui/material/styles';
import IconButton from '../../buttons/IconButton';
export const SideMenuWrapper = styled('div')(() => ({
position: 'fixed',
top: '180px',
right: 0
}));
export const SideMenuButton = styled(IconButton)(() => ({
position: 'fixed',
top: '180px',
right: 0,
width: '44px',
height: '38px',
borderRadius: '8px 0 0 8px',
textAlign: 'center',
display: 'flex',
justifyContent: 'center'
}));
export const SideMenuContent = styled('div', { shouldForwardProp: prop => prop !== 'show' })(({ show, theme }) => ({
position: 'absolute',
top: '8px',
right: '60px',
display: show ? 'block' : 'none',
minWidth: '160px',
minHeight: '80px',
backgroundColor: '#fff',
opacity: show ? 1 : 0,
border: `1px solid ${theme?.palette?.grey?.[500]}`,
borderRadius: '4px',
WebkitBoxShadow: theme?.customShadows?.z1,
WebkitTransform: 'translateY(-15%)',
transformOrigin: '0 0',
margin: '5px',
padding: '10px',
'&:before, &:after': {
content: '""',
display: 'inline-block',
position: 'absolute',
top: '8%'
},
'&:before': {
borderBottom: '16px solid transparent',
borderLeft: `16px solid ${theme?.palette?.grey?.[500]}`,
borderTop: '16px solid transparent',
right: '-17px'
},
'&:after': {
borderBottom: '16px solid transparent',
borderLeft: '16px solid #fff',
borderTop: '16px solid transparent',
right: '-16px'
}
}));
//# sourceMappingURL=SideMenuStyles.js.map