liquid-funding/app/components/MainCointainer.jsx

212 lines
6.2 KiB
JavaScript

import React from 'react';
import { HashRouter as Router, Route, Link, Switch } from 'react-router-dom'
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import CssBaseline from '@material-ui/core/CssBaseline';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import FundsManagement from './FundsManagement'
import ContractAdmin from './ContractAdmin'
import TransferGraph from './TransfersGraph'
import Dashboard from './Dashboard'
const drawerWidth = 240
const styles = theme => ({
root: {
display: 'flex',
},
appBar: {
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
},
appBarBg: {
backgroundColor: '#111735'
},
childrenShift: {
width: `calc(100% - ${drawerWidth}px)`
},
menuButton: {
marginLeft: 12,
marginRight: 20,
},
hide: {
display: 'none',
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
drawerHeader: {
display: 'flex',
alignItems: 'center',
padding: '0 8px',
...theme.mixins.toolbar,
justifyContent: 'flex-end',
},
content: {
flexGrow: 1,
padding: theme.spacing.unit * 3,
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
marginLeft: -drawerWidth,
},
contentShift: {
transition: theme.transitions.create('margin', {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
marginLeft: 0,
},
link: {
textDecoration: 'none'
}
});
class PersistentDrawerLeft extends React.Component {
state = {
open: false,
};
handleDrawerOpen = () => {
this.setState({ open: true })
};
handleDrawerClose = () => {
this.setState({ open: false })
};
render() {
const { classes, theme } = this.props
const { open } = this.state
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
position="fixed"
className={classNames(classes.appBar, classes.appBarBg, {
[classes.appBarShift]: open,
})}
>
<Toolbar disableGutters={!open}>
<IconButton
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerOpen}
className={classNames(classes.menuButton, open && classes.hide)}
>
<MenuIcon />
</IconButton>
<Typography variant="h6" color="inherit" noWrap>
Liquid Funding
</Typography>
</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant="persistent"
anchor="left"
open={open}
classes={{
paper: classes.drawerPaper,
}}
>
<div className={classes.drawerHeader}>
<IconButton onClick={this.handleDrawerClose}>
{theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
</IconButton>
</div>
<Divider />
<List>
<Link to="/dashboard" className={classes.link}>
<ListItem button>
<ListItemIcon><InboxIcon /></ListItemIcon>
<ListItemText primary="Dashboard" />
</ListItem>
</Link>
</List>
<List>
<Link to="/funds-management/" className={classes.link}>
<ListItem button>
<ListItemIcon><InboxIcon /></ListItemIcon>
<ListItemText primary="Funds Management" />
</ListItem>
</Link>
</List>
<List>
<Link to="/insights/" className={classes.link}>
<ListItem button>
<ListItemIcon><InboxIcon /></ListItemIcon>
<ListItemText primary="Insights" />
</ListItem>
</Link>
</List>
<List>
<Link to="/admin/" className={classes.link}>
<ListItem button>
<ListItemIcon><InboxIcon /></ListItemIcon>
<ListItemText primary="Contract Admin" />
</ListItem>
</Link>
</List>
<Divider />
</Drawer>
<main
className={classNames(classes.content, {
[classes.contentShift]: open,
})}
>
<div className={classes.drawerHeader} />
<div className={classNames(classes.appBar, {
[classes.childrenShift]: open,
})}>
<Switch>
<Route path="/(|dashboard)" component={Dashboard} />
<Route path="/admin" component={ContractAdmin} />
<Route path="/funds-management" render={() => <FundsManagement open={open} />} />
<Route path="/insights" component={TransferGraph} />
</Switch>
{this.props.children}
</div>
</main>
</div>
);
}
}
PersistentDrawerLeft.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
};
export default withStyles(styles, { withTheme: true })(PersistentDrawerLeft)