text: import React from 'react';
  import { withStyles, CssBaseline } from '@material-ui/core';
  import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';
  import classnames from 'classnames';
  
  import Header from '../Header';
  import Sidebar from '../Sidebar';
  
  // pages
  import Dashboard from '../../pages/dashboard';
  import Files from '../../pages/files';
  import Users from '../../pages/users';
  
  const Layout = ({ classes, isSidebarOpened, toggleSidebar }) => (
    <div className={classes.root}>
      <CssBaseline />
      <BrowserRouter>
        <React.Fragment>
          <Header />
          <Sidebar />
          <div className={classnames(classes.content, { [classes.contentShift]: isSidebarOpened })}>
            <div className={classes.fakeToolbar} />
            <Switch>
              <Route path="/app/users" component={Users} />
              {/*<Route path="/app/dashboard" component={Dashboard} />*/}
              <Route path="/app/dashboard" render={() => <Redirect to="/app/files" />} />
              <Route path="/app/files" component={Files} />
            </Switch>
          </div>
        </React.Fragment>
      </BrowserRouter>
    </div>
  );
  
  const styles = theme => ({
    root: {
      display: 'flex',
      maxWidth: '100vw',
      overflowX: 'hidden',
    },
    content: {
      flexGrow: 1,
      padding: theme.spacing.unit * 3,
      width: `calc(100vw - 240px)`,
      minHeight: '100vh',
    },
    contentShift: {
      width: `calc(100vw - ${240 + theme.spacing.unit * 6}px)`,
      transition: theme.transitions.create(['width', 'margin'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.enteringScreen,
      }),
    },
    fakeToolbar: {
      ...theme.mixins.toolbar,
    }
  });
  
  export default withStyles(styles)(Layout);
  