main addapts to drawer

Author: PolGuixe

src/components/Layout/Layout.jsx

@@ -71,15 +71,16 @@ class Layout extends React.PureComponent {
     // use classes insted of overrideClasses as material-ui
     const classes = { ...defaultClasses, ...overrideClasses };
 
+    const mainShift = drawerOpen && (drawerType === 'permanent' || drawerType === 'persistent');
     const mainClassnames = classNames(
       classes.main,
       { [`${classes.mainFixedAppBar}`]: appBarPosition === 'fixed' },
       { [`${classes.mainStickyFooter}`]: stickyFooter },
+      { [`${classes.mainShift}`]: mainShift },
     );
 
     const appBarShift =
       drawerOpen && !drawerUnder && (drawerType === 'permanent' || drawerType === 'persistent');
-    console.log('appBarShift', appBarShift);
 
     const appBarClassnames = classNames(classes.appBar, {
       [`${classes.appBarShift}`]: appBarShift,

src/components/Layout/styles.js

@@ -30,7 +30,15 @@ const styles = theme => ({
   mainStickyFooter: {
     flex: 1,
   },
-  '@media (max-width: 599px)': {
+  mainShift: {
+    marginLeft: drawerWidth,
+    width: `calc(100% - ${drawerWidth}px)`,
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  '@media (max-width: 599px)': { // use mixim
     mainFixedAppBar: {
       marginTop: '56px',
     },