From 8ae3eb62a9562c51c5e5ae1d8b8d8c19e68cee15 Mon Sep 17 00:00:00 2001
From: ct-jahidhasan <98209944+ct-jahidhasan@users.noreply.github.com>
Date: Sat, 4 Feb 2023 12:23:55 +0600
Subject: [PATCH] fix small media issue (#56)

* fix small media issue

* fixed sidebar for small devices

* Update package.json

---------

Co-authored-by: CodedThemes <77041536+phoenixcoded20@users.noreply.github.com>
---
 package.json                       |  2 +-
 src/layout/MainLayout/index.js     | 11 ++---------
 src/ui-component/cards/MainCard.js | 10 +++++++---
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 93bdb91e5..61f8e70f1 100644
--- a/package.json
+++ b/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": {
diff --git a/src/layout/MainLayout/index.js b/src/layout/MainLayout/index.js
index e846e860f..505b4eb9b 100644
--- a/src/layout/MainLayout/index.js
+++ b/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,8 +65,7 @@ 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();
@@ -75,11 +73,6 @@ const MainLayout = () => {
         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}>
diff --git a/src/ui-component/cards/MainCard.js b/src/ui-component/cards/MainCard.js
index 635997992..deedcfab3 100644
--- a/src/ui-component/cards/MainCard.js
+++ b/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 />}