text: import React from 'react';
  import PropTypes from 'prop-types';
  import classNames from 'classnames';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  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 Typography from '@material-ui/core/Typography';
  import IconButton from '@material-ui/core/IconButton';
  import MenuIcon from '@material-ui/icons/Menu';
  import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
  import Divider from '@material-ui/core/Divider';
  import Step from './Step';
  import Menu from '../../Menu';
  
  
  
  const drawerWidth = 220;
  
  
  const styles = theme => ({
    root: {
      display: 'flex',
    },
    toolbar: {
      paddingRight: 24, 
      backgroundColor: '#5A9C30',
      minHeight: 48,
    },
    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',
      backgroundColor: '#DCDCDC',
      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 * 0,
      [theme.breakpoints.up('md')]: {
        width: theme.spacing.unit * 0,
      },
    },
    appBarSpacer: theme.mixins.toolbar,
    content: {
      flexGrow: 1,
      padding: theme.spacing.unit * 3,
      height: '100vh',
      overflow: 'auto',
    },
    chartContainer: {
      marginLeft: -22,
    },
    tableContainer: {
      height: 320,
    },
  });
  
  class Role extends React.Component {
    state = {
      open: true,
    };
  
    handleDrawerOpen = () => {
      this.setState({ open: true });
    };
  
    handleDrawerClose = () => {
      this.setState({ open: false });
    };
  
    render() {
      const { classes } = this.props;
  
      return (
        <MuiThemeProvider>
        <React.Fragment>
          <CssBaseline />
          <div className={classes.root}>
            <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="Responsive drawer"
                  onClick={this.handleDrawerOpen}
                  className={classNames(
                    classes.menuButton,
                    this.state.open && classes.menuButtonHidden,
                  )}
                >
                  <MenuIcon />
                </IconButton>
                <Typography variant="title" color="inherit" noWrap className={classes.title}>Role</Typography>
              </Toolbar>
            </AppBar>
            <Drawer
              variant="persistent"
              classes={{
                paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
              }}
              open={this.state.open}
            >
              <div className={classes.toolbarIcon} style={{minHeight:"48px"}}>
              {<img src={"https://i.ibb.co/6JbBSFq/logo.png"} width={100} height={100}/>}
                <IconButton onClick={this.handleDrawerClose}>
                  <ChevronLeftIcon />
                </IconButton>
              </div>
              <Divider />
              <Menu />
               </Drawer>
            <main className={classes.content}>
              <div className={classes.appBarSpacer} />
              <div className={classes.Step}><Step /></div>
            </main>
          </div>
        </React.Fragment>
        </MuiThemeProvider>
      );
    }
  }
  
  Role.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(Role);