fixed the drawer header with two row app bars

Author: PolGuixe

src/components/Layout/Layout.jsx

@@ -159,6 +159,10 @@ class Layout extends React.PureComponent {
       [`${classes.drawerPaperUnder}`]: !smallScreen && rightDrawerUnder,
       [`${classes.rightDrawerDockedFix}`]: isDocked(rightDrawerType), // FIXME remove once material-ui drawer style is fixed
     });
+    const drawerHeaderClassnames = classNames({
+      [`${classes.drawerHeader}`]: !usingTwoRowAppBar,
+      [`${classes.drawerHeaderTwoRowAppBar}`]: usingTwoRowAppBar,
+    })
 
     return (
       <div className={classes.layout}>
@@ -180,7 +184,7 @@ class Layout extends React.PureComponent {
             {...leftDrawerProps}
           >
             {!smallScreen && leftDrawerUnder ? (
-              <div className={classes.drawerHeader} />
+              <div className={drawerHeaderClassnames} />
             ) : null}
             {leftDrawerContent}
           </Drawer>
@@ -195,7 +199,7 @@ class Layout extends React.PureComponent {
             {...rightDrawerProps}
           >
             {!smallScreen && rightDrawerUnder ? (
-              <div className={classes.drawerHeader} />
+              <div className={drawerHeaderClassnames} />
             ) : null}
             {rightDrawerContent}
           </Drawer>

src/components/Layout/styles.js

@@ -54,6 +54,10 @@ const styles = theme => ({
     flex: 1,
     height: `calc(100vh - ${theme.mixins.toolbar.minHeight * 2}px)`,
   },
+  drawerHeader: theme.mixins.toolbar,
+  drawerHeaderTwoRowAppBar: {
+    minHeight: `${theme.mixins.toolbar.minHeight * 2}px`,
+  },
   [theme.breakpoints.up('sm')]: {
     mainFixedAppBar: {
       marginTop: `${theme.mixins.toolbar[theme.breakpoints.up('sm')]
@@ -71,6 +75,10 @@ const styles = theme => ({
       height: `calc(100vh - ${theme.mixins.toolbar[theme.breakpoints.up('sm')]
         .minHeight * 2}px)`,
     },
+    drawerHeaderTwoRowAppBar: {
+      minHeight: `${theme.mixins.toolbar[theme.breakpoints.up('sm')]
+        .minHeight * 2}px`,
+    },
   },
   mainStickyFooter: {
     flex: 1,
@@ -100,11 +108,6 @@ const styles = theme => ({
   drawerPaperUnder: {
     zIndex: '1000',
   },
-  drawerHeader: theme.mixins.toolbar,
-  rightDrawerDockedFix: {
-    borderLeft: `1px solid ${theme.palette.text.divider}`,
-    borderRight: 'none',
-  },
 });
 
 export default styles;