diff options
author | Anton Tananaev <anton@traccar.org> | 2022-05-01 20:29:10 -0700 |
---|---|---|
committer | Anton Tananaev <anton@traccar.org> | 2022-05-01 20:29:10 -0700 |
commit | d3bd766cbc81f51c9b13b82d0ca92ae819561ea8 (patch) | |
tree | 7f76d29ead2628b0d3c67ae8e0715b9666b30136 /modern/src/components/BottomMenu.js | |
parent | d01f563d3909582acbcfd4fe20fa271ee224aba3 (diff) | |
download | trackermap-web-d3bd766cbc81f51c9b13b82d0ca92ae819561ea8.tar.gz trackermap-web-d3bd766cbc81f51c9b13b82d0ca92ae819561ea8.tar.bz2 trackermap-web-d3bd766cbc81f51c9b13b82d0ca92ae819561ea8.zip |
Global mobile bottom menu
Diffstat (limited to 'modern/src/components/BottomMenu.js')
-rw-r--r-- | modern/src/components/BottomMenu.js | 51 |
1 files changed, 30 insertions, 21 deletions
diff --git a/modern/src/components/BottomMenu.js b/modern/src/components/BottomMenu.js index c43cfb96..672c969a 100644 --- a/modern/src/components/BottomMenu.js +++ b/modern/src/components/BottomMenu.js @@ -1,8 +1,8 @@ import React, { useState } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { useHistory } from 'react-router-dom'; +import { useHistory, useLocation } from 'react-router-dom'; import { - makeStyles, Paper, BottomNavigation, BottomNavigationAction, Menu, MenuItem, Typography, + Paper, BottomNavigation, BottomNavigationAction, Menu, MenuItem, Typography, } from '@material-ui/core'; import DescriptionIcon from '@material-ui/icons/Description'; @@ -13,23 +13,9 @@ import PersonIcon from '@material-ui/icons/Person'; import { sessionActions } from '../store'; import { useTranslation } from '../LocalizationProvider'; -const useStyles = makeStyles((theme) => ({ - container: { - bottom: theme.spacing(0), - left: '0px', - width: '100%', - position: 'fixed', - [theme.breakpoints.up('lg')]: { - left: theme.spacing(1.5), - bottom: theme.spacing(1.5), - width: theme.dimensions.drawerWidthDesktop, - }, - }, -})); - const BottomMenu = () => { - const classes = useStyles(); const history = useHistory(); + const location = useLocation(); const dispatch = useDispatch(); const t = useTranslation(); @@ -37,8 +23,25 @@ const BottomMenu = () => { const [anchorEl, setAnchorEl] = useState(null); - const handleSelection = async (event, value) => { + const currentSelection = () => { + if (location.pathname.startsWith('/user')) { + return 3; + } else if (location.pathname.startsWith('/settings')) { + return 2; + } else if (location.pathname.startsWith('/reports')) { + return 1; + } else if (location.pathname === '/') { + return 0; + } else { + return null; + } + } + + const handleSelection = (event, value) => { switch (value) { + case 0: + history.push('/'); + break; case 1: history.push('/reports/route'); break; @@ -53,22 +56,28 @@ const BottomMenu = () => { } }; + const handleAccount = () => { + setAnchorEl(null); + history.push(`/user/${userId}`); + }; + const handleLogout = async () => { + setAnchorEl(null); await fetch('/api/session', { method: 'DELETE' }); history.push('/login'); dispatch(sessionActions.updateUser(null)); }; return ( - <Paper square elevation={3} className={classes.container}> - <BottomNavigation value={0} onChange={handleSelection} showLabels> + <Paper square elevation={3}> + <BottomNavigation value={currentSelection()} onChange={handleSelection} showLabels> <BottomNavigationAction label={t('mapTitle')} icon={<MapIcon />} /> <BottomNavigationAction label={t('reportTitle')} icon={<DescriptionIcon />} /> <BottomNavigationAction label={t('settingsTitle')} icon={<SettingsIcon />} /> <BottomNavigationAction label={t('settingsUser')} icon={<PersonIcon />} /> </BottomNavigation> <Menu anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}> - <MenuItem onClick={() => history.push(`/user/${userId}`)}> + <MenuItem onClick={handleAccount}> <Typography color="textPrimary">{t('settingsUser')}</Typography> </MenuItem> <MenuItem onClick={handleLogout}> |