From 98f2dd952e35e41045c7c9f925e229000bbe4797 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton@traccar.org>
Date: Sun, 8 May 2022 18:11:23 -0700
Subject: Migrate reports to page layout

---
 modern/src/common/components/BottomMenu.js      |   2 +-
 modern/src/common/components/PageLayout.js      |   2 +
 modern/src/reports/ChartReportPage.js           |   9 +-
 modern/src/reports/EventReportPage.js           |   8 +-
 modern/src/reports/RouteReportPage.js           |  23 ++--
 modern/src/reports/StatisticsPage.js            |  22 ++--
 modern/src/reports/StopReportPage.js            |   8 +-
 modern/src/reports/SummaryReportPage.js         |   8 +-
 modern/src/reports/TripReportPage.js            |   8 +-
 modern/src/reports/components/ReportFilter.js   |  11 +-
 modern/src/reports/components/ReportLayout.js   | 124 --------------------
 modern/src/reports/components/ReportsMenu.js    |  88 ++++++++++++++
 modern/src/settings/components/OptionsLayout.js | 148 ------------------------
 13 files changed, 150 insertions(+), 311 deletions(-)
 delete mode 100644 modern/src/reports/components/ReportLayout.js
 create mode 100644 modern/src/reports/components/ReportsMenu.js
 delete mode 100644 modern/src/settings/components/OptionsLayout.js

