Updated geofencespage

1 files changed, 29 insertions, 11 deletions

diff --git a/modern/src/GeofencesPage.js b/modern/src/GeofencesPage.js
index 389ac998..c66637da 100644
--- a/modern/src/GeofencesPage.js
+++ b/modern/src/GeofencesPage.js
@@ -2,17 +2,20 @@ import React from 'react';
 import { isWidthUp, makeStyles, withWidth } from '@material-ui/core';
 import Drawer from '@material-ui/core/Drawer';
 import ContainerDimensions from 'react-container-dimensions';
-import MainToolbar from './MainToolbar';
 import Map from './map/Map';
 import CurrentLocationMap from './map/CurrentLocationMap';
 import GeofenceEditMap from './map/GeofenceEditMap';
 import GeofencesList from './GeofencesList';
 
+import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+
+import t from './common/localization';
+
 const useStyles = makeStyles(theme => ({
   root: {
     height: '100%',
     display: 'flex',
-    flexDirection: 'column',
+    flexDirection: 'column'
   },
   content: {
     flexGrow: 1,
@@ -20,21 +23,27 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     flexDirection: 'row',
     [theme.breakpoints.down('xs')]: {
-      flexDirection: 'column-reverse',
+      flexDirection: 'column-reverse'
     }
   },
   drawerPaper: {
     position: 'relative',
     [theme.breakpoints.up('sm')]: {
-      width: 350,
+      width: 350
     },
     [theme.breakpoints.down('xs')]: {
-      height: 250,
+      height: 250
     }
   },
-  mapContainer: {
-    flexGrow: 1,
+  drawerHeader: {
+    ...theme.mixins.toolbar,
+    display: 'flex',
+    alignItems: 'center',
+    padding: theme.spacing(0, 1)
   },
+  mapContainer: {
+    flexGrow: 1
+  }
 }));
 
 const GeofencesPage = ({ width }) => {
@@ -42,12 +51,21 @@ const GeofencesPage = ({ width }) => {
 
   return (
     <div className={classes.root}>
-      <MainToolbar />
       <div className={classes.content}>
         <Drawer
           anchor={isWidthUp('sm', width) ? 'left' : 'bottom'}
-          variant='permanent'
-          classes={{ paper: classes.drawerPaper }}>
+          variant="permanent"
+          classes={{ paper: classes.drawerPaper }}
+        >
+          <div className={classes.drawerHeader}>
+            <IconButton component="a" href="/">
+              <ArrowBackIcon />
+            </IconButton>
+            <Typography variant="h6" color="inherit" noWrap>
+              {t('sharedGeofences')}
+            </Typography>
+          </div>
+          <Divider />
           <GeofencesList />
         </Drawer>
         <div className={classes.mapContainer}>
@@ -61,6 +79,6 @@ const GeofencesPage = ({ width }) => {
       </div>
     </div>
   );
-}
+};
 
 export default withWidth()(GeofencesPage);