text: const drawerWidth = 240;
  
  const headerStyle = (theme) => ({
      root: {
          display: 'flex',
      },
      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: {
          marginRight: 8,
      },
      hide: {
          display: 'none',
      },
      drawer: {
          width: drawerWidth,
          flexShrink: 0,
          whiteSpace: 'nowrap',
      },
      drawerOpen: {
          width: drawerWidth,
          transition: theme.transitions.create('width', {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.enteringScreen,
          }),
      },
      drawerClose: {
          transition: theme.transitions.create('width', {
              easing: theme.transitions.easing.sharp,
              duration: theme.transitions.duration.leavingScreen,
          }),
          overflowX: 'hidden',
          width: 0,
          [theme.breakpoints.up('sm')]: {
              width: theme.spacing(7) + 1,
          },
      },
      toolbar: {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'flex-end',
          padding: theme.spacing(0, 1),
          // necessary for content to be below app bar
          ...theme.mixins.toolbar,
      },
      paper: {
          padding: theme.spacing(2),
          textAlign: 'center',
          color: theme.palette.text.secondary,
          height: '100%',
      },
      content: {
          flexGrow: 1,
          // display: 'flex',
          padding: theme.spacing(1),
      },
      logo: {
          maxWidth: '190px',
          marginRight: 'auto',
      },
      headerPadding: {
          height: 10,
      },
      container: {
          display: 'flex',
      },
      customColorProjectInfo: { background: '#7070e3' },
      customColorHackerChallenge: { background: '#5a78f0' },
      customColorHackerPool: { background: '#25b0e8' },
      iconInCards: {
          color: '#fff',
      },
      searchPaper: {
          padding: '2px 4px',
          display: 'flex',
          marginRight: '20px',
          marginTop: '10px',
          alignItems: 'center',
      },
      input: {
          marginLeft: theme.spacing(1),
          flex: 1,
      },
      iconButton: {
          padding: 10,
      },
      divider: {
          height: 28,
          margin: 4,
      },
      hideOnSmall: {
          [theme.breakpoints.down('xs')]: {
              display: 'none',
          },
      },
  });
  
  export default headerStyle;
  