diff --git a/modern/src/common/components/BottomMenu.js b/modern/src/common/components/BottomMenu.js
index 048cb0d7..30960396 100644
--- a/modern/src/common/components/BottomMenu.js
+++ b/modern/src/common/components/BottomMenu.js
@@ -27,7 +27,7 @@ const BottomMenu = () => {
   const [anchorEl, setAnchorEl] = useState(null);
 
   const currentSelection = () => {
-    if (location.pathname.startsWith('/settings/user')) {
+    if (location.pathname === `/settings/user/${userId}`) {
       return 3;
     } if (location.pathname.startsWith('/settings')) {
       return 2;
diff --git a/modern/src/common/components/PageLayout.js b/modern/src/common/components/PageLayout.js
index e37ae4dc..a1f117c4 100644
--- a/modern/src/common/components/PageLayout.js
+++ b/modern/src/common/components/PageLayout.js
@@ -28,6 +28,8 @@ const useStyles = makeStyles((theme) => ({
     flexGrow: 1,
     alignItems: 'stretch',
     overflow: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
   },
 }));
 
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 70429ec5..4ddb5f75 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -2,13 +2,14 @@ import React, { useState } from 'react';
 import {
   Grid, FormControl, InputLabel, Select, MenuItem,
 } from '@material-ui/core';
-import ReportLayout from './components/ReportLayout';
 import ReportFilter from './components/ReportFilter';
 import Graph from './components/Graph';
 import { useAttributePreference } from '../common/util/preferences';
 import { formatDate } from '../common/util/formatter';
 import { speedFromKnots } from '../common/util/converter';
 import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import ReportsMenu from './components/ReportsMenu';
 
 const Filter = ({ children, setItems }) => {
   const speedUnit = useAttributePreference('speedUnit');
@@ -61,14 +62,12 @@ const ChartReportPage = () => {
   const [type, setType] = useState('speed');
 
   return (
-    <ReportLayout filter={(
+    <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportChart']}>
       <Filter setItems={setItems}>
         <ChartType type={type} setType={setType} />
       </Filter>
-    )}
-    >
       <Graph items={items} type={type} />
-    </ReportLayout>
+    </PageLayout>
   );
 };
 
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index bbd92d59..71ca08d9 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -7,9 +7,10 @@ import { useTheme } from '@material-ui/core/styles';
 import { useSelector } from 'react-redux';
 import { formatDate } from '../common/util/formatter';
 import ReportFilter from './components/ReportFilter';
-import ReportLayout from './components/ReportLayout';
 import { prefixString } from '../common/util/stringUtils';
 import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import ReportsMenu from './components/ReportsMenu';
 
 const Filter = ({ setItems }) => {
   const t = useTranslation();
@@ -106,14 +107,15 @@ const EventReportPage = () => {
   }];
 
   return (
-    <ReportLayout filter={<Filter setItems={setItems} />}>
+    <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportEvents']}>
+      <Filter setItems={setItems} />
       <DataGrid
         rows={items}
         columns={columns}
         hideFooter
         autoHeight
       />
-    </ReportLayout>
+    </PageLayout>
   );
 };
 
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 035f6acd..dfce525f 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -1,14 +1,14 @@
 import React, { useState } from 'react';
-import { Paper } from '@material-ui/core';
 import { DataGrid } from '@material-ui/data-grid';
 import { useTheme } from '@material-ui/core/styles';
 import {
   formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate,
 } from '../common/util/formatter';
 import ReportFilter from './components/ReportFilter';
-import ReportLayout from './components/ReportLayout';
 import { useAttributePreference, usePreference } from '../common/util/preferences';
 import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import ReportsMenu from './components/ReportsMenu';
 
 const Filter = ({ setItems }) => {
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
@@ -88,16 +88,15 @@ const RouteReportPage = () => {
   const [items, setItems] = useState([]);
 
   return (
-    <ReportLayout filter={<Filter setItems={setItems} />}>
-      <Paper>
-        <DataGrid
-          rows={items}
-          columns={columns}
-          hideFooter
-          autoHeight
-        />
-      </Paper>
-    </ReportLayout>
+    <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportRoute']}>
+      <Filter setItems={setItems} />
+      <DataGrid
+        rows={items}
+        columns={columns}
+        hideFooter
+        autoHeight
+      />
+    </PageLayout>
   );
 };
 
diff --git a/modern/src/reports/StatisticsPage.js b/modern/src/reports/StatisticsPage.js
index 4b0d9bfe..f04f6e43 100644
--- a/modern/src/reports/StatisticsPage.js
+++ b/modern/src/reports/StatisticsPage.js
@@ -1,13 +1,21 @@
 import React, { useState } from 'react';
 import {
-  FormControl, InputLabel, Select, MenuItem, TextField, Button, TableContainer, Table, TableRow, TableCell, TableHead, TableBody,
+  FormControl, InputLabel, Select, MenuItem, TextField, Button, TableContainer, Table, TableRow, TableCell, TableHead, TableBody, makeStyles,
 } from '@material-ui/core';
 import moment from 'moment';
 import { formatDate } from '../common/util/formatter';
-import OptionsLayout from '../settings/components/OptionsLayout';
 import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import ReportsMenu from './components/ReportsMenu';
+
+const useStyles = makeStyles((theme) => ({
+  filter: {
+    margin: theme.spacing(1),
+  },
+}));
 
 const Filter = ({ setItems }) => {
+  const classes = useStyles();
   const t = useTranslation();
 
   const [period, setPeriod] = useState('today');
@@ -56,7 +64,7 @@ const Filter = ({ setItems }) => {
   };
 
   return (
-    <>
+    <div className={classes.filter}>
       <FormControl variant="filled" margin="normal" fullWidth>
         <InputLabel>{t('reportPeriod')}</InputLabel>
         <Select value={period} onChange={(e) => setPeriod(e.target.value)}>
@@ -91,8 +99,8 @@ const Filter = ({ setItems }) => {
           fullWidth
         />
       )}
-      <Button variant="contained" color="primary" onClick={handleClick} fullWidth>{t('reportShow')}</Button>
-    </>
+      <Button variant="outlined" color="secondary" onClick={handleClick} fullWidth>{t('reportShow')}</Button>
+    </div>
   );
 };
 
@@ -102,7 +110,7 @@ const StatisticsPage = () => {
   const [items, setItems] = useState([]);
 
   return (
-    <OptionsLayout>
+    <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'statisticsTitle']}>
       <Filter setItems={setItems} />
       <TableContainer>
         <Table>
@@ -138,7 +146,7 @@ const StatisticsPage = () => {
           </TableBody>
         </Table>
       </TableContainer>
-    </OptionsLayout>
+    </PageLayout>
   );
 };
 
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 0dca99b3..8dc71af6 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -5,9 +5,10 @@ import {
   formatDistance, formatHours, formatDate, formatVolume,
 } from '../common/util/formatter';
 import ReportFilter from './components/ReportFilter';
-import ReportLayout from './components/ReportLayout';
 import { useAttributePreference } from '../common/util/preferences';
 import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import ReportsMenu from './components/ReportsMenu';
 
 const Filter = ({ setItems }) => {
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
@@ -85,7 +86,8 @@ const StopReportPage = () => {
   }];
 
   return (
-    <ReportLayout filter={<Filter setItems={setItems} />}>
+    <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportStops']}>
+      <Filter setItems={setItems} />
       <DataGrid
         rows={items}
         columns={columns}
@@ -93,7 +95,7 @@ const StopReportPage = () => {
         autoHeight
         getRowId={() => Math.random()}
       />
-    </ReportLayout>
+    </PageLayout>
   );
 };
 
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index fe6f4aa1..b9f5e5dd 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -6,9 +6,10 @@ import {
   formatDistance, formatHours, formatDate, formatSpeed, formatVolume,
 } from '../common/util/formatter';
 import ReportFilter from './components/ReportFilter';
-import ReportLayout from './components/ReportLayout';
 import { useAttributePreference } from '../common/util/preferences';
 import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import ReportsMenu from './components/ReportsMenu';
 
 const Filter = ({ setItems }) => {
   const t = useTranslation();
@@ -106,7 +107,8 @@ const SummaryReportPage = () => {
   }];
 
   return (
-    <ReportLayout filter={<Filter setItems={setItems} />}>
+    <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportSummary']}>
+      <Filter setItems={setItems} />
       <DataGrid
         rows={items}
         columns={columns}
@@ -114,7 +116,7 @@ const SummaryReportPage = () => {
         autoHeight
         getRowId={() => Math.random()}
       />
-    </ReportLayout>
+    </PageLayout>
   );
 };
 
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index a87031d3..a0141b68 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -5,9 +5,10 @@ import {
   formatDistance, formatSpeed, formatHours, formatDate, formatVolume,
 } from '../common/util/formatter';
 import ReportFilter from './components/ReportFilter';
-import ReportLayout from './components/ReportLayout';
 import { useAttributePreference } from '../common/util/preferences';
 import { useTranslation } from '../common/components/LocalizationProvider';
+import PageLayout from '../common/components/PageLayout';
+import ReportsMenu from './components/ReportsMenu';
 
 const Filter = ({ setItems }) => {
   const handleSubmit = async (deviceId, from, to, mail, headers) => {
@@ -116,7 +117,8 @@ const TripReportPage = () => {
   }];
 
   return (
-    <ReportLayout filter={<Filter setItems={setItems} />}>
+    <PageLayout menu={<ReportsMenu />} breadcrumbs={['reportTitle', 'reportTrips']}>
+      <Filter setItems={setItems} />
       <DataGrid
         rows={items}
         columns={columns}
@@ -124,7 +126,7 @@ const TripReportPage = () => {
         autoHeight
         getRowId={() => Math.random()}
       />
-    </ReportLayout>
+    </PageLayout>
   );
 };
 
diff --git a/modern/src/reports/components/ReportFilter.js b/modern/src/reports/components/ReportFilter.js
index bc9c5af6..739d5e47 100644
--- a/modern/src/reports/components/ReportFilter.js
+++ b/modern/src/reports/components/ReportFilter.js
@@ -1,12 +1,19 @@
 import React, { useState } from 'react';
 import {
-  FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography,
+  FormControl, InputLabel, Select, MenuItem, Button, TextField, Grid, Typography, makeStyles,
 } from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import moment from 'moment';
 import { useTranslation } from '../../common/components/LocalizationProvider';
 
+const useStyles = makeStyles((theme) => ({
+  filter: {
+    padding: theme.spacing(2),
+  },
+}));
+
 const ReportFilter = ({ children, handleSubmit, showOnly }) => {
+  const classes = useStyles();
   const t = useTranslation();
 
   const devices = useSelector((state) => state.devices.items);
@@ -60,7 +67,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
   };
 
   return (
-    <Grid container spacing={2} justifyContent="flex-end">
+    <Grid container className={classes.filter} spacing={2} justifyContent="flex-end">
       <Grid item xs={12} sm={period === 'custom' ? 3 : 6}>
         <FormControl variant="filled" fullWidth>
           <InputLabel>{t('reportDevice')}</InputLabel>
diff --git a/modern/src/reports/components/ReportLayout.js b/modern/src/reports/components/ReportLayout.js
deleted file mode 100644
index c028530b..00000000
--- a/modern/src/reports/components/ReportLayout.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import {
-  Grid, Typography, Divider, Drawer, makeStyles, IconButton, Hidden,
-} from '@material-ui/core';
-import TimelineIcon from '@material-ui/icons/Timeline';
-import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
-import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
-import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
-import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
-import TrendingUpIcon from '@material-ui/icons/TrendingUp';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-
-import SideNav from '../../common/components/SideNav';
-import NavBar from '../../common/components/NavBar';
-import { useTranslation } from '../../common/components/LocalizationProvider';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    [theme.breakpoints.down('sm')]: {
-      flexDirection: 'column',
-    },
-    height: '100%',
-  },
-  drawerContainer: {
-    width: theme.dimensions.drawerWidthDesktop,
-  },
-  drawer: {
-    width: theme.dimensions.drawerWidthDesktop,
-    [theme.breakpoints.down('sm')]: {
-      width: theme.dimensions.drawerWidthTablet,
-    },
-  },
-  content: {
-    flex: 1,
-    padding: theme.spacing(3, 3, 3, 3),
-  },
-  drawerHeader: {
-    ...theme.mixins.toolbar,
-    display: 'flex',
-    alignItems: 'center',
-    padding: theme.spacing(0, 1),
-  },
-  backArrowIconContainer: {
-    '&:hover': {
-      backgroundColor: 'transparent',
-    },
-  },
-}));
-
-const ReportLayout = ({ children, filter }) => {
-  const classes = useStyles();
-  const history = useHistory();
-  const location = useLocation();
-  const t = useTranslation();
-
-  const [openDrawer, setOpenDrawer] = useState(false);
-  const [reportTitle, setReportTitle] = useState();
-
-  const routes = useMemo(() => [
-    { name: t('reportRoute'), href: '/reports/route', icon: <TimelineIcon /> },
-    { name: t('reportEvents'), href: '/reports/event', icon: <NotificationsActiveIcon /> },
-    { name: t('reportTrips'), href: '/reports/trip', icon: <PlayCircleFilledIcon /> },
-    { name: t('reportStops'), href: '/reports/stop', icon: <PauseCircleFilledIcon /> },
-    { name: t('reportSummary'), href: '/reports/summary', icon: <FormatListBulletedIcon /> },
-    { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
-  ], [t]);
-
-  useEffect(() => {
-    routes.forEach((route) => {
-      switch (location.pathname) {
-        case `${route.href}`:
-          setReportTitle(route.name);
-          break;
-        default:
-          break;
-      }
-    });
-  }, [routes, location]);
-
-  const pageTitle = `${t('reportTitle')} / ${reportTitle}`;
-
-  return (
-    <div className={classes.root}>
-      <Hidden mdUp>
-        <NavBar setOpenDrawer={setOpenDrawer} title={pageTitle} />
-        <Drawer
-          variant="temporary"
-          open={openDrawer}
-          onClose={() => setOpenDrawer(!openDrawer)}
-          classes={{ paper: classes.drawer }}
-        >
-          <SideNav routes={routes} />
-        </Drawer>
-      </Hidden>
-      <Hidden smDown>
-        <Drawer
-          variant="permanent"
-          classes={{ root: classes.drawerContainer, paper: classes.drawer }}
-        >
-          <div className={classes.drawerHeader}>
-            <IconButton onClick={() => history.push('/')}>
-              <ArrowBackIcon />
-            </IconButton>
-            <Typography variant="h6" color="inherit" noWrap>
-              {t('reportTitle')}
-            </Typography>
-          </div>
-          <Divider />
-          <SideNav routes={routes} />
-        </Drawer>
-      </Hidden>
-      <div className={classes.content}>
-        <Grid container direction="column" spacing={2}>
-          <Grid item>{filter}</Grid>
-          <Grid item>{children}</Grid>
-        </Grid>
-      </div>
-    </div>
-  );
-};
-
-export default ReportLayout;
diff --git a/modern/src/reports/components/ReportsMenu.js b/modern/src/reports/components/ReportsMenu.js
new file mode 100644
index 00000000..8e973562
--- /dev/null
+++ b/modern/src/reports/components/ReportsMenu.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  Divider, List, ListItem, ListItemIcon, ListItemText,
+} from '@material-ui/core';
+import TimelineIcon from '@material-ui/icons/Timeline';
+import PauseCircleFilledIcon from '@material-ui/icons/PauseCircleFilled';
+import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
+import NotificationsActiveIcon from '@material-ui/icons/NotificationsActive';
+import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
+import TrendingUpIcon from '@material-ui/icons/TrendingUp';
+import BarChartIcon from '@material-ui/icons/BarChart';
+import { Link, useLocation } from 'react-router-dom';
+import { useTranslation } from '../../common/components/LocalizationProvider';
+import { useAdministrator } from '../../common/util/permissions';
+
+const MenuItem = ({
+  title, link, icon, selected,
+}) => (
+  <ListItem button key={link} component={Link} to={link} selected={selected}>
+    <ListItemIcon>{icon}</ListItemIcon>
+    <ListItemText primary={title} />
+  </ListItem>
+);
+
+const ReportsMenu = () => {
+  const t = useTranslation();
+  const location = useLocation();
+
+  const admin = useAdministrator();
+
+  return (
+    <>
+      <List>
+        <MenuItem
+          title={t('reportRoute')}
+          link="/reports/route"
+          icon={<TimelineIcon />}
+          selected={location.pathname === '/reports/route'}
+        />
+        <MenuItem
+          title={t('reportEvents')}
+          link="/reports/event"
+          icon={<NotificationsActiveIcon />}
+          selected={location.pathname === '/reports/event'}
+        />
+        <MenuItem
+          title={t('reportTrips')}
+          link="/reports/trip"
+          icon={<PlayCircleFilledIcon />}
+          selected={location.pathname === '/reports/trip'}
+        />
+        <MenuItem
+          title={t('reportStops')}
+          link="/reports/stop"
+          icon={<PauseCircleFilledIcon />}
+          selected={location.pathname === '/reports/stop'}
+        />
+        <MenuItem
+          title={t('reportSummary')}
+          link="/reports/summary"
+          icon={<FormatListBulletedIcon />}
+          selected={location.pathname === '/reports/summary'}
+        />
+        <MenuItem
+          title={t('reportChart')}
+          link="/reports/chart"
+          icon={<TrendingUpIcon />}
+          selected={location.pathname === '/reports/chart'}
+        />
+      </List>
+      {admin && (
+        <>
+          <Divider />
+          <List>
+            <MenuItem
+              title={t('statisticsTitle')}
+              link="/reports/statistics"
+              icon={<BarChartIcon />}
+              selected={location.pathname === '/reports/statistics'}
+            />
+          </List>
+        </>
+      )}
+    </>
+  );
+};
+
+export default ReportsMenu;
diff --git a/modern/src/settings/components/OptionsLayout.js b/modern/src/settings/components/OptionsLayout.js
deleted file mode 100644
index af104b01..00000000
--- a/modern/src/settings/components/OptionsLayout.js
+++ /dev/null
@@ -1,148 +0,0 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
-import {
-  Typography,
-  Divider,
-  Drawer,
-  makeStyles,
-  IconButton,
-  Hidden,
-} from '@material-ui/core';
-
-import { useSelector } from 'react-redux';
-import SettingsIcon from '@material-ui/icons/Settings';
-import CreateIcon from '@material-ui/icons/Create';
-import ArrowBackIcon from '@material-ui/icons/ArrowBack';
-import NotificationsIcon from '@material-ui/icons/Notifications';
-import FolderIcon from '@material-ui/icons/Folder';
-import PersonIcon from '@material-ui/icons/Person';
-import StorageIcon from '@material-ui/icons/Storage';
-import BuildIcon from '@material-ui/icons/Build';
-import PeopleIcon from '@material-ui/icons/People';
-import BarChartIcon from '@material-ui/icons/BarChart';
-import TodayIcon from '@material-ui/icons/Today';
-import PublishIcon from '@material-ui/icons/Publish';
-
-import SideNav from '../../common/components/SideNav';
-import NavBar from '../../common/components/NavBar';
-import { useTranslation } from '../../common/components/LocalizationProvider';
-import { useAdministrator, useReadonly } from '../../common/util/permissions';
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    [theme.breakpoints.down('sm')]: {
-      flexDirection: 'column',
-    },
-    height: '100%',
-  },
-  drawerContainer: {
-    width: theme.dimensions.drawerWidthDesktop,
-  },
-  drawer: {
-    width: theme.dimensions.drawerWidthDesktop,
-    [theme.breakpoints.down('sm')]: {
-      width: theme.dimensions.drawerWidthTablet,
-    },
-  },
-  content: {
-    flex: 1,
-  },
-  drawerHeader: {
-    ...theme.mixins.toolbar,
-    display: 'flex',
-    alignItems: 'center',
-    padding: theme.spacing(0, 1),
-  },
-  toolbar: {
-    [theme.breakpoints.down('sm')]: {
-      ...theme.mixins.toolbar,
-    },
-  },
-}));
-
-const OptionsLayout = ({ children }) => {
-  const t = useTranslation();
-  const classes = useStyles();
-  const location = useLocation();
-  const history = useHistory();
-
-  const [openDrawer, setOpenDrawer] = useState(false);
-  const [optionTitle, setOptionTitle] = useState();
-
-  const readonly = useReadonly();
-  const admin = useAdministrator();
-  const userId = useSelector((state) => state.session.user?.id);
-
-  const readonlyRoutes = useMemo(() => [
-    { name: t('sharedPreferences'), href: '/settings/preferences', icon: <SettingsIcon /> },
-  ], [t]);
-
-  const mainRoutes = useMemo(() => [
-    { name: t('sharedNotifications'), href: '/settings/notifications', icon: <NotificationsIcon /> },
-    { name: t('settingsUser'), href: `/settings/user/${userId}`, icon: <PersonIcon /> },
-    { name: t('sharedGeofences'), href: '/geofences', icon: <CreateIcon /> },
-    { name: t('settingsGroups'), href: '/settings/groups', icon: <FolderIcon /> },
-    { name: t('sharedDrivers'), href: '/settings/drivers', icon: <PersonIcon /> },
-    { name: t('sharedCalendars'), href: '/settings/calendars', icon: <TodayIcon /> },
-    { name: t('sharedComputedAttributes'), href: '/settings/attributes', icon: <StorageIcon /> },
-    { name: t('sharedMaintenance'), href: '/settings/maintenances', icon: <BuildIcon /> },
-    { name: t('sharedSavedCommands'), href: '/settings/commands', icon: <PublishIcon /> },
-  ], [t, userId]);
-
-  const adminRoutes = useMemo(() => [
-    { subheader: t('userAdmin') },
-    { name: t('settingsServer'), href: '/settings/server', icon: <StorageIcon /> },
-    { name: t('settingsUsers'), href: '/settings/users', icon: <PeopleIcon /> },
-    { name: t('statisticsTitle'), href: '/reports/statistics', icon: <BarChartIcon /> },
-  ], [t]);
-
-  const routes = useMemo(() => (
-    [...readonlyRoutes, ...(!readonly ? mainRoutes : []), ...(admin ? adminRoutes : [])]
-  ), [readonlyRoutes, readonly, mainRoutes, admin, adminRoutes]);
-
-  useEffect(() => {
-    const activeRoute = routes.find((route) => route.href && location.pathname.includes(route.href));
-    setOptionTitle(activeRoute?.name);
-  }, [location, routes]);
-
-  const title = `${t('settingsTitle')} / ${optionTitle}`;
-
-  return (
-    <div className={classes.root}>
-      <Hidden mdUp>
-        <NavBar setOpenDrawer={setOpenDrawer} title={title} />
-        <Drawer
-          variant="temporary"
-          open={openDrawer}
-          onClose={() => setOpenDrawer(!openDrawer)}
-          classes={{ paper: classes.drawer }}
-        >
-          <SideNav routes={routes} />
-        </Drawer>
-      </Hidden>
-
-      <Hidden smDown>
-        <Drawer
-          variant="permanent"
-          classes={{ root: classes.drawerContainer, paper: classes.drawer }}
-        >
-          <div className={classes.drawerHeader}>
-            <IconButton onClick={() => history.push('/')}>
-              <ArrowBackIcon />
-            </IconButton>
-            <Typography variant="h6" color="inherit" noWrap>
-              {t('settingsTitle')}
-            </Typography>
-          </div>
-          <Divider />
-          <SideNav routes={routes} />
-        </Drawer>
-      </Hidden>
-
-      <div className={classes.content}>{children}</div>
-    </div>
-  );
-};
-
-export default OptionsLayout;
-- 
cgit v1.2.3