NavBar.tsx

import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Tabs, Tab } from '@material-ui/core';
import HomeIcon from '@material-ui/icons/Home';
import ImportContactsIcon from '@material-ui/icons/ImportContacts';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
import { AuthRoutes } from 'api/routes';
import { useHistory } from 'react-router-dom';

const useStyles = makeStyles(() => ({
  tabs: {
    color: 'white',
    paddingLeft: '25px',
    paddingRight: '25px',
    paddingTop: '8px',
    paddingBottom: '35px',
    width: '100%',
    flexWrap: 'wrap',
  },
  tabPan: {
    paddingLeft: '56px',
    paddingRight: '56px',
  },
  tabIcon: {
    paddingRight: '10px',
    fontSize: '38px',
  },
  rightAlign: {
    marginLeft: 'auto',
  },
}));

export const NavBar: FC = () => {
  const history = useHistory();
  const classes = useStyles();

  const [value, setValue] = React.useState<string>('');

  const handleChange = (
    event: React.ChangeEvent<unknown>,
    newValue: string,
  ): void => {
    setValue(newValue);
    history.replace(newValue);
  };

  return (
    <Tabs
      variant="scrollable"
      scrollButtons="on"
      onChange={handleChange}
      value={value}
      className={classes.tabs}
      TabIndicatorProps={{ style: { display: 'none' } }}
    >
      <Tab
        label="HomePage"
        value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
        icon={<HomeIcon className={classes.tabIcon} />}
        className={classes.tabPan}
      />
      <Tab
        label="Reservation"
        value={`${AuthRoutes.dashboard}${AuthRoutes.reservation}`}
        icon={<ImportContactsIcon className={classes.tabIcon} />}
        className={`${classes.tabPan} ${classes.rightAlign}`}
      />
      <Tab
        label="Profile"
        value={`${AuthRoutes.dashboard}${AuthRoutes.profile}`}
        className={classes.tabPan}
        icon={<AccountCircleIcon className={classes.tabIcon} />}
      />
    </Tabs>
  );
};