index.tsx

import {
  BottomNavigation,
  BottomNavigationAction,
  Hidden,
} from '@material-ui/core';
import Drawer from '../../../../src/app/Drawer';
import * as routes from '../../../app/routes';
import { useTranslation } from 'react-i18next';
import { useStyles } from './styles';
import { useHistory } from 'react-router-dom';
// ...

const DRAWER_ROUTE = 'drawer';

type Props = {
  pathname: string;
};

const BottomNavigationMenu = (props: Props) => {
  const history = useHistory();
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const classes = useStyles();
  const { t } = useTranslation();

  const HomeIcon =
    props.pathname === routes.home
      ? BottomNavHomeFocused
      : BottomNavHome;

  // ...
  // the same approach for each icon

  const handleChange = (_: React.ChangeEvent<unknown>, routePath: string) => {
    if (routePath !== DRAWER_ROUTE) {
      history.push(routePath);
    } else {
      setIsDrawerOpen(true);
    }
  };

  return (
    <Hidden lgUp>
      <BottomNavigation
        value={props.pathname}
        onChange={handleChange}
        showLabels
      >
        <BottomNavigationAction
          label={
            <Typography
              className={clsx(
                classes.bottomNavLabel,
                props.pathname === routes.home
                  ? classes.bottomNavLabelSelected
                  : {}
              )}
            >
              {t('home')}
            </Typography>
          }
          value={routes.community}
          icon={<HomeIcon className={classes.icon} />}
          id="homeTab"
        />
        
        // ...
        // the same goes for each other basic nav page
        // ...
        
        // the drawer one is a bit different, though:
        <BottomNavigationAction
          label={
            <Typography className={classes.bottomNavLabel}>
              {t('more')}
            </Typography>
          }
          value={DRAWER_ROUTE}
          icon={<BottomNavMore className={classes.icon} />}
          className={classes.bottomNavAction}
          id="moreTab"
        />
      </BottomNavigation>
      <Drawer open={isDrawerOpen} onClose={() => setIsDrawerOpen(false)} />
    </Hidden>
  );
};

export default BottomNavigationMenu;