Add a toggle button for the WindowSideBar component.

__tests__/src/actions/window.test.js

@@ -35,4 +35,15 @@ describe('window actions', () => {
       expect(actions.removeWindow(id)).toEqual(expectedAction);
     });
   });
+
+  describe('toggleWindowSideBar', () => {
+    it('returns the appropriate action type', () => {
+      const id = 'abc123';
+      const expectedAction = {
+        type: ActionTypes.TOGGLE_WINDOW_SIDE_BAR,
+        windowId: id,
+      };
+      expect(actions.toggleWindowSideBar(id)).toEqual(expectedAction);
+    });
+  });
 });

__tests__/src/components/WindowTopBar.test.js

@@ -11,14 +11,17 @@ const manifestFixture = {
 describe('WindowTopBar', () => {
   let topBar;
   let mockRemoveWindow;
+  let mockToggleWindowSideBar;
 
   beforeEach(() => {
     mockRemoveWindow = jest.fn();
+    mockToggleWindowSideBar = jest.fn();
     topBar = shallow(
       <WindowTopBar
         manifest={manifestFixture}
         windowId="foo"
         removeWindow={mockRemoveWindow}
+        toggleWindowSideBar={mockToggleWindowSideBar}
         classes={{}}
       />,
     ).dive();
@@ -32,4 +35,10 @@ describe('WindowTopBar', () => {
     expect(topBar.find('.mirador-window-close').prop('onClick'))
       .toBe(mockRemoveWindow);
   });
+
+  it('calls the toggleWindowSideBar prop when the menu IconButton is clicked', () => {
+    topBar.find('WithStyles(IconButton)').simulate('click');
+    expect(mockToggleWindowSideBar).toHaveBeenCalledTimes(1);
+    expect(mockToggleWindowSideBar).toHaveBeenCalledWith('foo');
+  });
 });

__tests__/src/reducers/windows.test.js

@@ -29,6 +29,24 @@ describe('windows reducer', () => {
       },
     });
   });
