Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- export default withStyles(DashboardLayout.styles)(DashboardLayout);
- import PropTypes from 'prop-types';
- import classNames from 'classnames';
- import { withStyles } from '@material-ui/core/styles';
- import CssBaseline from '@material-ui/core/CssBaseline';
- import Drawer from '@material-ui/core/Drawer';
- 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 Badge from '@material-ui/core/Badge';
- import MenuIcon from '@material-ui/icons/Menu';
- import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
- import NotificationsIcon from '@material-ui/icons/Notifications';
- import { mainListItems, secondaryListItems } from './listItems';
- const drawerWidth = 240;
- const styles = theme => ({
- root: {
- display: 'flex',
- },
- toolbar: {
- paddingRight: 24, // keep right padding when drawer closed
- },
- toolbarIcon: {
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'flex-end',
- padding: '0 8px',
- ...theme.mixins.toolbar,
- },
- appBar: {
- zIndex: theme.zIndex.drawer + 1,
- transition: theme.transitions.create(['width', 'margin'], {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.leavingScreen,
- }),
- },
- appBarShift: {
- marginLeft: drawerWidth,
- width: `calc(100% - ${drawerWidth}px)`,
- transition: theme.transitions.create(['width', 'margin'], {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.enteringScreen,
- }),
- },
- menuButton: {
- marginLeft: 12,
- marginRight: 36,
- },
- menuButtonHidden: {
- display: 'none',
- },
- title: {
- flexGrow: 1,
- },
- drawerPaper: {
- position: 'relative',
- whiteSpace: 'nowrap',
- width: drawerWidth,
- transition: theme.transitions.create('width', {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.enteringScreen,
- }),
- },
- drawerPaperClose: {
- overflowX: 'hidden',
- transition: theme.transitions.create('width', {
- easing: theme.transitions.easing.sharp,
- duration: theme.transitions.duration.leavingScreen,
- }),
- width: theme.spacing.unit * 7,
- [theme.breakpoints.up('sm')]: {
- width: theme.spacing.unit * 9,
- },
- },
- appBarSpacer: theme.mixins.toolbar,
- content: {
- flexGrow: 1,
- padding: theme.spacing.unit * 3,
- height: '100vh',
- overflow: 'auto',
- },
- chartContainer: {
- marginLeft: -22,
- },
- tableContainer: {
- height: 320,
- },
- h5: {
- marginBottom: theme.spacing.unit * 2,
- },
- });
- class DashboardLayout extends React.Component {
- state = {
- open: true,
- };
- handleDrawerToggle = () => {
- this.setState({ open: !this.state.open });
- };
- render() {
- const { classes, children } = this.props;
- return (
- <div className={classes.root}>
- <CssBaseline />
- <AppBar
- position="absolute"
- className={classNames(classes.appBar, this.state.open && classes.appBarShift)}
- >
- <Toolbar disableGutters={!this.state.open} className={classes.toolbar}>
- <IconButton
- color="inherit"
- aria-label="Open drawer"
- onClick={this.handleDrawerToggle}
- className={classNames(
- classes.menuButton,
- this.state.open && classes.menuButtonHidden,
- )}
- >
- <MenuIcon />
- </IconButton>
- <Typography
- component="h1"
- variant="h6"
- color="inherit"
- noWrap
- className={classes.title}
- >
- Dashboard
- </Typography>
- <IconButton color="inherit">
- <Badge badgeContent={4} color="secondary">
- <NotificationsIcon />
- </Badge>
- </IconButton>
- </Toolbar>
- </AppBar>
- <Drawer
- variant="permanent"
- classes={{
- paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
- }}
- open={this.state.open}
- >
- <div className={classes.toolbarIcon}>
- <IconButton onClick={this.handleDrawerToggle}>
- <ChevronLeftIcon />
- </IconButton>
- </div>
- <Divider />
- <List>{mainListItems}</List>
- <Divider />
- </Drawer>
- <main className={classes.content}>
- { this.props.children }
- <div> Children </div>
- </main>
- </div>
- );
- }
- }
- DashboardLayout.propTypes = {
- classes: PropTypes.object.isRequired,
- };
- export default withStyles(styles)(DashboardLayout);
- const theme = createMuiTheme({
- drawerWidth: 200
- });
- function Root() {
- return (
- <MuiThemeProvider theme={theme}>
- <App/>
- </MuiThemeProvider>
- );
- }
- // your appbar's own style
- const styles = theme => ({
- appBar: {
- width: `calc(100% - ${theme.drawerWidth}px)`,
- marginLeft: theme.drawerWidth
- }
- })
- // your drawer's own style
- const styles = theme => ({
- drawer: {
- width: theme.drawerWidth,
- flexShrink: 0
- },
- drawerPaper: {
- width: theme.drawerWidth
- }
- })
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement