refactor(front-end): add button in the drawer to go the dashboard/home page
This commit is contained in:
parent
5fe420eb67
commit
ee2bf4da09
@ -1,9 +1,10 @@
|
|||||||
import { Divider, Drawer, List, ListItem, Box } 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 DashboardIcon from '@material-ui/icons/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 } from '../lib/consts/DEFAULT_THEME';
|
import { DIVIDER, GREY } from '../lib/consts/DEFAULT_THEME';
|
||||||
|
|
||||||
interface DrawerProps {
|
interface DrawerProps {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
@ -22,6 +23,13 @@ const useStyles = makeStyles(() =>
|
|||||||
paddingTop: '.5em',
|
paddingTop: '.5em',
|
||||||
paddingLeft: '1.5em',
|
paddingLeft: '1.5em',
|
||||||
},
|
},
|
||||||
|
dashboardButton: {
|
||||||
|
paddingLeft: '.1em',
|
||||||
|
},
|
||||||
|
dashboardIcon: {
|
||||||
|
fontSize: '2.3em',
|
||||||
|
color: GREY,
|
||||||
|
},
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -41,6 +49,16 @@ const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => {
|
|||||||
<HeaderText text="Admin" />
|
<HeaderText text="Admin" />
|
||||||
</ListItem>
|
</ListItem>
|
||||||
<Divider className={classes.divider} />
|
<Divider className={classes.divider} />
|
||||||
|
<ListItem button component="a" href="/">
|
||||||
|
<Box display="flex" flexDirection="row" width="100%">
|
||||||
|
<Box className={classes.dashboardButton}>
|
||||||
|
<DashboardIcon className={classes.dashboardIcon} />
|
||||||
|
</Box>
|
||||||
|
<Box flexGrow={1} className={classes.text}>
|
||||||
|
<BodyText text="Dashboard" />
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</ListItem>
|
||||||
{ICONS.map(
|
{ICONS.map(
|
||||||
(icon): JSX.Element => (
|
(icon): JSX.Element => (
|
||||||
<ListItem
|
<ListItem
|
||||||
|
Loading…
Reference in New Issue
Block a user