fix https://github.com/catarak/p5.js-web-editor/issues/31, https://github.com/catarak/p5.js-web-editor/issues/22, and https://github.com/catarak/p5.js-web-editor/issues/37

client/modules/IDE/pages/IDEView.js

@@ -17,6 +17,12 @@ import { getFile, getHTMLFile, getJSFiles, getCSSFiles, setSelectedFile } from '
 import SplitPane from 'react-split-pane';
 
 class IDEView extends React.Component {
+  constructor(props) {
+    super(props);
+    this._handleConsolePaneOnDragFinished = this._handleConsolePaneOnDragFinished.bind(this);
+    this._handleSidebarPaneOnDragFinished = this._handleSidebarPaneOnDragFinished.bind(this);
+  }
+
   componentDidMount() {
     if (this.props.params.project_id) {
       const id = this.props.params.project_id;
@@ -29,6 +35,19 @@ class IDEView extends React.Component {
         this.autosaveInterval = setInterval(this.props.saveProject, 30000);
       }
     }
+
+    this.consoleSize = this.props.ide.consoleIsExpanded ? 180 : 29;
+    this.sidebarSize = this.props.ide.sidebarIsExpanded ? 180 : 20;
+  }
+
+  componentWillUpdate(nextProps) {
+    if (this.props.ide.consoleIsExpanded !== nextProps.ide.consoleIsExpanded) {
+      this.consoleSize = nextProps.ide.consoleIsExpanded ? 180 : 29;
+    }
+
+    if (this.props.ide.sidebarIsExpanded !== nextProps.ide.sidebarIsExpanded) {
+      this.sidebarSize = nextProps.ide.sidebarIsExpanded ? 180 : 20;
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -53,6 +72,22 @@ class IDEView extends React.Component {
     this.autosaveInterval = null;
   }
 
+  _handleConsolePaneOnDragFinished() {
+    this.consoleSize = this.refs.consolePane.state.draggedSize;
+    this.refs.consolePane.setState({
+      resized: false,
+      draggedSize: undefined,
+    });
+  }
+
+  _handleSidebarPaneOnDragFinished() {
+    this.sidebarSize = this.refs.sidebarPane.state.draggedSize;
+    this.refs.sidebarPane.setState({
+      resized: false,
+      draggedSize: undefined
+    });
+  }
+
   render() {
     return (
       <div className="ide">
@@ -88,7 +123,13 @@ class IDEView extends React.Component {
           setAutosave={this.props.setAutosave}
         />
         <div className="editor-preview-container">
-          <SplitPane split="vertical" defaultSize={180}>
+          <SplitPane
+            split="vertical"
+            defaultSize={this.sidebarSize}
+            ref="sidebarPane"
+            onDragFinished={this._handleSidebarPaneOnDragFinished}
+            allowResize={this.props.ide.sidebarIsExpanded}
+          >
             <Sidebar
               files={this.props.files}
               setSelectedFile={this.props.setSelectedFile}
@@ -109,7 +150,15 @@ class IDEView extends React.Component {
               onChange={() => (this.refs.overlay.style.display = 'block')}
               onDragFinished={() => (this.refs.overlay.style.display = 'none')}
             >
-              <SplitPane split="horizontal" primary="second" defaultSize={29} minSize={29} ref="consolePane">
+              <SplitPane
+                split="horizontal"
+                primary="second"
+                defaultSize={this.consoleSize}
+                minSize={29}
+                ref="consolePane"
+                onDragFinished={this._handleConsolePaneOnDragFinished}
+                allowResize={this.props.ide.consoleIsExpanded}
+              >
                 <Editor
                   file={this.props.selectedFile}
                   updateFileContent={this.props.updateFileContent}

client/styles/components/_sidebar.scss

@@ -13,6 +13,8 @@
   .sidebar--contracted & {
     display: none;
   }
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .sidebar__add {

client/styles/layout/_ide.scss

@@ -47,10 +47,6 @@
 }
 
 .sidebar {
-  // width: #{180 / $base-font-size}rem;
-  // &.sidebar--contracted {
-  // 	width: #{20 / $base-font-size}rem;
-  // }
   width: 100%;
   height: 100%;
 }