NavBar.tsx

import React, { FC } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Tabs, Tab, Grid, Hidden } 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',
  },
  tabsSmall: {
    color: 'white',
    paddingLeft: '1.2em',
    paddingRight: '1em',
    paddingTop: '0.9em',
    paddingBottom: '2em',
    width: '100%',
  },
  tabIconSmall: {
    fontSize: '2.4em',
  },
  tabPanSmall: {
    paddingLeft: '2em',
    paddingRight: '2em',
  },
}));

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 (
    <div>
      <Hidden smDown>
        <Tabs
          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>
      </Hidden>

      <Hidden mdUp>
        <Tabs
          onChange={handleChange}
          value={value}
          className={classes.tabsSmall}
          TabIndicatorProps={{ style: { display: 'none' } }}
          centered
        >
          <Tab
            label=""
            value={`${AuthRoutes.dashboard}${AuthRoutes.home}`}
            icon={<HomeIcon className={classes.tabIconSmall} />}
            className={classes.tabPanSmall}
          />

          <Tab
            label=""
            value={`${AuthRoutes.dashboard}${AuthRoutes.reservation}`}
            icon={<ImportContactsIcon className={classes.tabIconSmall} />}
            className={classes.tabPanSmall}
          />
          <Tab
            label=""
            value={`${AuthRoutes.dashboard}${AuthRoutes.profile}`}
            icon={<AccountCircleIcon className={classes.tabIconSmall} />}
            className={classes.tabPanSmall}
          />
        </Tabs>
      </Hidden>
    </div>
  );
};