Add drawer menu

1 files changed, 82 insertions, 12 deletions

diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 0a21d94..1ba1550 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
@@ -6,19 +6,52 @@ import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
+import Drawer from '@material-ui/core/Drawer';
+import List from '@material-ui/core/List';
+import Divider from '@material-ui/core/Divider';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemText from '@material-ui/core/ListItemText';
+import DashboardIcon from '@material-ui/icons/Dashboard';
+import BarChartIcon from '@material-ui/icons/BarChart';
+import SettingsIcon from '@material-ui/icons/Settings';
 
 const styles = {
   flex: {
     flexGrow: 1
+  },
+  list: {
+    width: 250
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
   }
 };
 
 class MainToobar extends Component {
   constructor(props) {
     super(props);
+    this.state = {
+      drawer: false
+    };
+    this.openDrawer = this.openDrawer.bind(this);
+    this.closeDrawer = this.closeDrawer.bind(this);
     this.handleLogout = this.handleLogout.bind(this);
   }
 
+  openDrawer() {
+    this.setState({
+      drawer: true
+    });
+  };
+
+  closeDrawer() {
+    this.setState({
+      drawer: false
+    });
+  };
+
   handleLogout() {
     fetch("/api/session", {
       method: "DELETE"
@@ -32,17 +65,54 @@ class MainToobar extends Component {
   render() {
     const { classes } = this.props;
     return (
-      <AppBar position="static">
-        <Toolbar>
-          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
-            <MenuIcon />
-          </IconButton>
-          <Typography variant="title" color="inherit" className={classes.flex}>
-            Traccar
-          </Typography>
-          <Button color="inherit" onClick={this.handleLogout}>Logout</Button>
-        </Toolbar>
-      </AppBar>
+      <Fragment>
+        <AppBar position="static">
+          <Toolbar>
+            <IconButton
+              className={classes.menuButton}
+              color="inherit"
+              onClick={this.openDrawer}>
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="title" color="inherit" className={classes.flex}>
+              Traccar
+            </Typography>
+            <Button color="inherit" onClick={this.handleLogout}>Logout</Button>
+          </Toolbar>
+        </AppBar>
+        <Drawer open={this.state.drawer} onClose={this.closeDrawer}>
+          <div
+            tabIndex={0}
+            className={classes.list}
+            role="button"
+            onClick={this.closeDrawer}
+            onKeyDown={this.closeDrawer}>
+            <List>
+              <ListItem button>
+                <ListItemIcon>
+                  <DashboardIcon />
+                </ListItemIcon>
+                <ListItemText primary="Dashboard" />
+              </ListItem>
+              <ListItem button>
+                <ListItemIcon>
+                  <BarChartIcon />
+                </ListItemIcon>
+                <ListItemText primary="Reports" />
+              </ListItem>
+            </List>
+            <Divider />
+            <List>
+              <ListItem button>
+                <ListItemIcon>
+                  <SettingsIcon />
+                </ListItemIcon>
+                <ListItemText primary="Settings" />
+              </ListItem>
+            </List>
+          </div>
+        </Drawer>
+      </Fragment>
     );
   }
 }