diff options
author | Desmond Kyeremeh <elDekyfin@gmail.com> | 2021-07-20 21:54:15 +0000 |
---|---|---|
committer | Desmond Kyeremeh <elDekyfin@gmail.com> | 2021-07-20 21:54:15 +0000 |
commit | cc293e067842f9d88b56f143d5921790c91c4e37 (patch) | |
tree | 470f394f527f3fd233852f14244725aa8ddb4423 /modern | |
parent | 9dcecc62460c27b037fe7e56416afe6172404ef0 (diff) | |
download | etbsa-traccar-web-cc293e067842f9d88b56f143d5921790c91c4e37.tar.gz etbsa-traccar-web-cc293e067842f9d88b56f143d5921790c91c4e37.tar.bz2 etbsa-traccar-web-cc293e067842f9d88b56f143d5921790c91c4e37.zip |
callapse sidebar on tablets
Diffstat (limited to 'modern')
-rw-r--r-- | modern/src/MainPage.js | 13 |
1 files changed, 9 insertions, 4 deletions
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js index a53cec1..6f6b05c 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> |