feat: add initial implementation of drawer menu

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<SetStateAction<boolean>>;
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    list: {
+      width: 'auto',
+    },
+  }),
+);
+
+const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => {
+  const classes = useStyles();
+
+  return (
+    <Drawer anchor="left" open={open} onClose={() => setOpen(!open)}>
+      <div role="presentation" className={classes.list}>
+        <List>
+          <ListItem button>
+            <BodyText text="Button" />
+          </ListItem>
+        </List>
+      </div>
+    </Drawer>
+  );
+};
+
+export default AnvilDrawer;

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,11 +27,18 @@ const useStyles = makeStyles((theme) =>
 
 const Header = (): JSX.Element => {
   const classes = useStyles();
+  const [open, setOpen] = useState(false);
+
+  const toggleDrawer = (): void => setOpen(!open);
+
   return (
+    <>
       <AppBar position="static" className={classes.appBar}>
         <Box display="flex" justifyContent="space-between" flexDirection="row">
           <Box className={classes.barElement}>
+            <Button onClick={toggleDrawer}>
               <img alt="" src="/pngs/logo.png" width="160" height="40" />
+            </Button>
           </Box>
           <Box className={classes.barElement}>
             <input className={classes.input} list="search-suggestions" />
@@ -48,6 +57,8 @@ const Header = (): JSX.Element => {
           </Box>
         </Box>
       </AppBar>
+      <AnvilDrawer open={open} setOpen={setOpen} />
+    </>
   );
 };