Clean up main page

1 files changed, 8 insertions, 8 deletions

diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index c6a0909b..61c10d81 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -121,8 +121,8 @@ const MainPage = () => {
   const t = useTranslation();
 
   const deviceReadonly = useDeviceReadonly();
-  const isTablet = useMediaQuery(theme.breakpoints.down('sm'));
-  const isPhone = useMediaQuery(theme.breakpoints.down('xs'));
+  const desktop = useMediaQuery(theme.breakpoints.up('md'));
+  const phone = useMediaQuery(theme.breakpoints.down('xs'));
 
   const [mapLiveRoutes] = usePersistedState('mapLiveRoutes', false);
 
@@ -135,7 +135,7 @@ const MainPage = () => {
     setCollapsed(!collapsed);
   };
 
-  useEffect(() => setCollapsed(isTablet), [isTablet]);
+  useEffect(() => setCollapsed(!desktop), [desktop]);
 
   return (
     <div className={classes.root}>
@@ -149,10 +149,10 @@ const MainPage = () => {
         <PoiMap />
       </Map>
       <MapCurrentLocation />
-      {!isTablet && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />}
+      {desktop && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />}
       <Button
         variant="contained"
-        color={isPhone ? 'secondary' : 'primary'}
+        color={phone ? 'secondary' : 'primary'}
         classes={{ containedPrimary: classes.sidebarToggleBg }}
         className={classes.sidebarToggle}
         onClick={handleClose}
@@ -164,7 +164,7 @@ const MainPage = () => {
       <Paper square elevation={3} className={`${classes.sidebar} ${collapsed && classes.sidebarCollapsed}`}>
         <Paper square elevation={3}>
           <Toolbar className={classes.toolbar} disableGutters>
-            {isTablet && (
+            {!desktop && (
               <IconButton onClick={handleClose}>
                 <ArrowBackIcon />
               </IconButton>
@@ -181,7 +181,7 @@ const MainPage = () => {
             <IconButton onClick={() => history.push('/settings/device')} disabled={deviceReadonly}>
               <AddIcon />
             </IconButton>
-            {!isTablet && (
+            {desktop && (
               <IconButton onClick={handleClose}>
                 <CloseIcon />
               </IconButton>
@@ -192,7 +192,7 @@ const MainPage = () => {
           <DevicesList filter={searchKeyword} />
         </div>
       </Paper>
-      {!isPhone && !isTablet && (
+      {desktop && (
         <div className={classes.bottomMenu}>
           <BottomMenu />
         </div>