Reimplement bottom navigation

4 files changed, 77 insertions, 117 deletions

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index ea32fb3..1935856 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -18,7 +18,7 @@ import AccuracyMap from './map/AccuracyMap';
 import GeofenceMap from './map/GeofenceMap';
 import CurrentPositionsMap from './map/CurrentPositionsMap';
 import CurrentLocationMap from './map/CurrentLocationMap';
-import BottomNav from './components/BottomNav';
+import BottomMenu from './components/BottomMenu';
 import { useTranslation } from './LocalizationProvider';
 
 const useStyles = makeStyles((theme) => ({
@@ -33,7 +33,7 @@ const useStyles = makeStyles((theme) => ({
     top: 0,
     margin: theme.spacing(1.5),
     width: theme.dimensions.drawerWidthDesktop,
-    bottom: theme.spacing(8),
+    bottom: 56,
     zIndex: 1301,
     transition: 'transform .5s ease',
     backgroundColor: 'white',
@@ -103,10 +103,7 @@ const MainPage = () => {
     setCollapsed(!collapsed);
   };
 
-  // Collapse sidebar for tablets and phones
-  useEffect(() => {
-    setCollapsed(isTablet);
-  }, [isTablet]);
+  useEffect(() => setCollapsed(isTablet), [isTablet]);
 
   return (
     <div className={classes.root}>
@@ -128,7 +125,7 @@ const MainPage = () => {
         <ListIcon />
         <div className={classes.sidebarToggleText}>{t('deviceTitle')}</div>
       </Button>
-      <Paper elevation={3} className={`${classes.sidebar} ${collapsed && classes.sidebarCollapsed}`}>
+      <Paper square elevation={3} className={`${classes.sidebar} ${collapsed && classes.sidebarCollapsed}`}>
         <Paper className={classes.paper} square elevation={3}>
           <Toolbar className={classes.toolbar} disableGutters>
             {isTablet && (
@@ -160,8 +157,7 @@ const MainPage = () => {
           <DevicesList />
         </div>
       </Paper>
-
-      <BottomNav showOnDesktop />
+      <BottomMenu />
     </div>
   );
 };
diff --git a/modern/src/components/BottomMenu.js b/modern/src/components/BottomMenu.js
new file mode 100644
index 0000000..610944f
--- /dev/null
+++ b/modern/src/components/BottomMenu.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import {
+  makeStyles, Paper, BottomNavigation, BottomNavigationAction,
+} from '@material-ui/core';
+
+import DescriptionIcon from '@material-ui/icons/Description';
+import ShuffleIcon from '@material-ui/icons/Shuffle';
+import MapIcon from '@material-ui/icons/Map';
+import LogoutIcon from '@material-ui/icons/ExitToApp';
+
+import { sessionActions } from '../store';
+import { useTranslation } from '../LocalizationProvider';
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    bottom: theme.spacing(0),
+    left: '0px',
+    width: '100%',
+    position: 'fixed',
+    zIndex: 1301,
+    [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 t = useTranslation();
+
+  const dispatch = useDispatch();
+
+  const handleSelection = async (_, value) => {
+    switch (value) {
+      case 1:
+        history.push('/reports/route');
+        break;
+      case 2:
+        history.push('/settings/notifications');
+        break;
+      case 3:
+        const response = await fetch('/api/session', { method: 'DELETE' });
+        if (response.ok) {
+          dispatch(sessionActions.updateUser(null));
+          history.push('/login');
+        }
+        break;
+    }
+  };
+
+  return (
+    <Paper square elevation={3} className={classes.container}>
+      <BottomNavigation
+        value={0}
+        onChange={handleSelection}
+        showLabels
+      >
+        <BottomNavigationAction label={t('mapTitle')} icon={<MapIcon />} />
+        <BottomNavigationAction label={t('reportTitle')} icon={<DescriptionIcon />} />
+        <BottomNavigationAction label={t('settingsTitle')} icon={<ShuffleIcon />} />
+        <BottomNavigationAction label={t('loginLogout')} icon={<LogoutIcon />} />
+      </BottomNavigation>
+    </Paper>
+  );
+};
+
+export default BottomMenu;
diff --git a/modern/src/components/BottomNav.js b/modern/src/components/BottomNav.js
deleted file mode 100644
index 3d1a675..0000000
--- a/modern/src/components/BottomNav.js
+++ /dev/null
@@ -1,107 +0,0 @@
-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 ShuffleIcon from '@material-ui/icons/Shuffle';
-import MapIcon from '@material-ui/icons/Map';
-import LogoutIcon from '@material-ui/icons/ExitToApp';
-
-import { sessionActions } from '../store';
-import { useTranslation } from '../LocalizationProvider';
-
-const useStyles = makeStyles((theme) => ({
-  container: {
-    bottom: theme.spacing(0),
-    left: '0px',
-    width: '100%',
-    position: 'fixed',
-    zIndex: 1301,
-    [theme.breakpoints.up('lg')]: {
-      left: theme.spacing(1.5),
-      bottom: theme.spacing(1.5),
-      width: theme.dimensions.drawerWidthDesktop,
-    },
-  },
-  toolbar: {
-    padding: theme.spacing(0, 2),
-    display: 'flex',
-    justifyContent: 'space-around',
-    maxWidth: theme.dimensions.bottomNavMaxWidth,
-    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 t = useTranslation();
-
-  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>
-  );
-
-  const handleLogout = async () => {
-    const response = await fetch('/api/session', { method: 'DELETE' });
-    if (response.ok) {
-      dispatch(sessionActions.updateUser(null));
-      history.push('/login');
-    }
-  };
-
-  if (isDesktop && !showOnDesktop) return null;
-
-  return (
-    <div className={classes.container}>
-      <Paper square elevation={3}>
-        <Toolbar className={classes.toolbar} disableGutters>
-
-          {isDesktop ? (
-            <NavLink location="/replay">
-              <ReplayIcon />
-              {t('reportReplay')}
-            </NavLink>
-          ) : (
-            <NavLink location="/">
-              <MapIcon />
-              {t('mapTitle')}
-            </NavLink>
-          )}
-
-          <NavLink location="/reports/route">
-            <DescriptionIcon />
-            {t('reportTitle')}
-          </NavLink>
-
-          <NavLink location="/settings/notifications">
-            <ShuffleIcon />
-            {t('settingsTitle')}
-          </NavLink>
-
-          <IconButton classes={{ label: classes.navItem }} onClick={handleLogout}>
-            <LogoutIcon />
-            {t('loginLogout')}
-          </IconButton>
-        </Toolbar>
-      </Paper>
-    </div>
-  );
-};
-
-export default BottomNav;
diff --git a/modern/src/theme/dimensions.js b/modern/src/theme/dimensions.js
index b6edc5e..fcdbaee 100644
--- a/modern/src/theme/dimensions.js
+++ b/modern/src/theme/dimensions.js
@@ -9,5 +9,4 @@ export default {
   columnWidthNumber: 130,
   columnWidthString: 160,
   columnWidthBoolean: 130,
-  bottomNavMaxWidth: '400px',
 };