callapse sidebar on tablets

1 files changed, 9 insertions, 4 deletions

diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index a53cec1a..6f6b05c0 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
 import {
   makeStyles, Paper, Toolbar, TextField, IconButton, Button,
@@ -87,16 +87,21 @@ const MainPage = () => {
   const history = useHistory();
   const theme = useTheme();
 
-  const [deviceName, setDeviceName] = useState('');
-  const [collapsed, setCollapsed] = useState(false);
-
   const isTablet = useMediaQuery(theme.breakpoints.down('md'));
   const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
 
+  const [deviceName, setDeviceName] = useState('');
+  const [collapsed, setCollapsed] = useState(false);
+
   const handleClose = () => {
     setCollapsed(!collapsed);
   };
 
+  // Collapse sidebar for tablets and phones
+  useEffect(() => {
+    setCollapsed(isTablet);
+  }, [isTablet]);
+
   return (
     <div className={classes.root}>
       <Map>