diff options
| -rw-r--r-- | modern/src/MainToolbar.js | 94 |
1 files changed, 82 insertions, 12 deletions
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js index 0a21d945..1ba15509 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> ); } } |