add toggle menu for Web

web/src/Home/Home.css

@@ -1,24 +1,29 @@
 .Home .lander {
-    z-index: 99999;
-    margin: 120px;
-    text-align: center;
+  z-index: 99999;
+  margin: 120px;
+  text-align: center;
+}
+
+@media only screen and (max-width: 1100px) {
+  .Home .lander {
+    margin: 40px;
+  }
 }
 
 .Home .lander h1 {
-    z-index: 99999;
-    font-family: "Open Sans", sans-serif;
-    font-weight: 800;
+  z-index: 99999;
+  font-family: "Open Sans", sans-serif;
+  font-weight: 800;
 }
 
 .Home .lander p {
-    z-index: 99999;
-    color: #999;
+  z-index: 99999;
+  color: #999;
 }
 
 .Home .textItem {
   font-size: large;
 }
-
 /* to replace background image
 .Home {
     background: url("../components/images.jpg") no-repeat center center fixed;
@@ -30,17 +35,17 @@
     min-height:100vh;
   } */
 
-  body {
-    margin: 0;
-    padding: 0;
-    /* more styles */
-  }
-  
-  .particles {
-    position: fixed;
-    right: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: -1;
-  }
+body {
+  margin: 0;
+  padding: 0;
+  /* more styles */
+}
+
+.particles {
+  position: fixed;
+  right: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+}

web/src/Home/Home.js

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 import "./Home.css";
 import Particles from "react-particles-js";
 import Grid from "@material-ui/core/Grid";

web/src/Routes.js

