with help from lucas, updated sidebar open,close logic to only switch a CSS class

Author: marcgurney

scout-ui/src/home/collection.jade

@@ -16,5 +16,9 @@
         i.fa.fa-caret-left
         | 
         i.fa.fa-file-text-o
-    .column.side
+      button.btn.btn-link.splitter-button.hidden
+        i.fa.fa-file-text-o
+        | 
+        i.fa.fa-caret-right
+    .column.side(data-hook='collection-side')
       div(data-hook='documents-subview')

scout-ui/src/home/collection.js

@@ -17,26 +17,17 @@ module.exports = AmpersandView.extend({
       default: false
     }
   },
-  derived: {
-    sidebarWidth: {
-      deps: ['open'],
-      fn: function() {
-        return this.open ? 400 : 0;
-      }
-    }
-  },
   events: {
     'click .splitter': 'onSplitterClick',
   },
   bindings: {
     'model._id': {
       hook: 'name'
     },
-    'sidebarWidth': {
-      type: function(el, value) {
-        $(el).width(value);
-      },
-      selector: '.side'
+    'open': {
+      type: 'booleanClass',
+      yes: 'is-open',
+      hook: 'collection-side'
     }
   },
   children: {

scout-ui/src/home/index.less

@@ -111,11 +111,15 @@
   }
 
   .side {
-    width: 350px;
+    width: 0;
     font-family: @font-family-monospace;
     font-size: 11px;
     border-left: 2px solid @gray7;
     right: -12px;
+
+    &.is-open {
+      width: 400px;
+    }
   }
 
   .splitter {