From cc293e067842f9d88b56f143d5921790c91c4e37 Mon Sep 17 00:00:00 2001
From: Desmond Kyeremeh <elDekyfin@gmail.com>
Date: Tue, 20 Jul 2021 21:54:15 +0000
Subject: callapse sidebar on tablets

---
 modern/src/MainPage.js | 13 +++++++++----
 1 file 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>
-- 
cgit v1.2.3