@@ -12,7 +12,7 @@ import TabularRegression from "./TabularRegression/TabularRegression";
 export default function Routes() {
   return (
     <Switch>
-      <Route path="/home" component={Home} />
+      <Route path="/" exact component={Home} />
       <Route path="/ImageClassification" component={ImageClassification} />
       <Route path="/ObjectDetection" component={ObjectDetection} />
       <Route path="/QuestionAnswering" component={QuestionAnswering} />

web/src/components/Header.js

@@ -1,64 +1,77 @@
-import React from "react";
-import { Tabs, Tab, AppBar } from "@material-ui/core";
+import React, { useState, useEffect } from "react";
+import {
+  Tabs,
+  Tab,
+  AppBar,
+  Toolbar,
+  IconButton,
+  Drawer,
+  List,
+  ListItem,
+  ListItemText
+} from "@material-ui/core";
 import { Route, BrowserRouter, NavLink, Link } from "react-router-dom";
 import Routes from "../Routes";
 import { makeStyles } from "@material-ui/core/styles";
 import Grid from "@material-ui/core/Grid";
+import MenuIcon from "@material-ui/icons/Menu";
 
 const useStyles = makeStyles({
   root: {
     flexGrow: 1,
-    backgroundColor: `#01213f`,
-    textDecoration: `none`
+    backgroundColor: "#01213f",
+    textDecoration: "none"
   },
-  paper: {
-    fontSize: `25px`,
-    backgroundColor: `#01213f`,
-    padding: `20px 10px`,
-    textAlign: "center",
-    color: `#c5c3c3`,
-    textTransform: `capitalize`,
-    "&:hover": {
-      backgroundColor: "#1890ff !important",
-      color: `white`
-    }
-  },
-
   navHome: {
-    padding: `25px 60px 25px 80px`,
-    margin: `0px`,
-    fontSize: `30px`,
+    padding: "30px 14px",
+    textAlign: "center",
+    margin: "0px 15px",
     "&:hover": {
-      textDecoration: `none`,
+      textDecoration: "none",
       backgroundColor: "#1890ff !important"
     }
   },
-
   navHomeText: {
-    color: `#ffffff`,
+    color: "#ffffff",
+    fontSize: "22px",
     "&:hover": {
-      textDecoration: `none`,
+      textDecoration: "none",
       backgroundColor: "#1890ff !important",
-      color: `#ffffff`
+      color: "#ffffff"
     }
   },
-
   navItem: {
-    padding: `15px`,
-    color: `#c5c3c3`,
-    fontSize: `15px`,
+    padding: "15px",
+    color: "#c5c3c3",
+    fontSize: "15px",
     "&:hover": {
-      textDecoration: `none`
+      textDecoration: "none"
     }
   },
   navText: {
-    fontSize: `15px`,
-    padding: `17px 30px`,
+    fontSize: "15px",
+    padding: "17px 30px",
     "&:hover": {
-      textDecoration: `none`,
-      color: `#ffffff`,
+      textDecoration: "none",
+      color: "#ffffff",
       backgroundColor: "#1890ff !important"
     }
+  },
+
+  drawerContainer: {
+    paddingTop: "30px",
+    textDecoration: "none",
+    listStyle: "none"
+  },
+  drawerItem: {
+    // fontSize: "40px",
+    color: "#01213f",
+    padding: "20px 40px",
+    "&:hover": {
+      textDecoration: "none",
+      color: "#1890ff",
+      backgroundColor: "#D5D5D5"
+    }
   }
 });
 
@@ -72,18 +85,129 @@ export default function Header() {
     "/TabularClassification",
     "/TabularRegression"
   ];
-  return (
-    <div className="App">
+
+  const [state, setState] = useState({
+    mobileView: false,
+    drawerOpen: false
+  });
+  const { mobileView, drawerOpen } = state;
+
+  useEffect(() => {
+    const setResponsiveness = () => {
+      return window.innerWidth < 1100
+        ? setState(prevState => ({ ...prevState, mobileView: true }))
+        : setState(prevState => ({ ...prevState, mobileView: false }));
+    };
+    setResponsiveness();
+    window.addEventListener("resize", () => setResponsiveness());
+  }, []);
+
+  const displayMobile = () => {
+    const handleDrawerOpen = () =>
+      setState(prevState => ({ ...prevState, drawerOpen: true }));
+    const handleDrawerClose = () =>
+      setState(prevState => ({ ...prevState, drawerOpen: false }));
+    return (
+      <BrowserRouter>
+        <Toolbar className={classes.root}>
+          <IconButton
+            {...{
+              edge: "end",
+              color: "secondary",
+              "aria-label": "menu",
+              "aria-haspopup": "true",
+              onClick: handleDrawerOpen
+            }}
+          >
+            <MenuIcon style={{ fontSize: "40px" }} />
+          </IconButton>
+          <Drawer
+            {...{
+              anchor: "left",
+              open: drawerOpen,
+              // onClose: handleDrawerClose,
+              onClick: handleDrawerClose
+            }}
+          >
+            <Route
+              path="/"
+              render={history => (
+                <List className={classes.drawerContainer}>
+                  <ListItem
+                    button
+                    className={classes.drawerItem}
+                    component={Link}
+                    to={routes[0]}
+                  >
+                    <ListItemText>Image Classification</ListItemText>
+                  </ListItem>
+                  <ListItem
+                    button
+                    className={classes.drawerItem}
+                    component={Link}
+                    to={routes[1]}
+                  >
+                    <ListItemText>Object Detection</ListItemText>
+                  </ListItem>
+                  <ListItem
+                    button
+                    className={classes.drawerItem}
+                    component={Link}
+                    to={routes[2]}
+                  >
+                    <ListItemText>Question Answering</ListItemText>
+                  </ListItem>
+                  <ListItem
+                    button
+                    className={classes.drawerItem}
+                    component={Link}
+                    to={routes[3]}
+                  >
+                    <ListItemText>POS Tagging</ListItemText>
+                  </ListItem>
+                  <ListItem
+                    button
+                    className={classes.drawerItem}
+                    component={Link}
+                    to={routes[4]}
+                  >
+                    <ListItemText>Tabular Classification</ListItemText>
+                  </ListItem>
+                  <ListItem
+                    button
+                    className={classes.drawerItem}
+                    component={Link}
+                    to={routes[5]}
+                  >
+                    <ListItemText>Tabular Regression</ListItemText>
+                  </ListItem>
+                </List>
+              )}
+            />
+          </Drawer>
+          <nav className={classes.navHome}>
+            <NavLink to="/" className={classes.navHomeText}>
+              Singa-Easy
+            </NavLink>
+          </nav>
+        </Toolbar>
+        <Routes />
+      </BrowserRouter>
+    );
+  };
+  const displayDesktop = () => {
+    return (
       <BrowserRouter>
         <Route
           path="/"
           render={history => (
             <AppBar className={classes.root}>
-              <Grid container spacing={1}>
+              <Grid container spacing={2}>
                 <Grid item xs={2}>
                   <nav className={classes.navHome}>
-                    <NavLink to="/home" className={classes.navHomeText}>
+                    <NavLink to="/" className={classes.navHomeText}>
                       Singa-Easy
+                      {/* <Typography  variant="h6" component="h1">Singa-Easy</Typography> */}
                     </NavLink>
                   </nav>
                 </Grid>
@@ -147,6 +271,8 @@ export default function Header() {
         />
         <Routes />
       </BrowserRouter>
-    </div>
-  );
+    );
+  };
+
+  return <div>{mobileView ? displayMobile() : displayDesktop()}</div>;
 }