NavBar.tsx

import React, { FC } from 'react';
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';
import { navBarStyle } from './NavBar.style';

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

  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>
  );
};