Material-ui: Issues with mini variant drawer

[arxenix]

In the provided mini-variant demo, when you scroll down in the main content pane, it also scrolls down in the drawer. Instead, the two should be independent.

Furthermore, the unopened drawer does not take up the full height.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When I scroll down in the main content portion, it scrolls the content, but the drawer does not move.
When I scroll in the drawer section, it scrolls down in the drawer, but the content does not move.

The unopened mini-drawer should take up the full height.

Current Behavior

Scroll is linked. When i scroll down in either the drawer or in the content region, it scrolls down in both.

The unopened mini-drawer does NOT take up the full height.

Steps to Reproduce

Link: https://codesandbox.io/s/m7ymj37qvp (existing, unmodified demo of mini-variant which is linked in the Demos page)

Context

I would like to use the mini-variant drawer, but it has problems.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v3.3.1 |
| React | 16.6.0 |
| Browser | Chrome Version 69.0.3497.100 (Official Build) (64-bit) |
| TypeScript | N/A |
| etc. | |

[oliviertassinari]

@arxenix I confirm, it's pretty bad, it's the last demo, we haven't been giving it enough care 🙈.
I was able to get it working with the following diff:

--- a/docs/src/pages/demos/drawers/MiniDrawer.js
+++ b/docs/src/pages/demos/drawers/MiniDrawer.js
@@ -47,26 +47,31 @@ const styles = theme => ({
   hide: {
     display: 'none',
   },
-  drawerPaper: {
-    position: 'relative',
-    whiteSpace: 'nowrap',
+  drawer: {
+    width: drawerWidth,
+    flexShrink: 0,
+  },
+  drawerOpen: {
     width: drawerWidth,
     transition: theme.transitions.create('width', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.enteringScreen,
     }),
   },
-  drawerPaperClose: {
-    overflowX: 'hidden',
+  drawerClose: {
     transition: theme.transitions.create('width', {
       easing: theme.transitions.easing.sharp,
       duration: theme.transitions.duration.leavingScreen,
     }),
+    overflowX: 'hidden',
     width: theme.spacing.unit * 7,
     [theme.breakpoints.up('sm')]: {
       width: theme.spacing.unit * 9,
     },
   },
+  drawerPaper: {
+    whiteSpace: 'nowrap',
+  },
   toolbar: {
     display: 'flex',
     alignItems: 'center',
@@ -122,11 +127,18 @@ class MiniDrawer extends React.Component {
           </Toolbar>
         </AppBar>
         <Drawer
           variant="permanent"
+          className={classNames(classes.drawer, {
+            [classes.drawerOpen]: this.state.open,
+            [classes.drawerClose]: !this.state.open,
+          })}
           classes={{
-            paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose),
+            paper: classNames(classes.drawerPaper, {
+              [classes.drawerOpen]: this.state.open,
+              [classes.drawerClose]: !this.state.open,
+            }),
           }}
           open={this.state.open}
         >
           <div className={classes.toolbar}>
             <IconButton onClick={this.handleDrawerClose}>

Do you want to submit a pull request? :)

[arxenix]

@oliviertassinari Sure :) I'll try it out and submit a PR soon

[joshwooding]

@arxenix Are you still working on this?