1 files changed, 123 insertions, 0 deletions
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
new file mode 100644
index 00000000..6e2e4d6d
--- /dev/null
+++ b/modern/src/MainToolbar.js
@@ -0,0 +1,123 @@
+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';
+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 = theme => ({
+  flex: {
+    flexGrow: 1
+  },
+  appBar: {
+    zIndex: theme.zIndex.drawer + 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"
+    }).then(response => {
+      if (response.ok) {
+        this.props.history.push('/login');
+      }
+    });
+  }
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <Fragment>
+        <AppBar position="static" className={classes.appBar}>
+          <Toolbar>
+            <IconButton
+              className={classes.menuButton}
+              color="inherit"
+              onClick={this.openDrawer}>
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="h6" 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 disabled>
+                <ListItemIcon>
+                  <BarChartIcon />
+                </ListItemIcon>
+                <ListItemText primary="Reports" />
+              </ListItem>
+            </List>
+            <Divider />
+            <List>
+              <ListItem button disabled>
+                <ListItemIcon>
+                  <SettingsIcon />
+                </ListItemIcon>
+                <ListItemText primary="Settings" />
+              </ListItem>
+            </List>
+          </div>
+        </Drawer>
+      </Fragment>
+    );
+  }
+}
+
+export default withStyles(styles)(MainToobar);