{"size": 1576, "ext": "js", "max_stars_repo_path": "src/components/TopBar/TopBar.js", "max_stars_repo_name": "AlexSandr90/clone", "max_stars_repo_stars_event_min_datetime": "2020-10-04T19:45:04.000Z", "max_stars_repo_stars_event_max_datetime": "2021-12-25T07:03:04.000Z", "max_issues_repo_path": "src/components/TopBar/TopBar.js", "max_issues_repo_name": "AlexSandr90/clone", "max_issues_repo_issues_event_min_datetime": "2020-10-04T19:56:43.000Z", "max_issues_repo_issues_event_max_datetime": "2021-11-21T15:06:41.000Z", "max_forks_repo_path": "src/components/TopBar/TopBar.js", "max_forks_repo_name": "AlexSandr90/clone", "max_forks_repo_forks_event_min_datetime": "2021-02-20T18:42:08.000Z", "max_forks_repo_forks_event_max_datetime": "2021-12-06T00:07:58.000Z"}
{"max_stars_count": 16, "max_issues_count": 11, "max_forks_count": 5, "avg_line_length": 26.2666666667, "max_line_length": 119, "alphanum_fraction": 0.6046954315}
import clsx from 'clsx';
import { makeStyles, AppBar, Toolbar, Typography } from '@material-ui/core';
import AppIconButton from '../AppIconButton';

const useStyles = makeStyles((theme) => ({
  root: {
    //boxShadow: 'none',
    minWidth: '20rem',
  },
  toolbar: {
    paddingLeft: theme.spacing(1),
    paddingRight: theme.spacing(1),
  },
  logo: {
    height: theme.spacing(4),
  },
  title: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    flexGrow: 1,
    textAlign: 'center',
    whiteSpace: 'nowrap',
  },
  buttons: {},
}));

/**
 * Renders TopBar composition
 * @class TopBar
 */
const TopBar = ({ className, title = '', isAuthenticated, onMenu, onNotifications, ...restOfProps }) => {
  const classes = useStyles();
  // const iconMenu = isAuthenticated ? 'account' : 'menu';

  return (
    <AppBar {...restOfProps} className={clsx(classes.root, className)} component="div">
      <Toolbar className={classes.toolbar} disableGutters>
        <AppIconButton
          icon="logo"
          // color="primary"
          onClick={onMenu}
        />

        <Typography variant="h6" className={classes.title}>
          {title}
        </Typography>

        <div className={classes.buttons}>
          {isAuthenticated && (
            <AppIconButton icon="notifications" color="inherit" title="User Notifications" onClick={onNotifications} />
          )}
          {/* <AppIconButton icon={iconMenu} color="inherit" title="Open Menu" onClick={onMenu} /> */}
        </div>
      </Toolbar>
    </AppBar>
  );
};

export default TopBar;
