text: const drawerWidth = 280;
  export const styles = theme => ({
      appBar: {
          transition: theme.transitions.create(['margin', 'width'], {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.leavingScreen,
          }),
      },
      menuButton: {
          marginLeft: 0,
          marginRight: 12,
      },
      hide: {
          display: 'none',
      },
      drawer: {
          width: drawerWidth,
          flexShrink: 0,
      },
      drawerPaper: {
          width: drawerWidth,
      },
      drawerHeader: {
          display: 'flex',
          alignItems: 'center',
          padding: '0 8px',
          ...theme.mixins.toolbar,
          justifyContent: 'flex-start',
      },
      content: {
          padding:0,
          transition: theme.transitions.create('margin', {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.leavingScreen,
          }),
          marginLeft: 0,
      },
      contentShift: {
          transition: theme.transitions.create('margin', {
              easing: theme.transitions.easing.easeOut,
              duration: theme.transitions.duration.enteringScreen,
          }),
          marginLeft: drawerWidth,
      },
      icon: {
          fontSize: 20,
      },
  });
  