setup side menu with options

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

web-app/src/containers/Tutorial/components/SideMenu.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { Menu, Icon, Drawer } from '@alifd/next'
+
+const { Item, Divider } = Menu
+
+const styles = {
+  drawer: {
+    padding: 0,
+  },
+  menu: {
+    margin: 0,
+    height: '100%',
+  },
+  itemText: {
+    marginLeft: '0.5rem',
+  },
+}
+
+interface Props {
+  visible: boolean
+  toggleVisible(visible: boolean): void
+}
+
+const SideMenu = (props: Props) => {
+  const onMenuClose = () => {
+    props.toggleVisible(false)
+  }
+  return (
+    <Drawer
+      bodyStyle={styles.drawer}
+      title="Menu"
+      visible={props.visible}
+      placement="left"
+      closeable="mask"
+      onClose={onMenuClose}
+    >
+      <Menu style={styles.menu} defaultOpenKeys="sub-menu">
+        <Item disabled key="1">
+          <Icon type="list" size="small" color="#EBEBEB" />
+          <span style={styles.itemText}>Review</span>
+        </Item>
+        {/* <Divider key="divider" />
+        <Item disabled key="2">
+          <Icon type="help" size="small" color="#EBEBEB" />
+          <span style={styles.itemText}>Help</span>
+        </Item> */}
+        <Divider key="divider" />
+        <Item disabled key="3">
+          <Icon type="set" size="small" color="#EBEBEB" />
+          <span style={styles.itemText}>Settings</span>
+        </Item>
+      </Menu>
+    </Drawer>
+  )
+}
+
+export default SideMenu

web-app/src/containers/Tutorial/index.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import * as T from 'typings'
 import * as TT from 'typings/tutorial'
-import { Drawer } from '@alifd/next'
 import * as selectors from '../../services/selectors'
+import SideMenu from './components/SideMenu'
 import Level from './components/Level'
 import Icon from '../../components/Icon'
 
@@ -61,10 +61,6 @@ const TutorialPage = (props: PageProps) => {
   const levelStatus = progress.levels[position.levelId] ? 'COMPLETE' : 'ACTIVE'
   const [menuVisible, setMenuVisible] = React.useState(false)
 
-  const onMenuClose = () => {
-    setMenuVisible(false)
-  }
-
   return (
     <div>
       <div css={styles.header}>
@@ -86,9 +82,7 @@ const TutorialPage = (props: PageProps) => {
         processes={processes}
         testStatus={testStatus}
       />
-      <Drawer title="Menu Title" visible={menuVisible} placement="left" onClose={onMenuClose}>
-        Menu content here
-      </Drawer>
+      <SideMenu visible={menuVisible} toggleVisible={setMenuVisible} />
     </div>
   )
 }