refactor: add icons and text to the drawer

striker-ui/components/AnvilDrawer.tsx

@@ -2,6 +2,7 @@ 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';
+import { ICONS, ICON_SIZE } from '../lib/consts/ICONS';
 
 interface DrawerProps {
   open: boolean;
@@ -11,7 +12,9 @@ interface DrawerProps {
 const useStyles = makeStyles(() =>
   createStyles({
     list: {
-      width: 'auto',
+      width: '15vw',
+      backdropFilter: 'blur(10px)',
+      opacity: 0.7,
     },
   }),
 );
@@ -21,11 +24,21 @@ const AnvilDrawer = ({ open, setOpen }: DrawerProps): JSX.Element => {
 
   return (
     <Drawer anchor="left" open={open} onClose={() => setOpen(!open)}>
-      <div role="presentation" className={classes.list}>
-        <List>
-          <ListItem button>
-            <BodyText text="Button" />
-          </ListItem>
+      <div role="presentation">
+        <List className={classes.list}>
+          {ICONS.map(
+            (icon): JSX.Element => (
+              <ListItem button key={icon.image}>
+                <img
+                  alt=""
+                  key="icon"
+                  src={icon.image} // eslint-disable-next-line react/jsx-props-no-spreading
+                  {...ICON_SIZE}
+                />
+                <BodyText text={icon.text} />
+              </ListItem>
+            ),
+          )}
         </List>
       </div>
     </Drawer>

striker-ui/components/Header.tsx

@@ -49,7 +49,7 @@ const Header = (): JSX.Element => {
                 <img
                   alt=""
                   key="icon"
-                  src={icon} // eslint-disable-next-line react/jsx-props-no-spreading
+                  src={icon.image} // eslint-disable-next-line react/jsx-props-no-spreading
                   {...ICON_SIZE}
                 />
               ),

striker-ui/lib/consts/ICONS.ts

@@ -1,12 +1,36 @@
 export const ICONS = [
-  '/pngs/files_on.png',
-  '/pngs/tasks_no-jobs_icon.png',
-  '/pngs/configure_icon_on.png',
-  '/pngs/striker_icon_on.png',
-  '/pngs/anvil_icon_on.png',
-  '/pngs/email_on.png',
-  '/pngs/users_icon_on.png',
-  '/pngs/help_icon_on.png',
+  {
+    text: 'Files',
+    image: '/pngs/files_on.png',
+  },
+  {
+    text: 'Tasks',
+    image: '/pngs/tasks_no-jobs_icon.png',
+  },
+  {
+    text: 'Configure',
+    image: '/pngs/configure_icon_on.png',
+  },
+  {
+    text: 'Striker',
+    image: '/pngs/striker_icon_on.png',
+  },
+  {
+    text: 'Anvil',
+    image: '/pngs/anvil_icon_on.png',
+  },
+  {
+    text: 'Email',
+    image: '/pngs/email_on.png',
+  },
+  {
+    text: 'Users',
+    image: '/pngs/users_icon_on.png',
+  },
+  {
+    text: 'Help',
+    image: '/pngs/help_icon_on.png',
+  },
 ];
 
 export const ICON_SIZE = {