8 files changed, 44 insertions, 46 deletions
diff --git a/modern/src/reports/ChartReportPage.js b/modern/src/reports/ChartReportPage.js
index 70ce780f..c55ed6d5 100644
--- a/modern/src/reports/ChartReportPage.js
+++ b/modern/src/reports/ChartReportPage.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import {
   Grid, FormControl, InputLabel, Select, MenuItem,
 } from '@material-ui/core';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import ReportFilter from './ReportFilter';
 import Graph from './Graph';
 import { useAttributePreference } from '../common/preferences';
@@ -57,14 +57,14 @@ const ChartReportPage = () => {
   const [type, setType] = useState('speed');
 
   return (
-    <ReportLayoutPage filter={(
+    <ReportLayout filter={(
       <Filter setItems={setItems}>
         <ChartType type={type} setType={setType} />
       </Filter>
     )}
     >
       <Graph items={items} type={type} />
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 };
 
diff --git a/modern/src/reports/EventReportPage.js b/modern/src/reports/EventReportPage.js
index 89efcf76..b5c3daeb 100644
--- a/modern/src/reports/EventReportPage.js
+++ b/modern/src/reports/EventReportPage.js
@@ -7,7 +7,7 @@ import { useTheme } from '@material-ui/core/styles';
 import { useSelector } from 'react-redux';
 import { formatDate } from '../common/formatter';
 import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import { prefixString } from '../common/stringUtils';
 import t from '../common/localization';
 
@@ -101,14 +101,14 @@ const EventReportPage = () => {
   }];
 
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
         rows={items}
         columns={columns}
         hideFooter
         autoHeight
       />
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 };
 
diff --git a/modern/src/reports/ReportFilter.js b/modern/src/reports/ReportFilter.js
index 1e2eb887..dec8d018 100644
--- a/modern/src/reports/ReportFilter.js
+++ b/modern/src/reports/ReportFilter.js
@@ -58,7 +58,7 @@ const ReportFilter = ({ children, handleSubmit, showOnly }) => {
   };
 
   return (
-    <Grid container spacing={2}>
+    <Grid container spacing={2} justify="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/ReportLayoutPage.js b/modern/src/reports/ReportLayout.js
index d25a8876..c231cd80 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayout.js
@@ -11,8 +11,8 @@ import FormatListBulletedIcon from '@material-ui/icons/FormatListBulleted';
 import TrendingUpIcon from '@material-ui/icons/TrendingUp';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 
-import ReportSidebar from '../components/reports/ReportSidebar';
-import ReportNavbar from '../components/reports/ReportNavbar';
+import SideNav from '../components/SideNav';
+import NavBar from '../components/NavBar';
 import t from '../common/localization';
 
 const useStyles = makeStyles((theme) => ({
@@ -60,7 +60,7 @@ const routes = [
   { name: t('reportChart'), href: '/reports/chart', icon: <TrendingUpIcon /> },
 ];
 
-const ReportLayoutPage = ({ children, filter }) => {
+const ReportLayout = ({ children, filter }) => {
   const classes = useStyles();
   const history = useHistory();
   const location = useLocation();
@@ -79,41 +79,39 @@ const ReportLayoutPage = ({ children, filter }) => {
     });
   }, [location]);
 
+  const pageTitle = `${t('reportTitle')} / ${reportTitle}`;
+
   return (
     <div className={classes.root}>
       <Hidden only={['lg', 'xl']}>
-        <ReportNavbar setOpenDrawer={setOpenDrawer} reportTitle={reportTitle} />
+        <NavBar setOpenDrawer={setOpenDrawer} title={pageTitle} />
         <Drawer
           variant="temporary"
           open={openDrawer}
           onClose={() => setOpenDrawer(!openDrawer)}
           classes={{ paper: classes.drawer }}
         >
-          <ReportSidebar routes={routes} />
+          <SideNav routes={routes} />
         </Drawer>
       </Hidden>
       <Hidden only={['xs', 'sm', 'md']}>
-        <div className={classes.drawerContainer}>
-          <Drawer
-            variant="permanent"
-            classes={{ paper: classes.drawer }}
-          >
-            <div className={classes.drawerHeader}>
-              <IconButton
-                onClick={() => history.push('/')}
-                className={classes.backArrowIconContainer}
-                disableRipple
-              >
-                <ArrowBackIcon />
-              </IconButton>
-              <Typography variant="h6" color="inherit" noWrap>
-                {t('reportTitle')}
-              </Typography>
-            </div>
-            <Divider />
-            <ReportSidebar routes={routes} />
-          </Drawer>
-        </div>
+        <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}>
         <div className={classes.toolbar} />
@@ -126,4 +124,4 @@ const ReportLayoutPage = ({ children, filter }) => {
   );
 };
 
-export default ReportLayoutPage;
+export default ReportLayout;
diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index dce08cb1..fffcdcb5 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -6,7 +6,7 @@ import {
   formatDistance, formatSpeed, formatBoolean, formatDate, formatCoordinate,
 } from '../common/formatter';
 import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import { useAttributePreference, usePreference } from '../common/preferences';
 import t from '../common/localization';
 
@@ -86,7 +86,7 @@ const RouteReportPage = () => {
   const [items, setItems] = useState([]);
 
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <ReportLayout filter={<Filter setItems={setItems} />}>
       <Paper>
         <DataGrid
           rows={items}
@@ -95,7 +95,7 @@ const RouteReportPage = () => {
           autoHeight
         />
       </Paper>
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 };
 
diff --git a/modern/src/reports/StopReportPage.js b/modern/src/reports/StopReportPage.js
index 078a5e5e..d2e7e7ed 100644
--- a/modern/src/reports/StopReportPage.js
+++ b/modern/src/reports/StopReportPage.js
@@ -5,7 +5,7 @@ import {
   formatDistance, formatHours, formatDate, formatVolume,
 } from '../common/formatter';
 import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import { useAttributePreference } from '../common/preferences';
 import t from '../common/localization';
 
@@ -84,7 +84,7 @@ const StopReportPage = () => {
   }];
 
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
         rows={items}
         columns={columns}
@@ -92,7 +92,7 @@ const StopReportPage = () => {
         autoHeight
         getRowId={() => Math.random()}
       />
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 };
 
diff --git a/modern/src/reports/SummaryReportPage.js b/modern/src/reports/SummaryReportPage.js
index 0e88705f..4523e652 100644
--- a/modern/src/reports/SummaryReportPage.js
+++ b/modern/src/reports/SummaryReportPage.js
@@ -6,7 +6,7 @@ import {
   formatDistance, formatHours, formatDate, formatSpeed, formatVolume,
 } from '../common/formatter';
 import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import { useAttributePreference } from '../common/preferences';
 import t from '../common/localization';
 
@@ -103,7 +103,7 @@ const SummaryReportPage = () => {
   }];
 
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
         rows={items}
         columns={columns}
@@ -111,7 +111,7 @@ const SummaryReportPage = () => {
         autoHeight
         getRowId={() => Math.random()}
       />
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 };
 
diff --git a/modern/src/reports/TripReportPage.js b/modern/src/reports/TripReportPage.js
index c10e6b1a..f611dde1 100644
--- a/modern/src/reports/TripReportPage.js
+++ b/modern/src/reports/TripReportPage.js
@@ -5,7 +5,7 @@ import {
   formatDistance, formatSpeed, formatHours, formatDate, formatVolume,
 } from '../common/formatter';
 import ReportFilter from './ReportFilter';
-import ReportLayoutPage from './ReportLayoutPage';
+import ReportLayout from './ReportLayout';
 import { useAttributePreference } from '../common/preferences';
 import t from '../common/localization';
 
@@ -115,7 +115,7 @@ const TripReportPage = () => {
   }];
 
   return (
-    <ReportLayoutPage filter={<Filter setItems={setItems} />}>
+    <ReportLayout filter={<Filter setItems={setItems} />}>
       <DataGrid
         rows={items}
         columns={columns}
@@ -123,7 +123,7 @@ const TripReportPage = () => {
         autoHeight
         getRowId={() => Math.random()}
       />
-    </ReportLayoutPage>
+    </ReportLayout>
   );
 };