text: import React from 'react';
  import {useDispatch} from 'react-redux';
  import {Link, useHistory} from 'react-router-dom';
  import {
      makeStyles, Paper, Toolbar, IconButton, useMediaQuery, useTheme,
  } from '@material-ui/core';
  import ReplayIcon from '@material-ui/icons/Replay';
  import DescriptionIcon from '@material-ui/icons/Description';
  import SettingsIcon from '@material-ui/icons/Settings';
  import {sessionActions} from '../store';
  import t from '../common/localization';
  import {GroupWorkOutlined, VerifiedUser} from "@material-ui/icons";
  import ExploreIcon from '@material-ui/icons/Explore';
  import BarChartIcon from "@material-ui/icons/BarChart";
  import NotificationsIcon from "@material-ui/icons/Notifications";
  import PeopleIcon from "@material-ui/icons/People";
  
  const useStyles = makeStyles((theme) => ({
      container: {
          bottom: theme.spacing(0),
          left: '100px',
          position: 'fixed',
          zIndex: 1301,
          [theme.breakpoints.up('lg')]: {
              left: theme.spacing(1.5),
              bottom: theme.spacing(1.5),
              width: '360px',
          },
      },
      paper: {
          borderRadius: '0px',
      },
      toolbar: {
          padding: theme.spacing(0, 2),
          display: 'flex',
          justifyContent: 'space-around',
          margin: 'auto',
      },
      navItem: {
          display: 'flex',
          flexDirection: 'column',
          fontSize: '0.75rem',
          fontWeight: 'normal',
      },
  }));
  
  const BottomNav = ({showOnDesktop}) => {
      const classes = useStyles();
      const theme = useTheme();
      const history = useHistory();
  
      const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
      const dispatch = useDispatch();
  
      const NavLink = ({children, location}) => (
          <IconButton component={Link} classes={{label: classes.navItem}} to={location}>
              {children}
          </IconButton>
      );
  
      if (isDesktop && !showOnDesktop) return null;
  
      return (
          <div className={classes.container}>
              <Paper className={classes.paper} elevation={3}>
                  <Toolbar className={classes.toolbar} disableGutters>
                      <div>
                          <NavLink location="/reports/route">
                              <DescriptionIcon/>
                              Báo cáo
                          </NavLink>
  
                          <NavLink location="/">
                              <BarChartIcon/>
                              Biểu đồ
                          </NavLink>
  
                          <NavLink location="/heatmap">
                              <ExploreIcon/>
                              Bản đồ heatmap
                          </NavLink>
  
                          <NavLink location="/replay">
                              <ReplayIcon/>
                              Lộ trình
                          </NavLink>
  
                          <NavLink location="/geofences">
                              <GroupWorkOutlined/>
                              Giới hạn
                          </NavLink>
  
                          <NavLink location="/settings/notifications">
                              <NotificationsIcon/>
                              Thông báo
                          </NavLink>
  
                          <NavLink location="/admin/server">
                              <VerifiedUser/>
                              Cấp quyền
                          </NavLink>
  
                          <NavLink location="/admin/users">
                              <PeopleIcon/>
                              Người dùng
                          </NavLink>
                      </div>
                  </Toolbar>
              </Paper>
          </div>
      );
  };
  
  export default BottomNav;
  