+
+  it('should handle TOGGLE_WINDOW_SIDE_BAR by toggling the sideBarOpen attribute', () => {
+    const action = {
+      type: ActionTypes.TOGGLE_WINDOW_SIDE_BAR,
+      windowId: 'abc123',
+    };
+    const before = {
+      abc123: { sideBarOpen: true },
+      abc321: { sideBarOpen: false },
+    };
+    const after = {
+      abc123: { sideBarOpen: false },
+      abc321: { sideBarOpen: false },
+    };
+
+    expect(reducer(before, action)).toEqual(after);
+  });
+
   it('should handle NEXT_CANVAS', () => {
     expect(reducer({
       abc123: {

src/components/Window.js

@@ -32,6 +32,7 @@ class Window extends Component {
         <ConnectedWindowMiddleContent
           window={window}
           manifest={manifest}
+          sideBarOpen={window.sideBarOpen}
         />
         <div className={ns('companion-bottom')}>
           <ConnectedThumbnailNavigation

src/components/WindowMiddleContent.js

@@ -41,6 +41,7 @@ export class WindowMiddleContent extends Component {
         <ConnectedWindowSideBar
           windowId={window.id}
           manifest={manifest}
+          sideBarOpen={window.sideBarOpen}
         />
         <ConnectedCompanionWindow
           windowId={window.id}

src/components/WindowSideBar.js

@@ -18,10 +18,11 @@ export class WindowSideBar extends Component {
    */
   render() {
     const {
-      windowId, classes,
+      windowId, classes, sideBarOpen,
     } = this.props;
+
     return (
-      <div className={ns('window-sidebar')}>
+      <div className={ns(['window-sidebar', (sideBarOpen ? 'window-sidebar-open' : 'window-sidebar-closed')])}>
         <div className={classes.toolbar} />
         <List>
           <ConnectedWindowSideBarButtons windowId={windowId} />
@@ -35,6 +36,11 @@ export class WindowSideBar extends Component {
 WindowSideBar.propTypes = {
   windowId: PropTypes.string.isRequired,
   classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types,
+  sideBarOpen: PropTypes.bool,
+};
+
+WindowSideBar.defaultProps = {
+  sideBarOpen: false,
 };
 
 /**

src/components/WindowTopBar.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
 import Toolbar from '@material-ui/core/Toolbar';
 import classNames from 'classnames';
 import ConnectedWindowTopBarButtons from './WindowTopBarButtons';
@@ -30,9 +32,18 @@ class WindowTopBar extends Component {
    * @return
    */
   render() {
-    const { removeWindow, windowId, classes } = this.props;
+    const {
+      removeWindow, windowId, classes, toggleWindowSideBar,
+    } = this.props;
     return (
       <Toolbar disableGutters className={classNames(classes.reallyDense, ns('window-top-bar'))} variant="dense">
+        <IconButton
+          aria-label="Open window side bar"
+          color="inherit"
+          onClick={() => toggleWindowSideBar(windowId)}
+        >
+          <MenuIcon />
+        </IconButton>
         <Typography variant="h3" noWrap color="inherit" className={classes.typographyBody}>
           {this.titleContent()}
         </Typography>
@@ -48,10 +59,12 @@ WindowTopBar.propTypes = {
   removeWindow: PropTypes.func.isRequired,
   windowId: PropTypes.string.isRequired,
   classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  toggleWindowSideBar: PropTypes.func,
 };
 
 WindowTopBar.defaultProps = {
   manifest: null,
+  toggleWindowSideBar: () => {},
 };
 
 const styles = {

src/containers/Window.js

@@ -7,8 +7,9 @@ import Window from '../components/Window';
  * @memberof Window
  * @private
  */
-const mapStateToProps = ({ manifests }, props) => ({
+const mapStateToProps = ({ manifests, sideBarOpen }, props) => ({
   manifest: manifests[props.window.manifestId],
+  sideBarOpen,
 });
 
 const enhance = compose(

src/containers/WindowTopBar.js

@@ -11,6 +11,7 @@ import WindowTopBar from '../components/WindowTopBar';
  */
 const mapDispatchToProps = (dispatch, props) => ({
   removeWindow: () => dispatch(actions.removeWindow(props.windowId)),
+  toggleWindowSideBar: () => dispatch(actions.toggleWindowSideBar(props.windowId)),
 });
 
 const enhance = compose(

src/state/actions/action-types.js

@@ -12,6 +12,7 @@ const ActionTypes = {
   RECEIVE_MANIFEST: 'RECEIVE_MANIFEST',
   RECEIVE_MANIFEST_FAILURE: 'RECEIVE_MANIFEST_FAILURE',
   SET_CONFIG: 'SET_CONFIG',
+  TOGGLE_WINDOW_SIDE_BAR: 'TOGGLE_WINDOW_SIDE_BAR',
   UPDATE_CONFIG: 'UPDATE_CONFIG',
   REMOVE_MANIFEST: 'REMOVE_MANIFEST',
   REQUEST_INFO_RESPONSE: 'REQUEST_INFO_RESPONSE',

src/state/actions/window.js

@@ -40,3 +40,13 @@ export function addWindow(options) {
 export function removeWindow(windowId) {
   return { type: ActionTypes.REMOVE_WINDOW, windowId };
 }
+
+/**
+ * toggleWindowSideBar - action creator
+ *
+ * @param  {String} windowId
+ * @memberof ActionCreators
+ */
+export function toggleWindowSideBar(windowId) {
+  return { type: ActionTypes.TOGGLE_WINDOW_SIDE_BAR, windowId };
+}

src/state/reducers/windows.js

@@ -14,6 +14,14 @@ const windowsReducer = (state = {}, action) => {
         }
         return object;
       }, {});
+    case ActionTypes.TOGGLE_WINDOW_SIDE_BAR:
+      return {
+        ...state,
+        [action.windowId]: {
+          ...state[action.windowId],
+          sideBarOpen: !state[action.windowId].sideBarOpen,
+        },
+      };
     case ActionTypes.NEXT_CANVAS:
       return setCanvasIndex(state, action.windowId, currentIndex => currentIndex + 1);
     case ActionTypes.PREVIOUS_CANVAS:

src/styles/index.scss

@@ -39,6 +39,15 @@ body {
     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;
   }