diff options
Diffstat (limited to 'modern')
| -rw-r--r-- | modern/src/MainPage.js | 13 |
1 files changed, 7 insertions, 6 deletions
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index 13cc1fc..aee5a3c 100644 --- a/modern/src/MainPage.js +++ b/modern/src/MainPage.js @@ -98,9 +98,10 @@ const MainPage = () => { const dispatch = useDispatch(); const t = useTranslation(); - const isComputer = useMediaQuery(theme.breakpoints.down('sm')); + const isComputer = useMediaQuery(theme.breakpoints.down('lg')); const isTablet = useMediaQuery(theme.breakpoints.down('md')); - const isPhone = useMediaQuery(theme.breakpoints.down('xs')); + const isPhone = useMediaQuery(theme.breakpoints.down('sm')); + const isWide = useMediaQuery(theme.breakpoints.up('sm')); const [deviceName, setDeviceName] = useState(''); const collapsed = useSelector((state) => state.ui.collapsed); @@ -114,12 +115,12 @@ const MainPage = () => { dispatch(devicesActions.setFilter(text)); } - useEffect(() => uiActions.setCollapsed(isTablet), [isTablet]); + useEffect(() => uiActions.setCollapsed(isPhone), [isPhone]); return ( <div className={classes.root}> <Map> - {!isTablet && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />} + {isWide && <MapPadding left={parseInt(theme.dimensions.drawerWidthDesktop, 10)} />} <CurrentLocationMap /> <GeofenceMap /> <AccuracyMap /> @@ -138,10 +139,10 @@ const MainPage = () => { <ListIcon /> <div className={classes.sidebarToggleText}>{t('deviceTitle')}</div> </Button> - <Paper square elevation={3} className={`${classes.sidebar} ${(isComputer && collapsed) && classes.sidebarCollapsed}`}> + <Paper square elevation={3} className={`${classes.sidebar} ${(!isWide && collapsed) && classes.sidebarCollapsed}`}> <Paper className={classes.paper} square elevation={3}> <Toolbar className={classes.toolbar} disableGutters> - {isTablet && ( + {isPhone && ( <IconButton onClick={handleClose}> <ArrowBackIcon /> </IconButton> |