Reimplement the local nav without multi-transclusion

The local navigation directive does not require the multi-transclusion
workaround anymore. Instead, it comes with a set of child directives
(`localNavigationRow` and `localNavigationRowSection`) that can be used
to compose a complete local navigation declaratively.

src/core_plugins/kibana/public/context/app.html

@@ -1,39 +1,42 @@
 <div class="app-container">
   <local-navigation>
-    <!-- Transcluded elements. -->
-    <div data-transclude-slots>
+    <local-navigation-row>
       <!-- Breadcrumbs. -->
-      <div data-transclude-slot="primaryLeft" class="localBreadcrumbs">
-        <div class="localBreadcrumb">
-          <a class="localBreadcrumb__link" href="#/discover">Discover</a>
+      <local-navigation-row-section>
+        <div class="localBreadcrumbs">
+          <div class="localBreadcrumb">
+            <a class="localBreadcrumb__link" href="#/discover">Discover</a>
+          </div>
+          <div class="localBreadcrumb">
+            <span>Context of </span>
+            <span class="localBreadcrumb__emphasis" ng-bind="contextApp.anchorUid"></span>
+            <span> in </span>
+            <span class="localBreadcrumb__emphasis" ng-bind="contextApp.indexPattern.id"></span>
+          </div>
         </div>
-        <div class="localBreadcrumb">
-          <span>Context of </span>
-          <span class="localBreadcrumb__emphasis" ng-bind="contextApp.anchorUid"></span>
-          <span> in </span>
-          <span class="localBreadcrumb__emphasis" ng-bind="contextApp.indexPattern.id"></span>
-        </div>
-      </div>
+      </local-navigation-row-section>
 
-      <div data-transclude-slot="primaryRight" class="localMenu">
-        <div class="localMenuItem" ng-click="contextApp.actions.increaseSize()">
-          <div class="fa fa-plus"></div>
-        </div>
-        <div class="localMenuItem">
-          <input
-            class="localMenuItem__input--inPlace"
-            ng-change="contextApp.actions.setSize(contextApp.size)"
-            ng-model-options="{updateOn: 'change'}"
-            ng-model="contextApp.size"
-            type="number"
-          />
-          <div>surrounding entries</div>
+      <local-navigation-row-section>
+        <div class="localMenu">
+          <div class="localMenuItem" ng-click="contextApp.actions.increaseSize()">
+            <div class="fa fa-plus"></div>
+          </div>
+          <div class="localMenuItem">
+            <input
+              class="localMenuItem__input--inPlace"
+              ng-change="contextApp.actions.setSize(contextApp.size)"
+              ng-model-options="{updateOn: 'change'}"
+              ng-model="contextApp.size"
+              type="number"
+            />
+            <div>surrounding entries</div>
+          </div>
+          <div class="localMenuItem" ng-click="contextApp.actions.decreaseSize()">
+            <div class="fa fa-minus"></div>
+          </div>
         </div>
-        <div class="localMenuItem" ng-click="contextApp.actions.decreaseSize()">
-          <div class="fa fa-minus"></div>
-        </div>
-      </div>
-    </div>
+      </local-navigation-row-section>
+    </local-navigation-row>
   </local-navigation>
 
   <div class="container-fluid" role="main">

src/core_plugins/kibana/public/context/app.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 
-import 'ui/local_navigation';
+import 'ui/local_navigation/index';
 import uiModules from 'ui/modules';
 import contextAppTemplate from './app.html';
 import {fetchAnchor} from './api/anchor';

src/ui/public/local_navigation/index.js

@@ -0,0 +1,3 @@
+import './local_navigation';
+import './local_navigation_row';
+import './local_navigation_row_section';

src/ui/public/local_navigation/local_navigation.js

@@ -1,18 +1,15 @@
-import _ from 'lodash';
-import angular from 'angular';
 import uiModules from 'ui/modules';
 
-import 'ui/multi_transclude';
 import './local_navigation.less';
-import localNavigationTemplate from './local_navigation.html';
 
 
 const module = uiModules.get('kibana');
 
 module.directive('localNavigation', function LocalNavigation() {
   return {
+    replace: true,
     restrict: 'E',
-    template: localNavigationTemplate,
+    template: '<div class="localNav" ng-transclude></div>',
     transclude: true,
   };
 });

src/ui/public/local_navigation/local_navigation_row.js

@@ -0,0 +1,18 @@
+import uiModules from 'ui/modules';
+
+import './local_navigation.less';
+
+
+const module = uiModules.get('kibana');
+
+module.directive('localNavigationRow', function LocalNavigationRow() {
+  return {
+    replace: true,
+    restrict: 'E',
+    scope: {
+      isSecondary: '=?',
+    },
+    template: `<div class="localNavRow" ng-class="{ 'localNavigationRow--secondary': isSecondary }" ng-transclude></div>`,
+    transclude: true,
+  };
+});

src/ui/public/local_navigation/local_navigation_row_section.js

@@ -0,0 +1,15 @@
+import uiModules from 'ui/modules';
+
+import './local_navigation.less';
+
+
+const module = uiModules.get('kibana');
+
+module.directive('localNavigationRowSection', function LocalNavigationRowSection() {
+  return {
+    replace: true,
+    restrict: 'E',
+    template: '<div class="localNavRow__section" ng-transclude></div>',
+    transclude: true,
+  };
+});