Collapsible sidebar

src/kibana/components/collapsible_sidebar/collapsible_sidebar.js

@@ -0,0 +1,37 @@
+define(function (require) {
+  require('css!components/collapsible_sidebar/collapsible_sidebar.css');
+
+  var _ = require('lodash');
+  var $ = require('jquery');
+
+  require('modules')
+  .get('kibana')
+  .directive('collapsibleSidebar', function () {
+    var listOfWidthClasses = 1;
+    // simply a list of all of all of angulars .col-md-* classes except 12
+    listOfWidthClasses = _(new Array(11)).map(function (n) { return 'col-md-' + listOfWidthClasses++; });
+
+    return {
+      restrict: 'C',
+      link: function ($scope, $elem) {
+        var $collapser = $('<div class="sidebar-collapser"><div class="chevron-cont"></div></div>');
+        var $siblings = $elem.siblings();
+
+        var siblingsClass = listOfWidthClasses.reduce(function (prev, className) {
+          if (prev) return prev;
+          return $siblings.hasClass(className) && className;
+        }, false);
+
+        $collapser.on('click', function () {
+          $elem.toggleClass('closed');
+          // if there is are only two elements we can assume the other one will take 100% of the width
+          if ($siblings.length === 1 && siblingsClass) {
+            $siblings.toggleClass(siblingsClass + ' col-md-12');
+          }
+        })
+
+        .appendTo($elem);
+      }
+    };
+  });
+});

src/kibana/components/collapsible_sidebar/collapsible_sidebar.less

@@ -0,0 +1,58 @@
+.sidebar-container.collapsible-sidebar {
+  position: relative;
+  z-index: 1;
+
+  .sidebar-collapser {
+    background-color: #ecf0f1;
+    height: 28px;
+    position: absolute;
+    top: 0;
+    right: -20px;
+    width: 20px;
+    border: 1px solid #ecf0f1;
+    border-width: 0 1px 1px 0;
+    cursor: pointer;
+    z-index: -1;
+    border-bottom-right-radius: 4px;
+
+    .chevron-cont{
+      position: absolute;
+      left: 4px;
+      top: 5px;
+
+      &:before {
+        font-family: FontAwesome;
+        color: #333;
+        content: "\F053";
+      }
+    }
+  }
+
+  &.closed {
+    width: 0 !important;
+    border-right-width: 0;
+    border-left-width: 0;
+
+    > * {
+      visibility: hidden;
+    }
+
+    .sidebar-collapser {
+      visibility: visible;
+      .chevron-cont:before {
+        content: "\F054";
+      }
+    }
+  }
+}
+
+@media (max-width: 992px) {
+  .sidebar-container.collapsible-sidebar {
+    &.closed {
+      display: none;
+    }
+    .sidebar-collapser {
+      display: none;
+    }
+  }
+}

src/kibana/plugins/discover/index.html

@@ -43,7 +43,7 @@
       <filter-bar state="state"></filter-bar>
     </div>
     <div class="row">
-      <div class="col-md-2 sidebar-container">
+      <div class="col-md-2 sidebar-container collapsible-sidebar">
         <disc-field-chooser
           fields="fields"
           toggle="toggleField"

src/kibana/plugins/discover/index.js

@@ -1,6 +1,7 @@
 define(function (require, module, exports) {
   require('plugins/discover/saved_searches/saved_searches');
   require('plugins/discover/directives/timechart');
+  require('components/collapsible_sidebar/collapsible_sidebar');
   require('plugins/discover/components/field_chooser/field_chooser');
   require('plugins/discover/controllers/discover');
   require('css!plugins/discover/styles/main.css');
@@ -13,4 +14,4 @@ define(function (require, module, exports) {
       order: 0
     };
   });
-});
+});