diff --git a/src/client/app.jsx b/src/client/app.jsx
index 3b8182a..8e16423 100644
--- a/src/client/app.jsx
+++ b/src/client/app.jsx
@@ -12,6 +12,8 @@ import Sidebar from './sidebar';
 import SidebarIcons from './sidebar-icons';
 import {
   activeResourceUriSelector,
+  activeSidebarIndexSelector,
+  isSidebarExpandedSelector,
   resourceUrisSelector,
 } from './state';
 import {all as allTypeRenderers} from './type-renderers.scwp';
@@ -24,9 +26,9 @@ const typeRenderMap = () => Object.values(allTypeRenderers()).reduce((r, M) => {
 const App = () => {
   const [typeRenderers] = useState(typeRenderMap());
   const activeResourceUri = useSelector(activeResourceUriSelector);
+  const activeSidebarIndex = useSelector(activeSidebarIndexSelector);
+  const isSidebarExpanded = useSelector(isSidebarExpandedSelector);
   const resourceUris = useSelector(resourceUrisSelector);
-  const [activeSidebar, setActiveSidebar] = useState(0);
-  const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
   return (
     <div className="app">
       <TypeRenderersContext.Provider value={typeRenderers}>
@@ -35,8 +37,8 @@ const App = () => {
             className="sidebar-icons-wrapper pane"
           >
             <SidebarIcons
-              active={[activeSidebar, setActiveSidebar]}
-              isExpanded={[isSidebarExpanded, setIsSidebarExpanded]}
+              activeIndex={activeSidebarIndex}
+              isExpanded={isSidebarExpanded}
             />
           </div>
           <div
diff --git a/src/client/app.scss b/src/client/app.scss
index 76ce70b..018c211 100644
--- a/src/client/app.scss
+++ b/src/client/app.scss
@@ -21,9 +21,11 @@
 }
 
 .sidebar-wrapper {
+  display: none;
   max-width: calc(100% - 4em);
   width: 0;
   &.expanded {
+    display: block;
     width: 24em;
   }
 }
diff --git a/src/client/react-sortable-tree-theme-file-explorer.js b/src/client/react-sortable-tree-theme-file-explorer.js
index cad9ecc..8dde7cb 100644
--- a/src/client/react-sortable-tree-theme-file-explorer.js
+++ b/src/client/react-sortable-tree-theme-file-explorer.js
@@ -1,3 +1,4 @@
+/* eslint-disable */
 !function(root, factory) {
     "object" == typeof exports && "object" == typeof module ? module.exports = factory() : "function" == typeof define && define.amd ? define([], factory) : "object" == typeof exports ? exports.ReactSortableTreeThemeFileExplorer = factory() : root.ReactSortableTreeThemeFileExplorer = factory();
 }("undefined" != typeof self ? self : this, function() {
@@ -37,7 +38,7 @@
             /******/
             // Flag the module as loaded
             /******/
-            return modules[moduleId].call(module.exports, module, module.exports, __webpack_require__), 
+            return modules[moduleId].call(module.exports, module, module.exports, __webpack_require__),
             module.l = !0, module.exports;
         }
         // webpackBootstrap
@@ -74,7 +75,7 @@
         /******/
         // __webpack_public_path__
         /******/
-        return __webpack_require__.m = modules, __webpack_require__.c = installedModules, 
+        return __webpack_require__.m = modules, __webpack_require__.c = installedModules,
         __webpack_require__.d = function(exports, name, getter) {
             /******/
             __webpack_require__.o(exports, name) || /******/
@@ -153,7 +154,7 @@
                     // this implementation is not 100% perfect for weird media query combinations
                     //  when a module is imported multiple times with different media queries.
                     //  I hope this will never occur (Hey this way we have smaller bundles)
-                    "number" == typeof item[0] && alreadyImportedModules[item[0]] || (mediaQuery && !item[2] ? item[2] = mediaQuery : mediaQuery && (item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"), 
+                    "number" == typeof item[0] && alreadyImportedModules[item[0]] || (mediaQuery && !item[2] ? item[2] = mediaQuery : mediaQuery && (item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"),
                     list.push(item));
                 }
             }, list;
@@ -196,7 +197,7 @@
             var target = getElement(options.insertInto);
             if (!target) throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");
             var lastStyleElementInsertedAtTop = stylesInsertedAtTop[stylesInsertedAtTop.length - 1];
-            if ("top" === options.insertAt) lastStyleElementInsertedAtTop ? lastStyleElementInsertedAtTop.nextSibling ? target.insertBefore(style, lastStyleElementInsertedAtTop.nextSibling) : target.appendChild(style) : target.insertBefore(style, target.firstChild), 
+            if ("top" === options.insertAt) lastStyleElementInsertedAtTop ? lastStyleElementInsertedAtTop.nextSibling ? target.insertBefore(style, lastStyleElementInsertedAtTop.nextSibling) : target.appendChild(style) : target.insertBefore(style, target.firstChild),
             stylesInsertedAtTop.push(style); else if ("bottom" === options.insertAt) target.appendChild(style); else {
                 if ("object" != typeof options.insertAt || !options.insertAt.before) throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");
                 var nextSibling = getElement(options.insertInto + " " + options.insertAt.before);
@@ -211,12 +212,12 @@
         }
         function createStyleElement(options) {
             var style = document.createElement("style");
-            return options.attrs.type = "text/css", addAttrs(style, options.attrs), insertStyleElement(options, style), 
+            return options.attrs.type = "text/css", addAttrs(style, options.attrs), insertStyleElement(options, style),
             style;
         }
         function createLinkElement(options) {
             var link = document.createElement("link");
-            return options.attrs.type = "text/css", options.attrs.rel = "stylesheet", addAttrs(link, options.attrs), 
+            return options.attrs.type = "text/css", options.attrs.rel = "stylesheet", addAttrs(link, options.attrs),
             insertStyleElement(options, link), link;
         }
         function addAttrs(el, attrs) {
@@ -237,12 +238,12 @@
             }
             if (options.singleton) {
                 var styleIndex = singletonCounter++;
-                style = singleton || (singleton = createStyleElement(options)), update = applyToSingletonTag.bind(null, style, styleIndex, !1), 
+                style = singleton || (singleton = createStyleElement(options)), update = applyToSingletonTag.bind(null, style, styleIndex, !1),
                 remove = applyToSingletonTag.bind(null, style, styleIndex, !0);
-            } else obj.sourceMap && "function" == typeof URL && "function" == typeof URL.createObjectURL && "function" == typeof URL.revokeObjectURL && "function" == typeof Blob && "function" == typeof btoa ? (style = createLinkElement(options), 
+            } else obj.sourceMap && "function" == typeof URL && "function" == typeof URL.createObjectURL && "function" == typeof URL.revokeObjectURL && "function" == typeof Blob && "function" == typeof btoa ? (style = createLinkElement(options),
             update = updateLink.bind(null, style, options), remove = function() {
                 removeStyleElement(style), style.href && URL.revokeObjectURL(style.href);
-            }) : (style = createStyleElement(options), update = applyToTag.bind(null, style), 
+            }) : (style = createStyleElement(options), update = applyToTag.bind(null, style),
             remove = function() {
                 removeStyleElement(style);
             });
@@ -314,7 +315,7 @@
         }), singleton = null, singletonCounter = 0, stylesInsertedAtTop = [], fixUrls = __webpack_require__(8);
         module.exports = function(list, options) {
             if ("undefined" != typeof DEBUG && DEBUG && "object" != typeof document) throw new Error("The style-loader cannot be used in a non-browser environment");
-            options = options || {}, options.attrs = "object" == typeof options.attrs ? options.attrs : {}, 
+            options = options || {}, options.attrs = "object" == typeof options.attrs ? options.attrs : {},
             // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
             // tags it will allow on a page
             options.singleton || (options.singleton = isOldIE()), // By default, add <style> tags to the <head> element
@@ -422,12 +423,12 @@
             function defineProperties(target, props) {
                 for (var i = 0; i < props.length; i++) {
                     var descriptor = props[i];
-                    descriptor.enumerable = descriptor.enumerable || !1, descriptor.configurable = !0, 
+                    descriptor.enumerable = descriptor.enumerable || !1, descriptor.configurable = !0,
                     "value" in descriptor && (descriptor.writable = !0), Object.defineProperty(target, descriptor.key, descriptor);
                 }
             }
             return function(Constructor, protoProps, staticProps) {
-                return protoProps && defineProperties(Constructor.prototype, protoProps), staticProps && defineProperties(Constructor, staticProps), 
+                return protoProps && defineProperties(Constructor.prototype, protoProps), staticProps && defineProperties(Constructor, staticProps),
                 Constructor;
             };
         }(), _react = __webpack_require__(0), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(1), _propTypes2 = _interopRequireDefault(_propTypes), _nodeContentRenderer = __webpack_require__(6), _nodeContentRenderer2 = _interopRequireDefault(_nodeContentRenderer), FileThemeNodeContentRenderer = function(_Component) {
@@ -437,7 +438,7 @@
             return _inherits(FileThemeNodeContentRenderer, _Component), _createClass(FileThemeNodeContentRenderer, [ {
                 key: "render",
                 value: function() {
-                    var _props = this.props, scaffoldBlockPxWidth = _props.scaffoldBlockPxWidth, toggleChildrenVisibility = _props.toggleChildrenVisibility, connectDragPreview = _props.connectDragPreview, connectDragSource = _props.connectDragSource, isDragging = _props.isDragging, canDrop = _props.canDrop, canDrag = _props.canDrag, node = _props.node, title = _props.title, draggedNode = _props.draggedNode, path = _props.path, treeIndex = _props.treeIndex, isSearchMatch = _props.isSearchMatch, isSearchFocus = _props.isSearchFocus, icons = _props.icons, buttons = _props.buttons, className = _props.className, style = _props.style, didDrop = _props.didDrop, lowerSiblingCounts = _props.lowerSiblingCounts, listIndex = _props.listIndex, swapFrom = _props.swapFrom, swapLength = _props.swapLength, swapDepth = _props.swapDepth, otherProps = (_props.treeId, 
+                    var _props = this.props, scaffoldBlockPxWidth = _props.scaffoldBlockPxWidth, toggleChildrenVisibility = _props.toggleChildrenVisibility, connectDragPreview = _props.connectDragPreview, connectDragSource = _props.connectDragSource, isDragging = _props.isDragging, canDrop = _props.canDrop, canDrag = _props.canDrag, node = _props.node, title = _props.title, draggedNode = _props.draggedNode, path = _props.path, treeIndex = _props.treeIndex, isSearchMatch = _props.isSearchMatch, isSearchFocus = _props.isSearchFocus, icons = _props.icons, buttons = _props.buttons, className = _props.className, style = _props.style, didDrop = _props.didDrop, lowerSiblingCounts = _props.lowerSiblingCounts, listIndex = _props.listIndex, swapFrom = _props.swapFrom, swapLength = _props.swapLength, swapDepth = _props.swapDepth, otherProps = (_props.treeId,
                     _props.isOver, _props.parentNode, _props.rowDirection, _objectWithoutProperties(_props, [ "scaffoldBlockPxWidth", "toggleChildrenVisibility", "connectDragPreview", "connectDragSource", "isDragging", "canDrop", "canDrag", "node", "title", "draggedNode", "path", "treeIndex", "isSearchMatch", "isSearchFocus", "icons", "buttons", "className", "style", "didDrop", "lowerSiblingCounts", "listIndex", "swapFrom", "swapLength", "swapDepth", "treeId", "isOver", "parentNode", "rowDirection" ])), nodeTitle = title || node.title, isDraggedDescendant = draggedNode && isDescendant(draggedNode, node), isLandingPadActive = !didDrop && isDragging, scaffold = [];
                     lowerSiblingCounts.forEach(function(lowerSiblingCount, i) {
                         if (scaffold.push(_react2.default.createElement("div", {
@@ -452,7 +453,7 @@
                             var highlightLineClass = "";
                             // This block is on the bottom (target) line
                             // This block points at the target block (where the row will go when released)
-                            highlightLineClass = listIndex === swapFrom + swapLength - 1 ? _nodeContentRenderer2.default.highlightBottomLeftCorner : treeIndex === swapFrom ? _nodeContentRenderer2.default.highlightTopLeftCorner : _nodeContentRenderer2.default.highlightLineVertical, 
+                            highlightLineClass = listIndex === swapFrom + swapLength - 1 ? _nodeContentRenderer2.default.highlightBottomLeftCorner : treeIndex === swapFrom ? _nodeContentRenderer2.default.highlightTopLeftCorner : _nodeContentRenderer2.default.highlightLineVertical,
                             scaffold.push(_react2.default.createElement("div", {
                                 key: "highlight_" + (1 + i),
                                 style: {
@@ -594,7 +595,7 @@
     function(module, exports, __webpack_require__) {
         exports = module.exports = __webpack_require__(2)(!1), // imports
         // module
-        exports.push([ module.i, ".rstcustom__rowWrapper {\n  height: 100%;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  cursor: move; }\n  .rstcustom__rowWrapper:hover {\n    opacity: 0.7; }\n  .rstcustom__rowWrapper:active {\n    opacity: 1; }\n\n.rstcustom__rowWrapperDragDisabled {\n  cursor: default; }\n\n.rstcustom__row {\n  height: 100%;\n  white-space: nowrap;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: relative; }\n  .rstcustom__row > * {\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box; }\n\n/**\n * The outline of where the element will go if dropped, displayed while dragging\n */\n.rstcustom__rowLandingPad, .rstcustom__rowCancelPad {\n  border: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n  outline: none; }\n  .rstcustom__rowLandingPad *, .rstcustom__rowCancelPad * {\n    opacity: 0 !important; }\n  .rstcustom__rowLandingPad::before, .rstcustom__rowCancelPad::before {\n    background-color: lightblue;\n    border: 2px dotted black;\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: -1; }\n\n/**\n * Alternate appearance of the landing pad when the dragged location is invalid\n */\n.rstcustom__rowCancelPad::before {\n  background-color: #e6a8ad; }\n\n/**\n * Nodes matching the search conditions are highlighted\n */\n.rstcustom__rowSearchMatch {\n  -webkit-box-shadow: inset 0 -7px 7px -3px #0080ff;\n          box-shadow: inset 0 -7px 7px -3px #0080ff; }\n\n/**\n * The node that matches the search conditions and is currently focused\n */\n.rstcustom__rowSearchFocus {\n  -webkit-box-shadow: inset 0 -7px 7px -3px #fc6421;\n          box-shadow: inset 0 -7px 7px -3px #fc6421; }\n\n.rstcustom__rowContents, .rstcustom__rowLabel, .rstcustom__rowToolbar, .rstcustom__toolbarButton {\n  display: inline-block;\n  vertical-align: middle; }\n\n.rstcustom__rowContents {\n  position: relative;\n  height: 100%;\n  -webkit-box-flex: 1;\n      -ms-flex: 1 0 auto;\n          flex: 1 0 auto;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: justify;\n      -ms-flex-pack: justify;\n          justify-content: space-between; }\n\n.rstcustom__rowLabel {\n  -webkit-box-flex: 0;\n      -ms-flex: 0 1 auto;\n          flex: 0 1 auto;\n  padding-right: 20px; }\n\n.rstcustom__rowToolbar {\n  -webkit-box-flex: 0;\n      -ms-flex: 0 1 auto;\n          flex: 0 1 auto;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex; }\n\n.rstcustom__collapseButton,\n.rstcustom__expandButton {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  border: none;\n  background: transparent;\n  padding: 0;\n  z-index: 2;\n  position: absolute;\n  top: 45%;\n  width: 30px;\n  height: 30px;\n  -webkit-transform: translate3d(-50%, -50%, 0);\n          transform: translate3d(-50%, -50%, 0);\n  cursor: pointer; }\n  .rstcustom__collapseButton::after,\n  .rstcustom__expandButton::after {\n    content: '';\n    position: absolute;\n    -webkit-transform-origin: 7px 4px;\n        -ms-transform-origin: 7px 4px;\n            transform-origin: 7px 4px;\n    -webkit-transform: translate3d(-50%, -20%, 0);\n            transform: translate3d(-50%, -20%, 0);\n    border: solid transparent 10px;\n    border-left-width: 7px;\n    border-right-width: 7px;\n    border-top-color: gray; }\n  .rstcustom__collapseButton:hover::after,\n  .rstcustom__expandButton:hover::after {\n    border-top-color: black; }\n  .rstcustom__collapseButton:focus,\n  .rstcustom__expandButton:focus {\n    outline: none; }\n    .rstcustom__collapseButton:focus::after,\n    .rstcustom__expandButton:focus::after {\n      -webkit-filter: drop-shadow(0 0 1px #83bef9) drop-shadow(0 0 1px #83bef9) drop-shadow(0 0 1px #83bef9);\n              filter: drop-shadow(0 0 1px #83bef9) drop-shadow(0 0 1px #83bef9) drop-shadow(0 0 1px #83bef9); }\n\n.rstcustom__expandButton::after {\n  -webkit-transform: translate3d(-50%, -20%, 0) rotateZ(-90deg);\n          transform: translate3d(-50%, -20%, 0) rotateZ(-90deg); }\n\n/**\n * Line for under a node with children\n */\n.rstcustom__lineChildren {\n  height: 100%;\n  display: inline-block; }\n\n/* ==========================================================================\n   Scaffold\n\n    Line-overlaid blocks used for showing the tree structure\n   ========================================================================== */\n.rstcustom__lineBlock, .rstcustom__absoluteLineBlock {\n  height: 100%;\n  position: relative;\n  display: inline-block;\n  -webkit-box-flex: 0;\n      -ms-flex: 0 0 auto;\n          flex: 0 0 auto; }\n\n.rstcustom__absoluteLineBlock {\n  position: absolute;\n  top: 0; }\n\n/* Highlight line for pointing to dragged row destination\n   ========================================================================== */\n/**\n * +--+--+\n * |  |  |\n * |  |  |\n * |  |  |\n * +--+--+\n */\n.rstcustom__highlightLineVertical {\n  z-index: 3; }\n  .rstcustom__highlightLineVertical::before {\n    position: absolute;\n    content: '';\n    background-color: #36c2f6;\n    width: 6px;\n    margin-left: -3px;\n    left: 50%;\n    top: 0;\n    height: 100%; }\n\n@-webkit-keyframes rstcustom__arrow-pulse {\n  0% {\n    -webkit-transform: translate(0, 0);\n            transform: translate(0, 0);\n    opacity: 0; }\n  30% {\n    -webkit-transform: translate(0, 300%);\n            transform: translate(0, 300%);\n    opacity: 1; }\n  70% {\n    -webkit-transform: translate(0, 700%);\n            transform: translate(0, 700%);\n    opacity: 1; }\n  100% {\n    -webkit-transform: translate(0, 1000%);\n            transform: translate(0, 1000%);\n    opacity: 0; } }\n\n@keyframes rstcustom__arrow-pulse {\n  0% {\n    -webkit-transform: translate(0, 0);\n            transform: translate(0, 0);\n    opacity: 0; }\n  30% {\n    -webkit-transform: translate(0, 300%);\n            transform: translate(0, 300%);\n    opacity: 1; }\n  70% {\n    -webkit-transform: translate(0, 700%);\n            transform: translate(0, 700%);\n    opacity: 1; }\n  100% {\n    -webkit-transform: translate(0, 1000%);\n            transform: translate(0, 1000%);\n    opacity: 0; } }\n  .rstcustom__highlightLineVertical::after {\n    content: '';\n    position: absolute;\n    height: 0;\n    margin-left: -3px;\n    left: 50%;\n    top: 0;\n    border-left: 3px solid transparent;\n    border-right: 3px solid transparent;\n    border-top: 3px solid white;\n    -webkit-animation: rstcustom__arrow-pulse 1s infinite linear both;\n            animation: rstcustom__arrow-pulse 1s infinite linear both; }\n\n/**\n * +-----+\n * |     |\n * |  +--+\n * |  |  |\n * +--+--+\n */\n.rstcustom__highlightTopLeftCorner::before {\n  z-index: 3;\n  content: '';\n  position: absolute;\n  border-top: solid 6px #36c2f6;\n  border-left: solid 6px #36c2f6;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  height: calc(50% + 3px);\n  top: 50%;\n  margin-top: -3px;\n  right: 0;\n  width: calc(50% + 3px); }\n\n/**\n * +--+--+\n * |  |  |\n * |  |  |\n * |  +->|\n * +-----+\n */\n.rstcustom__highlightBottomLeftCorner {\n  z-index: 3; }\n  .rstcustom__highlightBottomLeftCorner::before {\n    content: '';\n    position: absolute;\n    border-bottom: solid 6px #36c2f6;\n    border-left: solid 6px #36c2f6;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    height: calc(100% + 3px);\n    top: 0;\n    right: 7px;\n    width: calc(50% - 4px); }\n  .rstcustom__highlightBottomLeftCorner::after {\n    content: '';\n    position: absolute;\n    height: 0;\n    right: 0;\n    top: 100%;\n    margin-top: -7px;\n    border-top: 7px solid transparent;\n    border-bottom: 7px solid transparent;\n    border-left: 7px solid #36c2f6; }\n", "" ]), 
+        exports.push([ module.i, ".rstcustom__rowWrapper {\n  height: 100%;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  cursor: move; }\n  .rstcustom__rowWrapper:hover {\n    opacity: 0.7; }\n  .rstcustom__rowWrapper:active {\n    opacity: 1; }\n\n.rstcustom__rowWrapperDragDisabled {\n  cursor: default; }\n\n.rstcustom__row {\n  height: 100%;\n  white-space: nowrap;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  position: relative; }\n  .rstcustom__row > * {\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box; }\n\n/**\n * The outline of where the element will go if dropped, displayed while dragging\n */\n.rstcustom__rowLandingPad, .rstcustom__rowCancelPad {\n  border: none;\n  -webkit-box-shadow: none;\n          box-shadow: none;\n  outline: none; }\n  .rstcustom__rowLandingPad *, .rstcustom__rowCancelPad * {\n    opacity: 0 !important; }\n  .rstcustom__rowLandingPad::before, .rstcustom__rowCancelPad::before {\n    background-color: lightblue;\n    border: 2px dotted black;\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: -1; }\n\n/**\n * Alternate appearance of the landing pad when the dragged location is invalid\n */\n.rstcustom__rowCancelPad::before {\n  background-color: #e6a8ad; }\n\n/**\n * Nodes matching the search conditions are highlighted\n */\n.rstcustom__rowSearchMatch {\n  -webkit-box-shadow: inset 0 -7px 7px -3px #0080ff;\n          box-shadow: inset 0 -7px 7px -3px #0080ff; }\n\n/**\n * The node that matches the search conditions and is currently focused\n */\n.rstcustom__rowSearchFocus {\n  -webkit-box-shadow: inset 0 -7px 7px -3px #fc6421;\n          box-shadow: inset 0 -7px 7px -3px #fc6421; }\n\n.rstcustom__rowContents, .rstcustom__rowLabel, .rstcustom__rowToolbar, .rstcustom__toolbarButton {\n  display: inline-block;\n  vertical-align: middle; }\n\n.rstcustom__rowContents {\n  position: relative;\n  height: 100%;\n  -webkit-box-flex: 1;\n      -ms-flex: 1 0 auto;\n          flex: 1 0 auto;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  -webkit-box-align: center;\n      -ms-flex-align: center;\n          align-items: center;\n  -webkit-box-pack: justify;\n      -ms-flex-pack: justify;\n          justify-content: space-between; }\n\n.rstcustom__rowLabel {\n  -webkit-box-flex: 0;\n      -ms-flex: 0 1 auto;\n          flex: 0 1 auto;\n  padding-right: 20px; }\n\n.rstcustom__rowToolbar {\n  -webkit-box-flex: 0;\n      -ms-flex: 0 1 auto;\n          flex: 0 1 auto;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex; }\n\n.rstcustom__collapseButton,\n.rstcustom__expandButton {\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n  border: none;\n  background: transparent;\n  padding: 0;\n  z-index: 2;\n  position: absolute;\n  top: 45%;\n  width: 30px;\n  height: 30px;\n  -webkit-transform: translate3d(-50%, -50%, 0);\n          transform: translate3d(-50%, -50%, 0);\n  cursor: pointer; }\n  .rstcustom__collapseButton::after,\n  .rstcustom__expandButton::after {\n    content: '';\n    position: absolute;\n    -webkit-transform-origin: 7px 4px;\n        -ms-transform-origin: 7px 4px;\n            transform-origin: 7px 4px;\n    -webkit-transform: translate3d(-50%, -20%, 0);\n            transform: translate3d(-50%, -20%, 0);\n    border: solid transparent 10px;\n    border-left-width: 7px;\n    border-right-width: 7px;\n    border-top-color: gray; }\n  .rstcustom__collapseButton:hover::after,\n  .rstcustom__expandButton:hover::after {\n    border-top-color: black; }\n  .rstcustom__collapseButton:focus,\n  .rstcustom__expandButton:focus {\n    outline: none; }\n    .rstcustom__collapseButton:focus::after,\n    .rstcustom__expandButton:focus::after {\n      -webkit-filter: drop-shadow(0 0 1px #83bef9) drop-shadow(0 0 1px #83bef9) drop-shadow(0 0 1px #83bef9);\n              filter: drop-shadow(0 0 1px #83bef9) drop-shadow(0 0 1px #83bef9) drop-shadow(0 0 1px #83bef9); }\n\n.rstcustom__expandButton::after {\n  -webkit-transform: translate3d(-50%, -20%, 0) rotateZ(-90deg);\n          transform: translate3d(-50%, -20%, 0) rotateZ(-90deg); }\n\n/**\n * Line for under a node with children\n */\n.rstcustom__lineChildren {\n  height: 100%;\n  display: inline-block; }\n\n/* ==========================================================================\n   Scaffold\n\n    Line-overlaid blocks used for showing the tree structure\n   ========================================================================== */\n.rstcustom__lineBlock, .rstcustom__absoluteLineBlock {\n  height: 100%;\n  position: relative;\n  display: inline-block;\n  -webkit-box-flex: 0;\n      -ms-flex: 0 0 auto;\n          flex: 0 0 auto; }\n\n.rstcustom__absoluteLineBlock {\n  position: absolute;\n  top: 0; }\n\n/* Highlight line for pointing to dragged row destination\n   ========================================================================== */\n/**\n * +--+--+\n * |  |  |\n * |  |  |\n * |  |  |\n * +--+--+\n */\n.rstcustom__highlightLineVertical {\n  z-index: 3; }\n  .rstcustom__highlightLineVertical::before {\n    position: absolute;\n    content: '';\n    background-color: #36c2f6;\n    width: 6px;\n    margin-left: -3px;\n    left: 50%;\n    top: 0;\n    height: 100%; }\n\n@-webkit-keyframes rstcustom__arrow-pulse {\n  0% {\n    -webkit-transform: translate(0, 0);\n            transform: translate(0, 0);\n    opacity: 0; }\n  30% {\n    -webkit-transform: translate(0, 300%);\n            transform: translate(0, 300%);\n    opacity: 1; }\n  70% {\n    -webkit-transform: translate(0, 700%);\n            transform: translate(0, 700%);\n    opacity: 1; }\n  100% {\n    -webkit-transform: translate(0, 1000%);\n            transform: translate(0, 1000%);\n    opacity: 0; } }\n\n@keyframes rstcustom__arrow-pulse {\n  0% {\n    -webkit-transform: translate(0, 0);\n            transform: translate(0, 0);\n    opacity: 0; }\n  30% {\n    -webkit-transform: translate(0, 300%);\n            transform: translate(0, 300%);\n    opacity: 1; }\n  70% {\n    -webkit-transform: translate(0, 700%);\n            transform: translate(0, 700%);\n    opacity: 1; }\n  100% {\n    -webkit-transform: translate(0, 1000%);\n            transform: translate(0, 1000%);\n    opacity: 0; } }\n  .rstcustom__highlightLineVertical::after {\n    content: '';\n    position: absolute;\n    height: 0;\n    margin-left: -3px;\n    left: 50%;\n    top: 0;\n    border-left: 3px solid transparent;\n    border-right: 3px solid transparent;\n    border-top: 3px solid white;\n    -webkit-animation: rstcustom__arrow-pulse 1s infinite linear both;\n            animation: rstcustom__arrow-pulse 1s infinite linear both; }\n\n/**\n * +-----+\n * |     |\n * |  +--+\n * |  |  |\n * +--+--+\n */\n.rstcustom__highlightTopLeftCorner::before {\n  z-index: 3;\n  content: '';\n  position: absolute;\n  border-top: solid 6px #36c2f6;\n  border-left: solid 6px #36c2f6;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  height: calc(50% + 3px);\n  top: 50%;\n  margin-top: -3px;\n  right: 0;\n  width: calc(50% + 3px); }\n\n/**\n * +--+--+\n * |  |  |\n * |  |  |\n * |  +->|\n * +-----+\n */\n.rstcustom__highlightBottomLeftCorner {\n  z-index: 3; }\n  .rstcustom__highlightBottomLeftCorner::before {\n    content: '';\n    position: absolute;\n    border-bottom: solid 6px #36c2f6;\n    border-left: solid 6px #36c2f6;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n    height: calc(100% + 3px);\n    top: 0;\n    right: 7px;\n    width: calc(50% - 4px); }\n  .rstcustom__highlightBottomLeftCorner::after {\n    content: '';\n    position: absolute;\n    height: 0;\n    right: 0;\n    top: 100%;\n    margin-top: -7px;\n    border-top: 7px solid transparent;\n    border-bottom: 7px solid transparent;\n    border-left: 7px solid #36c2f6; }\n", "" ]),
         // exports
         exports.locals = {
             rowWrapper: "rstcustom__rowWrapper",
@@ -654,7 +655,7 @@
                 var newUrl;
                 // send back the fixed url(...)
                 //TODO: should we add protocol?
-                return newUrl = 0 === unquotedOrigUrl.indexOf("//") ? unquotedOrigUrl : 0 === unquotedOrigUrl.indexOf("/") ? baseUrl + unquotedOrigUrl : currentDir + unquotedOrigUrl.replace(/^\.\//, ""), 
+                return newUrl = 0 === unquotedOrigUrl.indexOf("//") ? unquotedOrigUrl : 0 === unquotedOrigUrl.indexOf("/") ? baseUrl + unquotedOrigUrl : currentDir + unquotedOrigUrl.replace(/^\.\//, ""),
                 "url(" + JSON.stringify(newUrl) + ")";
             });
         };
@@ -703,12 +704,12 @@
             function defineProperties(target, props) {
                 for (var i = 0; i < props.length; i++) {
                     var descriptor = props[i];
-                    descriptor.enumerable = descriptor.enumerable || !1, descriptor.configurable = !0, 
+                    descriptor.enumerable = descriptor.enumerable || !1, descriptor.configurable = !0,
                     "value" in descriptor && (descriptor.writable = !0), Object.defineProperty(target, descriptor.key, descriptor);
                 }
             }
             return function(Constructor, protoProps, staticProps) {
-                return protoProps && defineProperties(Constructor.prototype, protoProps), staticProps && defineProperties(Constructor, staticProps), 
+                return protoProps && defineProperties(Constructor.prototype, protoProps), staticProps && defineProperties(Constructor, staticProps),
                 Constructor;
             };
         }(), _react = __webpack_require__(0), _react2 = _interopRequireDefault(_react), _propTypes = __webpack_require__(1), _propTypes2 = _interopRequireDefault(_propTypes), _treeNodeRenderer = __webpack_require__(10), _treeNodeRenderer2 = _interopRequireDefault(_treeNodeRenderer), FileThemeTreeNodeRenderer = function(_Component) {
@@ -718,9 +719,9 @@
             return _inherits(FileThemeTreeNodeRenderer, _Component), _createClass(FileThemeTreeNodeRenderer, [ {
                 key: "render",
                 value: function() {
-                    var _props = this.props, children = _props.children, listIndex = _props.listIndex, swapFrom = _props.swapFrom, swapLength = _props.swapLength, swapDepth = _props.swapDepth, lowerSiblingCounts = (_props.scaffoldBlockPxWidth, 
-                    _props.lowerSiblingCounts), connectDropTarget = _props.connectDropTarget, isOver = _props.isOver, draggedNode = _props.draggedNode, canDrop = _props.canDrop, otherProps = (_props.treeIndex, 
-                    _props.treeId, _props.getPrevRow, _props.node, _props.path, _props.rowDirection, 
+                    var _props = this.props, children = _props.children, listIndex = _props.listIndex, swapFrom = _props.swapFrom, swapLength = _props.swapLength, swapDepth = _props.swapDepth, lowerSiblingCounts = (_props.scaffoldBlockPxWidth,
+                    _props.lowerSiblingCounts), connectDropTarget = _props.connectDropTarget, isOver = _props.isOver, draggedNode = _props.draggedNode, canDrop = _props.canDrop, otherProps = (_props.treeIndex,
+                    _props.treeId, _props.getPrevRow, _props.node, _props.path, _props.rowDirection,
                     _objectWithoutProperties(_props, [ "children", "listIndex", "swapFrom", "swapLength", "swapDepth", "scaffoldBlockPxWidth", "lowerSiblingCounts", "connectDropTarget", "isOver", "draggedNode", "canDrop", "treeIndex", "treeId", "getPrevRow", "node", "path", "rowDirection" ]));
                     return connectDropTarget(_react2.default.createElement("div", _extends({}, otherProps, {
                         className: _treeNodeRenderer2.default.node
@@ -787,7 +788,7 @@
     function(module, exports, __webpack_require__) {
         exports = module.exports = __webpack_require__(2)(!1), // imports
         // module
-        exports.push([ module.i, ".rstcustom__node {\n  min-width: 100%;\n  position: relative; }\n", "" ]), 
+        exports.push([ module.i, ".rstcustom__node {\n  min-width: 100%;\n  position: relative; }\n", "" ]),
         // exports
         exports.locals = {
             node: "rstcustom__node"
diff --git a/src/client/sidebar-icons.jsx b/src/client/sidebar-icons.jsx
index d923dd7..5e1c064 100644
--- a/src/client/sidebar-icons.jsx
+++ b/src/client/sidebar-icons.jsx
@@ -1,7 +1,13 @@
 import {compose} from '@avocado/core';
 import classnames from 'classnames';
 import contempo from 'contempo';
-import React, {useState} from 'react';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {useDispatch} from 'react-redux';
+
+import {
+  setIsSidebarExpanded,
+} from './state';
 
 const decorate = compose(
   contempo(require('./sidebar-icons.raw.scss')),
@@ -9,21 +15,22 @@ const decorate = compose(
 
 const SidebarIcons = (props) => {
   const {
-    active: [activeSidebar, setActiveSidebar],
-    isExpanded: [isSidebarExpanded, setIsSidebarExpanded],
+    activeIndex,
+    isExpanded,
   } = props;
+  const dispatch = useDispatch();
   return (
     <div className="sidebar-icons">
       <button
         className={classnames(
           'icon',
           'files',
-          {active: 0 === activeSidebar},
-          {expanded: 0 === activeSidebar && isSidebarExpanded},
+          {active: 0 === activeIndex},
+          {expanded: 0 === activeIndex && isExpanded},
         )}
         onClick={() => {
-          if (0 === activeSidebar) {
-            setIsSidebarExpanded(!isSidebarExpanded);
+          if (0 === activeIndex) {
+            dispatch(setIsSidebarExpanded(!isExpanded));
           }
         }}
         type="button"
@@ -42,6 +49,8 @@ const SidebarIcons = (props) => {
 };
 
 SidebarIcons.propTypes = {
+  activeIndex: PropTypes.number.isRequired,
+  isExpanded: PropTypes.bool.isRequired,
 };
 
-export default decorate(SidebarIcons);
\ No newline at end of file
+export default decorate(SidebarIcons);
diff --git a/src/client/sidebar.jsx b/src/client/sidebar.jsx
index 0c59551..967acea 100644
--- a/src/client/sidebar.jsx
+++ b/src/client/sidebar.jsx
@@ -97,4 +97,4 @@ const Sidebar = () => {
 Sidebar.propTypes = {
 };
 
-export default decorate(Sidebar);
\ No newline at end of file
+export default decorate(Sidebar);
diff --git a/src/client/state.js b/src/client/state.js
index c4ae13c..cca33e9 100644
--- a/src/client/state.js
+++ b/src/client/state.js
@@ -11,9 +11,14 @@ export const activeResourceUriSelector = createSelector(
   (app) => app.activeResourceUri,
 );
 
-export const sidebarIsOpenedSelector = createSelector(
+export const activeSidebarIndexSelector = createSelector(
   appSelector,
-  (app) => app.sidebarIsOpened,
+  (app) => app.activeSidebarIndex,
+);
+
+export const isSidebarExpandedSelector = createSelector(
+  appSelector,
+  (app) => app.isSidebarExpanded,
 );
 
 export const resourceUrisSelector = createSelector(
@@ -25,8 +30,9 @@ const slice = createSlice({
   name: 'app',
   initialState: {
     activeResourceUri: '',
+    activeSidebarIndex: 0,
+    isSidebarExpanded: false,
     resourceUris: [],
-    sidebarIsOpened: false,
   },
   reducers: {
     setActiveResourceUri: (state, {payload: uri}) => {
@@ -35,15 +41,19 @@ const slice = createSlice({
         state.resourceUris.push(uri);
       }
     },
-    setSidebarIsOpened: (state, {payload: isOpened}) => {
-      state.sidebarIsOpened = isOpened;
+    setActiveSidebarIndex: (state, {payload: sidebarIndex}) => {
+      state.activeSidebarIndex = sidebarIndex;
+    },
+    setIsSidebarExpanded: (state, {payload: isExpanded}) => {
+      state.isSidebarExpanded = isExpanded;
     },
   },
 });
 
 export const {
   setActiveResourceUri,
-  setSidebarIsOpened,
+  setActiveSidebarIndex,
+  setIsSidebarExpanded,
 } = slice.actions;
 
 export default slice.reducer;
diff --git a/src/server/sockets/index.js b/src/server/sockets/index.js
index 840d45a..6bf8476 100644
--- a/src/server/sockets/index.js
+++ b/src/server/sockets/index.js
@@ -39,6 +39,7 @@ export function createSocketServer(httpServer) {
                   : resolve(stats.isDirectory() ? '' : filename)
               ));
             }));
+          // eslint-disable-next-line no-shadow
           Promise.all(promises).then((filenames) => {
             const resourceUris = filenames
               .filter((filename) => !!filename)
@@ -49,7 +50,6 @@ export function createSocketServer(httpServer) {
       }
     });
   });
-
   socketServer.io.use(socketSession(session()));
   return socketServer;
 }