Added Report Title For Mobile and Tablet view

2 files changed, 19 insertions, 5 deletions

diff --git a/modern/src/components/reports/ReportNavbar.js b/modern/src/components/reports/ReportNavbar.js
index 674db3a4..3167c758 100644
--- a/modern/src/components/reports/ReportNavbar.js
+++ b/modern/src/components/reports/ReportNavbar.js
@@ -3,7 +3,7 @@ import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core';
 import MenuIcon from '@material-ui/icons/Menu';
 import t from '../../common/localization';
 
-const ReportNavbar = ({ openDrawer, setOpenDrawer }) => {
+const ReportNavbar = ({ openDrawer, setOpenDrawer, reportTitle }) => {
 
   return (
     <AppBar position="fixed" color="inherit">
@@ -16,7 +16,7 @@ const ReportNavbar = ({ openDrawer, setOpenDrawer }) => {
           <MenuIcon />
         </IconButton>
         <Typography variant="h6" noWrap>
-          {t('reportTitle')}
+          {t('reportTitle')} {reportTitle ? `/ ${reportTitle}` : ''}
         </Typography>        
       </Toolbar>
     </AppBar> 
diff --git a/modern/src/reports/ReportLayoutPage.js b/modern/src/reports/ReportLayoutPage.js
index ed7fe544..42804004 100644
--- a/modern/src/reports/ReportLayoutPage.js
+++ b/modern/src/reports/ReportLayoutPage.js
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import React, { useState, useEffect } 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';
@@ -61,12 +61,26 @@ const routes = [
 const ReportLayoutPage = ({ children, filter, }) => {
   const classes = useStyles();
   const history = useHistory();
+  const location = useLocation();
   const [openDrawer, setOpenDrawer] = useState(false);
+  const [reportTitle, setReportTitle] = useState();
+
+  useEffect(() => {
+    routes.forEach(route => {
+      switch (location.pathname) {
+        case `${route.href}`:
+          setReportTitle(route.name);
+          break;
+        default:
+          break;
+      }
+    });
+  }, []);
 
   return (
     <div className={classes.root}>
       <Hidden only={['lg', 'xl']}>
-        <ReportNavbar openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} />
+        <ReportNavbar openDrawer={openDrawer} setOpenDrawer={setOpenDrawer} reportTitle={reportTitle} />
         <Drawer
           variant="temporary"
           open={openDrawer}