1import {useState, useEffect} from 'react';
  2import {useTheme} from '@mui/material/styles';
  3import {useRouter} from 'next/router';
  4import Toolbar from '@mui/material/Toolbar';
  5import Typography from '@mui/material/Typography';
  6import IconButton from '@mui/material/IconButton';
  7import Avatar from '@mui/material/Avatar';
  8import Icon from '@mui/material/Icon';
  9import AppBar from '@mui/material/AppBar';
 10import useProfile from '../../hooks/useProfile';
 11import GenericMenu from '../GenericMenu';
 12import {ActionType} from '../GenericMenu/Action';
 13
 14const GenericToolbar = ({
 15  title,
 16  actions = [],
 17  goBack = null,
 18}: {
 19  title: string;
 20  actions: Array<ActionType>;
 21  goBack: () => void | null;
 22}) => {
 23  const router = useRouter();
 24  const theme = useTheme();
 25  const [anchorEl, setAnchorEl] = useState(null);
 26
 27  const {profile, connected} = useProfile();
 28
 29  useEffect(() => {
 30    window.scrollTo(0, 0);
 31  }, []);
 32
 33  return (
 34    <AppBar
 35      position="static"
 36      color="primary"
 37      sx={{
 38        minHeight: theme.mixins.toolbar.minHeight,
 39        transition: 'height 0.3s ease',
 40        display: 'block',
 41        backgroundColor: '#242424',
 42        color: 'white',
 43      }}
 44      id="Menu"
 45    >
 46      <Toolbar sx={{display: 'flex', justifyContent: 'space-between'}}>
 47        {goBack && (
 48          <IconButton
 49            edge="start"
 50            sx={{color: theme.palette.common.white}}
 51            onClick={() =>
 52              router.basePath.split('/').length > 2
 53                ? router.back()
 54                : router.push('/dashboard')
 55            }
 56            size="large"
 57          >
 58            <Icon>arrow_back</Icon>
 59          </IconButton>
 60        )}
 61        <div sx={{flexGrow: 1, display: 'flex', alignItems: 'center'}}>
 62          <Typography variant="h6" noWrap id="MenuHeaderTitle">
 63            {title}
 64          </Typography>
 65        </div>
 66        {actions.length > 0 && (
 67          <>
 68            <IconButton
 69              color="inherit"
 70              edge="end"
 71              id="MenuMoreInfo"
 72              onClick={e => setAnchorEl(e.currentTarget)}
 73              size="large"
 74            >
 75              {connected && profile ? (
 76                <Avatar
 77                  sx={{
 78                    width: theme.spacing(3),
 79                    height: theme.spacing(3),
 80                    fontSize: 16,
 81                  }}
 82                >
 83                  {`${profile.username[0]}`.toUpperCase()}
 84                </Avatar>
 85              ) : (
 86                <Icon>more_vert</Icon>
 87              )}
 88            </IconButton>
 89
 90            <GenericMenu
 91              anchorEl={anchorEl}
 92              setAnchorEl={setAnchorEl}
 93              actions={[...actions, {divider: true}]}
 94            />
 95          </>
 96        )}
 97      </Toolbar>
 98    </AppBar>
 99  );
100};
101
102export default GenericToolbar;