refactor: add legacy icons and text to AnvilDrawer

main
Josue 4 years ago committed by Tsu-ba-me
parent 45d0368d6f
commit 10650e8bb2
  1. 35
      striker-ui/components/AnvilDrawer.tsx

@ -1,8 +1,9 @@
import { Drawer, List, ListItem } from '@material-ui/core'; import { Divider, Drawer, List, ListItem, Box } from '@material-ui/core';
import { makeStyles, createStyles } from '@material-ui/core/styles'; import { makeStyles, createStyles } from '@material-ui/core/styles';
import { Dispatch, SetStateAction } from 'react'; import { Dispatch, SetStateAction } from 'react';
import { BodyText } from './Text'; import { BodyText } from './Text';
import { ICONS, ICON_SIZE } from '../lib/consts/ICONS'; import { ICONS, ICON_SIZE } from '../lib/consts/ICONS';
import { DIVIDER } from '../lib/consts/DEFAULT_THEME';
interface DrawerProps { interface DrawerProps {
open: boolean; open: boolean;
@ -12,9 +13,16 @@ interface DrawerProps {
const useStyles = makeStyles(() => const useStyles = makeStyles(() =>
createStyles({ createStyles({
list: { list: {
width: '15vw', width: '200px',
backdropFilter: 'blur(10px)', backdropFilter: 'blur(5px) opacity(0)',
opacity: 0.7, },
container: {},
divider: {
background: DIVIDER,
},
text: {
paddingTop: '0.5em',
paddingLeft: '1em',
}, },
}), }),
); );
@ -23,19 +31,34 @@ const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => {
const classes = useStyles(); const classes = useStyles();
return ( return (
<Drawer anchor="left" open={open} onClose={() => setOpen(!open)}> <Drawer
<div role="presentation"> BackdropProps={{ invisible: true }}
anchor="left"
open={open}
onClose={() => setOpen(!open)}
>
<div role="presentation" className={classes.container}>
<List className={classes.list}> <List className={classes.list}>
<ListItem button>
<BodyText text="Admin" />
</ListItem>
<Divider className={classes.divider} />
{ICONS.map( {ICONS.map(
(icon): JSX.Element => ( (icon): JSX.Element => (
<ListItem button key={icon.image}> <ListItem button key={icon.image}>
<Box display="flex" flexDirection="row" width="100%">
<Box>
<img <img
alt="" alt=""
key="icon" key="icon"
src={icon.image} // eslint-disable-next-line react/jsx-props-no-spreading src={icon.image} // eslint-disable-next-line react/jsx-props-no-spreading
{...ICON_SIZE} {...ICON_SIZE}
/> />
</Box>
<Box flexGrow={1} className={classes.text}>
<BodyText text={icon.text} /> <BodyText text={icon.text} />
</Box>
</Box>
</ListItem> </ListItem>
), ),
)} )}

Loading…
Cancel
Save