147 lines
4.1 KiB
JavaScript
147 lines
4.1 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Link } from 'react-router-dom'
|
|
import PropTypes from 'prop-types';
|
|
import AppBar from '@material-ui/core/AppBar';
|
|
import CssBaseline from '@material-ui/core/CssBaseline';
|
|
import Divider from '@material-ui/core/Divider';
|
|
import Drawer from '@material-ui/core/Drawer';
|
|
import Hidden from '@material-ui/core/Hidden';
|
|
import IconButton from '@material-ui/core/IconButton';
|
|
import List from '@material-ui/core/List';
|
|
import ListItem from '@material-ui/core/ListItem';
|
|
import ListItemText from '@material-ui/core/ListItemText';
|
|
import MenuIcon from '@material-ui/icons/Menu';
|
|
import Toolbar from '@material-ui/core/Toolbar';
|
|
import Typography from '@material-ui/core/Typography';
|
|
import { withStyles } from '@material-ui/core/styles';
|
|
import matrixLogo from '../../images/matrix-logo.svg';
|
|
|
|
const drawerWidth = 180;
|
|
|
|
const styles = theme => ({
|
|
root: {
|
|
display: 'flex',
|
|
},
|
|
drawer: {
|
|
[theme.breakpoints.up('sm')]: {
|
|
width: drawerWidth,
|
|
flexShrink: 0,
|
|
},
|
|
},
|
|
appBar: {
|
|
marginLeft: drawerWidth,
|
|
[theme.breakpoints.up('sm')]: {
|
|
width: `calc(100% - ${drawerWidth}px)`,
|
|
},
|
|
},
|
|
menuButton: {
|
|
marginRight: 20,
|
|
[theme.breakpoints.up('sm')]: {
|
|
display: 'none',
|
|
},
|
|
},
|
|
toolbar: theme.mixins.toolbar,
|
|
drawerPaper: {
|
|
width: drawerWidth,
|
|
},
|
|
content: {
|
|
flexGrow: 1,
|
|
padding: theme.spacing(3),
|
|
},
|
|
});
|
|
|
|
class Layout extends Component {
|
|
static propTypes = {
|
|
children: PropTypes.node,
|
|
classes: PropTypes.object.isRequired,
|
|
theme: PropTypes.object.isRequired,
|
|
};
|
|
|
|
state = {
|
|
mobileOpen: false,
|
|
};
|
|
|
|
handleDrawerToggle = () => {
|
|
this.setState(state => ({ mobileOpen: !state.mobileOpen }));
|
|
};
|
|
|
|
render() {
|
|
const { classes, theme } = this.props;
|
|
const { pathname } = this.props.location;
|
|
|
|
const drawer = (
|
|
<div>
|
|
<div className={classes.toolbar}>
|
|
<img src={matrixLogo} className="drawer-logo" alt="logo" />
|
|
</div>
|
|
<Divider />
|
|
<List>
|
|
<ListItem button key="Users" selected={pathname === "/user-admin"}
|
|
component={Link} to="/user-admin">
|
|
<ListItemText primary="Users" />
|
|
</ListItem>
|
|
<ListItem button key="Rooms" selected={pathname === "/room-admin"}
|
|
component={Link} to="/room-admin">
|
|
<ListItemText primary="Rooms" />
|
|
</ListItem>
|
|
</List>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<CssBaseline />
|
|
<AppBar position="fixed" className={classes.appBar}>
|
|
<Toolbar>
|
|
<IconButton
|
|
color="inherit"
|
|
aria-label="Open drawer"
|
|
onClick={this.handleDrawerToggle}
|
|
className={classes.menuButton}
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
<Typography variant="h6" color="inherit" noWrap>
|
|
Synapse admin
|
|
</Typography>
|
|
</Toolbar>
|
|
</AppBar>
|
|
<nav className={classes.drawer}>
|
|
{/* The implementation can be swapped with js to avoid SEO duplication of links. */}
|
|
<Hidden smUp implementation="css">
|
|
<Drawer
|
|
container={this.props.container}
|
|
variant="temporary"
|
|
anchor={theme.direction === 'rtl' ? 'right' : 'left'}
|
|
open={this.state.mobileOpen}
|
|
onClose={this.handleDrawerToggle}
|
|
classes={{
|
|
paper: classes.drawerPaper,
|
|
}}
|
|
>
|
|
{drawer}
|
|
</Drawer>
|
|
</Hidden>
|
|
<Hidden xsDown implementation="css">
|
|
<Drawer
|
|
variant="permanent"
|
|
open
|
|
classes={{
|
|
paper: classes.drawerPaper,
|
|
}}
|
|
>
|
|
{drawer}
|
|
</Drawer>
|
|
</Hidden>
|
|
</nav>
|
|
<main className={classes.content}>
|
|
<div className={classes.toolbar} />
|
|
{this.props.children}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles, { withTheme: true })(Layout);
|