move app switcher to a sidebar

src/ui/public/chrome/directives/app_switcher/app_switcher.html

@@ -1,18 +1,16 @@
-<div class="app-links">
-  <div
-    class="app-link"
-    ng-repeat="link in switcher.getNavLinks()"
-    ng-class="{ active: link.active }">
+<div
+  class="app-link"
+  ng-repeat="link in switcher.getNavLinks()"
+  ng-class="{ active: link.active }">
 
-    <a
-      ng-click="switcher.ensureNavigation($event, link)"
-      ng-href="{{ link.active ? link.url : (link.lastSubUrl || link.url) }}"
-      data-test-subj="appLink">
+  <a
+    ng-click="switcher.ensureNavigation($event, link)"
+    ng-href="{{ link.active ? link.url : (link.lastSubUrl || link.url) }}"
+    data-test-subj="appLink">
 
-      <div ng-if="link.icon" ng-style="{ 'background-image': 'url(../' + link.icon + ')' }" class="app-icon"></div>
-      <div ng-if="!link.icon" class="app-icon app-icon-missing">{{ link.title[0] }}</div>
+    <div ng-if="link.icon" ng-style="{ 'background-image': 'url(../' + link.icon + ')' }" class="app-icon"></div>
+    <div ng-if="!link.icon" class="app-icon app-icon-missing">{{ link.title[0] }}</div>
 
-      <div class="app-title">{{ link.title }}</div>
-    </a>
-  </div>
+    <div class="app-title">{{ link.title }}</div>
+  </a>
 </div>

src/ui/public/chrome/directives/app_switcher/app_switcher.js

@@ -1,7 +1,7 @@
 var parse = require('url').parse;
 var bindKey = require('lodash').bindKey;
 
-require('../app_switcher/app_switcher.less');
+require('./app_switcher.less');
 var DomLocationProvider = require('ui/domLocation');
 
 require('ui/modules')
@@ -39,7 +39,7 @@ require('ui/modules')
     };
   }];
 })
-.directive('appSwitcher', function () {
+.directive('kbnAppSwitcher', function () {
   return {
     restrict: 'E',
     template: require('./app_switcher.html'),

src/ui/public/chrome/directives/app_switcher/app_switcher.less

@@ -3,8 +3,10 @@
 @app-icon-size: 48px;
 @app-icon-padding: 10px;
 
-.app-links {
-  text-align: justify;
+kbn-app-switcher {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
   .app-link {
     display: inline-block;
@@ -52,7 +54,5 @@
         text-decoration: underline;
       }
     }
-
   }
-
 }

src/ui/public/chrome/directives/kbn_chrome/kbn_chrome.html

@@ -0,0 +1,5 @@
+<kbn-notifications list="notifList"></kbn-notifications>
+<div class="content">
+  <kbn-app-switcher></kbn-app-switcher>
+  <kbn-app-container ng-view></kbn-app-container>
+</div>

src/ui/public/chrome/directives/kbn_chrome.js → src/ui/public/chrome/directives/kbn_chrome/kbn_chrome.js

@@ -2,6 +2,8 @@ import $ from 'jquery';
 
 import UiModules from 'ui/modules';
 import ConfigTemplate from 'ui/ConfigTemplate';
+import kbnChromeHtml from './kbn_chrome.html';
+import './kbn_chrome.less';
 
 export default function (chrome, internals) {
 
@@ -10,8 +12,8 @@ export default function (chrome, internals) {
   .directive('kbnChrome', function ($rootScope) {
     return {
       template($el) {
-        const $content = $(require('ui/chrome/chrome.html'));
-        const $app = $content.find('.application');
+        const $content = $(kbnChromeHtml);
+        const $app = $content.find('kbn-app-container');
 
         if (internals.rootController) {
           $app.attr('ng-controller', internals.rootController);
@@ -46,9 +48,6 @@ export default function (chrome, internals) {
         // and some local values
         $scope.httpActive = $http.pendingRequests;
         $scope.notifList = require('ui/notify')._notifs;
-        $scope.appSwitcherTemplate = new ConfigTemplate({
-          switcher: '<app-switcher></app-switcher>'
-        });
 
         return chrome;
       }

src/ui/public/chrome/directives/kbn_chrome/kbn_chrome.less

@@ -0,0 +1,73 @@
+@import (reference) "~ui/styles/variables";
+
+@app-icon-size: 48px;
+@app-icon-padding: 10px;
+
+body[kbn-chrome] {
+  > .content {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+
+    kbn-app-container {
+      display: flex;
+      flex: 1 1 auto;
+      flex-direction: column;
+    }
+
+    kbn-app-switcher {
+      flex: 0 0 auto;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .app-link {
+        display: inline-block;
+        vertical-align: top;
+        text-align: left;
+        width: @app-icon-size + (@app-icon-padding * 2);
+        margin: 0px 10px;
+        padding: @app-icon-padding;
+        border-radius: @border-radius-base;
+
+        .app-icon {
+          display: block;
+          height: @app-icon-size;
+          width: @app-icon-size;
+          background-position: center;
+          background-size: contain;
+          border-radius: @border-radius-base;
+          background-color: @gray-light;
+          width: 100%;
+
+          &-missing {
+            text-align: center;
+            font-size: 2.7em;
+            font-weight: bold;
+            font-family: @font-family-sans-serif;
+            color: #fff;
+          }
+        }
+
+        .app-title {
+          color: @text-color;
+          font-size: 0.9em;
+          width: 100%;
+          text-align: center;
+          margin-top: 3px;
+        }
+
+        &:hover .app-title {
+          text-decoration: underline;
+        }
+
+        &.active {
+          background: @gray-lighter;
+          .app-title {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+  }
+}