diff --git a/striker-ui/components/AnvilDrawer.tsx b/striker-ui/components/AnvilDrawer.tsx new file mode 100644 index 00000000..28e0460a --- /dev/null +++ b/striker-ui/components/AnvilDrawer.tsx @@ -0,0 +1,35 @@ +import { Drawer, List, ListItem } from '@material-ui/core'; +import { makeStyles, createStyles } from '@material-ui/core/styles'; +import { Dispatch, SetStateAction } from 'react'; +import { BodyText } from './Text'; + +interface DrawerProps { + open: boolean; + setOpen: Dispatch>; +} + +const useStyles = makeStyles(() => + createStyles({ + list: { + width: 'auto', + }, + }), +); + +const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => { + const classes = useStyles(); + + return ( + setOpen(!open)}> +
+ + + + + +
+
+ ); +}; + +export default AnvilDrawer; diff --git a/striker-ui/components/Header.tsx b/striker-ui/components/Header.tsx index 7b95f022..0a1467a8 100644 --- a/striker-ui/components/Header.tsx +++ b/striker-ui/components/Header.tsx @@ -1,7 +1,9 @@ +import { useState } from 'react'; import AppBar from '@material-ui/core/AppBar'; import { makeStyles, createStyles } from '@material-ui/core/styles'; -import { Box } from '@material-ui/core'; +import { Box, Button } from '@material-ui/core'; import { ICONS, ICON_SIZE } from '../lib/consts/ICONS'; +import AnvilDrawer from './AnvilDrawer'; const useStyles = makeStyles((theme) => createStyles({ @@ -25,29 +27,38 @@ const useStyles = makeStyles((theme) => const Header = (): JSX.Element => { const classes = useStyles(); + const [open, setOpen] = useState(false); + + const toggleDrawer = (): void => setOpen(!open); + return ( - - - - - - - - - - {ICONS.map( - (icon): JSX.Element => ( - - ), - )} + <> + + + + + + + + + + {ICONS.map( + (icon): JSX.Element => ( + + ), + )} + - - + + + ); };