fix content resize when drawer opens

codedthemes · Aug 17, 2022 · c314ed5 · c314ed5
1 parent f3a43dd
commit c314ed5
Showing 1 changed file with 28 additions and 38 deletions.
diff --git a/src/layout/MainLayout/index.js b/src/layout/MainLayout/index.js
@@ -21,45 +21,35 @@ import { IconChevronRight } from '@tabler/icons';
 // styles
 const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
     ...theme.typography.mainContent,
-    ...(!open && {
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-        transition: theme.transitions.create('margin', {
-            easing: theme.transitions.easing.sharp,
-            duration: theme.transitions.duration.leavingScreen
-        }),
-        [theme.breakpoints.up('md')]: {
-            marginLeft: -(drawerWidth - 20),
-            width: `calc(100% - ${drawerWidth}px)`
-        },
-        [theme.breakpoints.down('md')]: {
-            marginLeft: '20px',
-            width: `calc(100% - ${drawerWidth}px)`,
-            padding: '16px'
-        },
-        [theme.breakpoints.down('sm')]: {
-            marginLeft: '10px',
-            width: `calc(100% - ${drawerWidth}px)`,
-            padding: '16px',
-            marginRight: '10px'
-        }
-    }),
-    ...(open && {
-        transition: theme.transitions.create('margin', {
-            easing: theme.transitions.easing.easeOut,
-            duration: theme.transitions.duration.enteringScreen
-        }),
-        marginLeft: 0,
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    transition: theme.transitions.create(
+        'margin',
+        open
+            ? {
+                  easing: theme.transitions.easing.easeOut,
+                  duration: theme.transitions.duration.enteringScreen
+              }
+            : {
+                  easing: theme.transitions.easing.sharp,
+                  duration: theme.transitions.duration.leavingScreen
+              }
+    ),
+    [theme.breakpoints.up('md')]: {
+        marginLeft: -(drawerWidth - 20),
+        width: `calc(100% - ${drawerWidth}px)`
+    },
+    [theme.breakpoints.down('md')]: {
+        marginLeft: '20px',
         width: `calc(100% - ${drawerWidth}px)`,
-        [theme.breakpoints.down('md')]: {
-            marginLeft: '20px'
-        },
-        [theme.breakpoints.down('sm')]: {
-            marginLeft: '10px'
-        }
-    })
+        padding: '16px'
+    },
+    [theme.breakpoints.down('sm')]: {
+        marginLeft: '10px',
+        width: `calc(100% - ${drawerWidth}px)`,
+        padding: '16px',
+        marginRight: '10px'
+    }
 }));
 
 // ==============================|| MAIN LAYOUT ||============================== //