Merge pull request #1771 from ProjectMirador/replace-back-drawer

Use Material UI Drawer instead of custom component

__tests__/src/components/WindowSideBar.test.js

@@ -9,7 +9,7 @@ describe('WindowSideBar', () => {
   });
 
   it('renders without an error', () => {
-    expect(wrapper.find('.mirador-window-sidebar').length).toBe(1);
+    expect(wrapper.find('WithStyles(Drawer)').length).toBe(1);
     expect(wrapper.find('WithStyles(List)').length).toBe(1);
   });
 });

src/components/WindowSideBar.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Drawer from '@material-ui/core/Drawer';
 import { withStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import WindowSideBarButtons from '../containers/WindowSideBarButtons';
-import ns from '../config/css-ns';
 
 /**
  * WindowSideBar
@@ -19,12 +20,25 @@ class WindowSideBar extends Component {
     } = this.props;
 
     return (
-      <div className={ns(['window-sidebar', (sideBarOpen ? 'window-sidebar-open' : 'window-sidebar-closed')])}>
+      <Drawer
+        variant="temporary"
+        className={classNames(classes.drawer)}
+        classes={{ paper: classNames(classes.drawer) }}
+        open={sideBarOpen}
+        anchor="left"
+        PaperProps={{ style: { position: 'relative' } }}
+        ModalProps={{
+          container: document.getElementById(windowId),
+          disablePortal: true,
+          hideBackdrop: true,
+          style: { position: 'absolute' },
+        }}
+      >
         <div className={classes.toolbar} />
         <List>
           <WindowSideBarButtons windowId={windowId} />
         </List>
-      </div>
+      </Drawer>
     );
   }
 }
@@ -46,6 +60,16 @@ WindowSideBar.defaultProps = {
  */
 const styles = theme => ({
   toolbar: theme.mixins.toolbar,
+  drawer: {
+    overflowX: 'hidden',
+    left: 0,
+    width: 55,
+    flexShrink: 0,
+    height: '100%',
+  },
+  grow: {
+    flexGrow: 1,
+  },
 });
 
 export default withStyles(styles)(WindowSideBar);

src/styles/index.scss

@@ -35,22 +35,6 @@ body {
     position: relative;
   }
 
-  &-window-sidebar {
-    background: lighten($gray, 60%);
-    height: 100%;
-    position: absolute;
-    transition: width 200ms linear;
-    z-index: 42;
-  }
-
-  &-window-sidebar-closed {
-    width: 0;
-  }
-
-  &-window-sidebar-open {
-    width: 50px;
-  }
-
   &-window-companion-side {
     background: lighten($gray, 40%);
     min-width: 75px;