Add setTimeout to fix the bug

This commit is contained in:
Henry Heng
2023-05-14 19:31:00 +01:00
committed by GitHub
parent d411aaf2d8
commit 71ee226824
@@ -1,3 +1,4 @@
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
import { Outlet } from 'react-router-dom' import { Outlet } from 'react-router-dom'
@@ -59,6 +60,7 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({
const MainLayout = () => { const MainLayout = () => {
const theme = useTheme() const theme = useTheme()
const matchDownMd = useMediaQuery(theme.breakpoints.down('lg'))
// Handle left drawer // Handle left drawer
const leftDrawerOpened = useSelector((state) => state.customization.opened) const leftDrawerOpened = useSelector((state) => state.customization.opened)
@@ -66,6 +68,11 @@ const MainLayout = () => {
const handleLeftDrawerToggle = () => { const handleLeftDrawerToggle = () => {
dispatch({ type: SET_MENU, opened: !leftDrawerOpened }) dispatch({ type: SET_MENU, opened: !leftDrawerOpened })
} }
useEffect(() => {
setTimeout(() => dispatch({ type: SET_MENU, opened: !matchDownMd }), 0)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [matchDownMd])
return ( return (
<Box sx={{ display: 'flex' }}> <Box sx={{ display: 'flex' }}>