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,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 (
-    <AppBar position="static" className={classes.appBar}>
+    <>
-      <Box display="flex" justifyContent="space-between" flexDirection="row">
+      <AppBar position="static" className={classes.appBar}>
-        <Box className={classes.barElement}>
+        <Box display="flex" justifyContent="space-between" flexDirection="row">
-          <img alt="" src="/pngs/logo.png" width="160" height="40" />
+          <Box className={classes.barElement}>
-        </Box>
+            <Button onClick={toggleDrawer}>
-        <Box className={classes.barElement}>
+              <img alt="" src="/pngs/logo.png" width="160" height="40" />
-          <input className={classes.input} list="search-suggestions" />
+            </Button>
-        </Box>
+          </Box>
-        <Box className={classes.barElement}>
+          <Box className={classes.barElement}>
-          {ICONS.map(
+            <input className={classes.input} list="search-suggestions" />
-            (icon): JSX.Element => (
+          </Box>
-              <img
+          <Box className={classes.barElement}>
-                alt=""
+            {ICONS.map(
-                key="icon"
+              (icon): JSX.Element => (
-                src={icon} // eslint-disable-next-line react/jsx-props-no-spreading
+                <img
-                {...ICON_SIZE}
+                  alt=""
-              />
+                  key="icon"
-            ),
+                  src={icon} // eslint-disable-next-line react/jsx-props-no-spreading
-          )}
+                  {...ICON_SIZE}
+                />
+              ),
+            )}
+          </Box>
         </Box>
-      </Box>
+      </AppBar>
-    </AppBar>
+      <AnvilDrawer open={open} setOpen={setOpen} />
+    </>
   );
 };