fix small media issue (#56)

* fix small media issue

* fixed sidebar for small devices

* Update package.json

---------

Co-authored-by: CodedThemes <[email protected]>

Author: ct-jahidhasan

package.json

@@ -1,6 +1,6 @@
 {
     "name": "berry-material-react-free",
-    "version": "3.3.0",
+    "version": "3.3.1",
     "private": true,
     "homepage": "https://berrydashboard.io/free",
     "dependencies": {

src/layout/MainLayout/index.js

@@ -1,4 +1,3 @@
-import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Outlet } from 'react-router-dom';
 
@@ -66,20 +65,14 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({
 
 const MainLayout = () => {
     const theme = useTheme();
-    const matchDownMd = useMediaQuery(theme.breakpoints.down('lg'));
-
+    const matchDownMd = useMediaQuery(theme.breakpoints.down('md'));
     // Handle left drawer
     const leftDrawerOpened = useSelector((state) => state.customization.opened);
     const dispatch = useDispatch();
     const handleLeftDrawerToggle = () => {
         dispatch({ type: SET_MENU, opened: !leftDrawerOpened });
     };
 
-    useEffect(() => {
-        dispatch({ type: SET_MENU, opened: !matchDownMd });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [matchDownMd]);
-
     return (
         <Box sx={{ display: 'flex' }}>
             <CssBaseline />
@@ -100,7 +93,7 @@ const MainLayout = () => {
             </AppBar>
 
             {/* drawer */}
-            <Sidebar drawerOpen={leftDrawerOpened} drawerToggle={handleLeftDrawerToggle} />
+            <Sidebar drawerOpen={!matchDownMd ? leftDrawerOpened : !leftDrawerOpened} drawerToggle={handleLeftDrawerToggle} />
 
             {/* main content */}
             <Main theme={theme} open={leftDrawerOpened}>

src/ui-component/cards/MainCard.js

@@ -46,9 +46,13 @@ const MainCard = forwardRef(
                 }}
             >
                 {/* card header and action */}
-                {title && 
-                    ( <CardHeader sx={headerSX} title={ darkTitle? <Typography variant="h3">{title}</Typography> : title } action={secondary} /> )
-                } 
+                {title && (
+                    <CardHeader
+                        sx={headerSX}
+                        title={darkTitle ? <Typography variant="h3">{title}</Typography> : title}
+                        action={secondary}
+                    />
+                )}
 
                 {/* content & header divider */}
                 {title && <Divider />}