import React, { Component } from 'react'
import Topbar from './Topbar'
import Sidebar from './Sidebar'
import { withStyles } from 'material-ui/styles'

const styles = theme => ({
    root: {
        flexGrow: 1,
        zIndex: 1,
        overflow: 'hidden',
        position: 'relative',
        display: 'flex'
    },
    content: {
        flexGrow: 1,
        backgroundColor: theme.palette.background.default,
        padding: theme.spacing.unit * 3,
        minWidth: 0
    }
})

class Base extends Component {
    render() {
        const { classes } = this.props

        return (
            <div className={classes.root}>
                <Topbar />
                <Sidebar />
                <main className={classes.content}>
                    {this.props.children}
                </main>
            </div>
        )
    }
}

export default withStyles(styles)(Base)