import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import withWidth, {MEDIUM, LARGE} from 'material-ui/utils/withWidth'
import React from 'react'
import AppBar from '../component/AppBar'
import SideDrawer from '../component/SideDrawer'
import LoginFrame from '../component/LoginFrame'
import AlertFrame from '../component/AlertFrame'

class App extends React.Component {

  getStyles(width) {
    const styles = {
      root: {
        minHeight: '400px',
        paddingTop: '64px',
      },
      content: {
        margin: '24px',
      }
    }
    if (width >= MEDIUM) {
      styles.content.margin = '48px 72px'
    }
    if (width >= LARGE) {
      styles.root.paddingLeft = '256px'
    }
    return styles
  }

  render() {
    const {children, width} = this.props
    const styles = this.getStyles(width)
    const isDocked = width >= LARGE
    return (
      <MuiThemeProvider>
        <div className="app__page">
          <div className="app__header">
            <AppBar/>
            <SideDrawer isDocked={isDocked}/>
            <AlertFrame/>
            <LoginFrame/>
          </div>
          <div className="app__root" style={styles.root}>
            <div className="app__content" style={styles.content}>
              {children}
            </div>
          </div>
        </div>
      </MuiThemeProvider>
    )
  }

}

export default withWidth()(App)

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import withWidth, {MEDIUM, LARGE} from 'material-ui/utils/withWidth'
import React from 'react'
import AppBar from '../component/AppBar'
import SideDrawer from '../component/SideDrawer'
import LoginFrame from '../component/LoginFrame'
import AlertFrame from '../component/AlertFrame'

function App({width, children}) {
  const contentStyle = {
    minHeight: '400px',
    paddingTop: '64px',
    paddingLeft: width < LARGE ? 0 : '256px',
    margin: width < MEDIUM ? '24px' : '48px 72px',
  }
  return (
    <MuiThemeProvider>
      <div id="app">
        <div id="header">
          <AppBar/>
          <SideDrawer isDocked={width >= LARGE}/>
          <AlertFrame/>
          <LoginFrame/>
        </div>
        <div id="content" style={contentStyle}>
          {children}
        </div>
      </div>
    </MuiThemeProvider>
  )
}

export default withWidth()(App)

update App.js