considered the case of under drawers

Author: PolGuixe

src/components/Layout/Layout.jsx

@@ -85,6 +85,11 @@ class Layout extends React.PureComponent {
     const appBarClassnames = classNames(classes.appBar, {
       [`${classes.appBarShift}`]: appBarShift,
     });
+
+    const drawerPaperClassnames = classNames(classes.drawerPaper, {
+      [`${classes.drawerPaperUnder}`]: drawerUnder,
+    });
+
     return (
       <div className={classes.layout}>
         <AppBar
@@ -100,9 +105,10 @@ class Layout extends React.PureComponent {
             open={drawerOpen}
             onRequestClose={this.handleDrawerClose}
             type={drawerType}
-            classes={{ paper: classes.drawerPaper }}
+            classes={{ paper: drawerPaperClassnames }}
             {...drawerProps}
           >
+            {drawerUnder ? <div className={classes.drawerHeader} /> : null}
             {drawerContent}
           </Drawer>
         ) : null}

src/components/Layout/styles.js

@@ -43,14 +43,19 @@ const styles = theme => ({
       duration: theme.transitions.duration.enteringScreen,
     }),
   },
-  '@media (max-width: 599px)': { // use mixim
+  '@media (max-width: 599px)': {
+    // use mixim
     mainFixedAppBar: {
       marginTop: '56px',
     },
   },
   drawerPaper: {
     width: drawerWidth,
   },
+  drawerPaperUnder: {
+    zIndex: '1000',
+  },
+  drawerHeader: theme.mixins.toolbar,
 });
 
 export default styles;