Add map padding

2 files changed, 16 insertions, 0 deletions

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 4de1107e..e632bf9d 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -21,6 +21,7 @@ import CurrentLocationMap from './map/CurrentLocationMap';
 import BottomMenu from './components/BottomMenu';
 import { useTranslation } from './LocalizationProvider';
 import PoiMap from './map/PoiMap';
+import MapPadding from './map/MapPadding';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -109,6 +110,7 @@ const MainPage = () => {
   return (
     <div className={classes.root}>
       <Map>
+        {!isTablet && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop)} />}
         <CurrentLocationMap />
         <GeofenceMap />
         <AccuracyMap />
diff --git a/modern/src/map/MapPadding.js b/modern/src/map/MapPadding.js
new file mode 100644
index 00000000..cb165797
--- /dev/null
+++ b/modern/src/map/MapPadding.js
@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+
+import { map } from './Map';
+
+const MapPadding = ({ top, right, bottom, left }) => {
+  useEffect(() => {
+    map.setPadding({ top, right, bottom, left });
+    return () => map.setPadding({ top: 0, right: 0, bottom: 0, left: 0 });
+  }, [top, right, bottom, left]);
+
+  return null;
+};
+
+export default MapPadding;