|
|
@ -1,43 +1,53 @@ |
|
|
|
import { Divider, Drawer, List, ListItem, Box } from '@material-ui/core'; |
|
|
|
import { Box, Divider, Drawer, List, ListItem } from '@mui/material'; |
|
|
|
import { makeStyles, createStyles } from '@material-ui/core/styles'; |
|
|
|
import { styled } from '@mui/material/styles'; |
|
|
|
import DashboardIcon from '@material-ui/icons/Dashboard'; |
|
|
|
import DashboardIcon from '@mui/icons-material/Dashboard'; |
|
|
|
import { Dispatch, SetStateAction } from 'react'; |
|
|
|
import { Dispatch, SetStateAction } from 'react'; |
|
|
|
import { BodyText, HeaderText } from './Text'; |
|
|
|
import { BodyText, HeaderText } from './Text'; |
|
|
|
import { ICONS, ICON_SIZE } from '../lib/consts/ICONS'; |
|
|
|
import { ICONS, ICON_SIZE } from '../lib/consts/ICONS'; |
|
|
|
import { DIVIDER, GREY } from '../lib/consts/DEFAULT_THEME'; |
|
|
|
import { DIVIDER, GREY } from '../lib/consts/DEFAULT_THEME'; |
|
|
|
|
|
|
|
|
|
|
|
interface DrawerProps { |
|
|
|
const PREFIX = 'AnvilDrawer'; |
|
|
|
open: boolean; |
|
|
|
|
|
|
|
setOpen: Dispatch<SetStateAction<boolean>>; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const useStyles = makeStyles(() => |
|
|
|
const classes = { |
|
|
|
createStyles({ |
|
|
|
list: `${PREFIX}-list`, |
|
|
|
list: { |
|
|
|
divider: `${PREFIX}-divider`, |
|
|
|
|
|
|
|
text: `${PREFIX}-text`, |
|
|
|
|
|
|
|
dashboardButton: `${PREFIX}-dashboardButton`, |
|
|
|
|
|
|
|
dashboardIcon: `${PREFIX}-dashboardIcon`, |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const StyledDrawer = styled(Drawer)(() => ({ |
|
|
|
|
|
|
|
[`& .${classes.list}`]: { |
|
|
|
width: '200px', |
|
|
|
width: '200px', |
|
|
|
}, |
|
|
|
}, |
|
|
|
divider: { |
|
|
|
|
|
|
|
background: DIVIDER, |
|
|
|
[`& .${classes.divider}`]: { |
|
|
|
|
|
|
|
backgroundColor: DIVIDER, |
|
|
|
}, |
|
|
|
}, |
|
|
|
text: { |
|
|
|
|
|
|
|
|
|
|
|
[`& .${classes.text}`]: { |
|
|
|
paddingTop: '.5em', |
|
|
|
paddingTop: '.5em', |
|
|
|
paddingLeft: '1.5em', |
|
|
|
paddingLeft: '1.5em', |
|
|
|
}, |
|
|
|
}, |
|
|
|
dashboardButton: { |
|
|
|
|
|
|
|
|
|
|
|
[`& .${classes.dashboardButton}`]: { |
|
|
|
paddingLeft: '.1em', |
|
|
|
paddingLeft: '.1em', |
|
|
|
}, |
|
|
|
}, |
|
|
|
dashboardIcon: { |
|
|
|
|
|
|
|
|
|
|
|
[`& .${classes.dashboardIcon}`]: { |
|
|
|
fontSize: '2.3em', |
|
|
|
fontSize: '2.3em', |
|
|
|
color: GREY, |
|
|
|
color: GREY, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}), |
|
|
|
})); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => { |
|
|
|
interface DrawerProps { |
|
|
|
const classes = useStyles(); |
|
|
|
open: boolean; |
|
|
|
|
|
|
|
setOpen: Dispatch<SetStateAction<boolean>>; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => { |
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Drawer |
|
|
|
<StyledDrawer |
|
|
|
BackdropProps={{ invisible: true }} |
|
|
|
BackdropProps={{ invisible: true }} |
|
|
|
anchor="left" |
|
|
|
anchor="left" |
|
|
|
open={open} |
|
|
|
open={open} |
|
|
@ -90,7 +100,7 @@ const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => { |
|
|
|
)} |
|
|
|
)} |
|
|
|
</List> |
|
|
|
</List> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</Drawer> |
|
|
|
</StyledDrawer> |
|
|
|
); |
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|