Left nav progress version 2 (#1141)

* Left nav progress version 2

Based on: https://projects.invisionapp.com/share/3C8BDK9ZD

Updates from previous version:
* menu has spacing and styling as in spec
* menu items are buttons
* menu is scrollabe

.sass-lint.yml

@@ -54,7 +54,7 @@ rules:
   no-vendor-prefixes:
       - 2
       - additional-identifiers: []
-        excluded-identifiers: [ms]
+        excluded-identifiers: [ms, webkit]
   no-warn: 2
   property-units: 2
 

bower.json

@@ -12,7 +12,7 @@
     "angular-sanitize": "~1.5.7",
     "ansi-up": "drudru/ansi_up#~v1.3.0",
     "material-design-icons": "~2.2.3",
-    "roboto-fontface": "~0.5.0",
+    "roboto-fontface": "0.5.0",
     "ng-jsoneditor": "angular-tools/ng-jsoneditor#~1.0.0",
     "angularUtils-pagination": "angular-utils-pagination#~0.11.1"
   },
@@ -21,7 +21,7 @@
       "main": "iconfont/material-icons.css"
     },
     "roboto-fontface": {
-      "main": "css/roboto-fontface.css"
+      "main": "css/roboto/roboto-fontface.css"
     },
     "google-closure-library": {
       "main": [

i18n/messages-en.xtb

@@ -552,4 +552,18 @@
 	<translation id="849285697167851134" key="MSG_SECRET_INFO_LABELS_ENTRY" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Config map info details section labels entry.">Labels</translation>
 	<translation id="3762614397911712807" key="MSG_NODE_DETAIL_PODS_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for pods card zerostate in node details page.">There is nothing to display here</translation>
 	<translation id="4320636739666887610" key="MSG_NODE_DETAIL_PODS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for pods card zerostate in node details page.">There are currently no Pods scheduled on this Node</translation>
+	<translation id="2185990851098499827" key="MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for new replica sets cards zero-state in deployment details page.">There is nothing to display here</translation>
+	<translation id="1301890250709064714" key="MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for new replica set card zero-state in deployment details page.">There are currently no new Replication Controllers on this Deployment</translation>
+	<translation id="6343406325044382774" key="MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for old replica sets cards zero-state in deployment details page.">There is nothing to display here</translation>
+	<translation id="2017479733537577446" key="MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for old replica sets card zero-state in deployment details page.">There are currently no old Replication Controllers on this Deployment</translation>
+	<translation id="2761307282086705878" key="MSG_REPLICA_SET_DETAIL_PODS_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for pods card zerostate in replica set details page.">There is nothing to display here</translation>
+	<translation id="2110359509136089420" key="MSG_REPLICA_SET_DETAIL_PODS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for pods card zerostate in replica set details page.">There are currently no Pods scheduled on this Replica Set</translation>
+	<translation id="6615088016350005296" key="MSG_RC_DETAIL_SERVICES_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for services card zerostate in replication controller details page.">There is nothing to display here</translation>
+	<translation id="1580427714490596183" key="MSG_RC_DETAIL_SERVICES_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for services card zerostate in replication controller details page.">There are currently no Services scheduled on this Replication Controller</translation>
+	<translation id="1910376458037896268" key="MSG_RC_DETAIL_PODS_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for pods card zerostate in replication controller details page.">There is nothing to display here</translation>
+	<translation id="7879546337055672253" key="MSG_RC_DETAIL_PODS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for pods card zerostate in replication controller details page.">There are currently no Pods scheduled on this Replication Controller</translation>
+	<translation id="2834124217521827542" key="MSG_DAEMON_SET_DETAIL_PODS_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for pods card zerostate in daemon set details page.">There is nothing to display here</translation>
+	<translation id="6966925142436210394" key="MSG_DAEMON_SET_DETAIL_PODS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for pods card zerostate in daemon set details page.">There are currently no Pods scheduled on this Daemon Set</translation>
+	<translation id="9095381728458969006" key="MSG_PET_SET_DETAIL_PODS_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for pods card zerostate in pet set details page.">There is nothing to display here</translation>
+	<translation id="2585968200369310069" key="MSG_PET_SET_DETAIL_PODS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for pods card zerostate in pet set details page.">There are currently no Pods scheduled on this Pet Set</translation>
 </translationbundle>
\ No newline at end of file

i18n/messages-ja.xtb

@@ -741,4 +741,18 @@
 	<translation id="849285697167851134" key="MSG_SECRET_INFO_LABELS_ENTRY" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Config map info details section labels entry.">Labels</translation>
 	<translation id="3762614397911712807" key="MSG_NODE_DETAIL_PODS_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for pods card zerostate in node details page.">There is nothing to display here</translation>
 	<translation id="4320636739666887610" key="MSG_NODE_DETAIL_PODS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for pods card zerostate in node details page.">There are currently no Pods scheduled on this Node</translation>
+	<translation id="2185990851098499827" key="MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for new replica sets cards zero-state in deployment details page.">There is nothing to display here</translation>
+	<translation id="1301890250709064714" key="MSG_DEPLOYMENT_DETAIL_NEW_REPLICAS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for new replica set card zero-state in deployment details page.">There are currently no new Replication Controllers on this Deployment</translation>
+	<translation id="6343406325044382774" key="MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for old replica sets cards zero-state in deployment details page.">There is nothing to display here</translation>
+	<translation id="2017479733537577446" key="MSG_DEPLOYMENT_DETAIL_OLD_REPLICAS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for old replica sets card zero-state in deployment details page.">There are currently no old Replication Controllers on this Deployment</translation>
+	<translation id="2761307282086705878" key="MSG_REPLICA_SET_DETAIL_PODS_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for pods card zerostate in replica set details page.">There is nothing to display here</translation>
+	<translation id="2110359509136089420" key="MSG_REPLICA_SET_DETAIL_PODS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for pods card zerostate in replica set details page.">There are currently no Pods scheduled on this Replica Set</translation>
+	<translation id="6615088016350005296" key="MSG_RC_DETAIL_SERVICES_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for services card zerostate in replication controller details page.">There is nothing to display here</translation>
+	<translation id="1580427714490596183" key="MSG_RC_DETAIL_SERVICES_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for services card zerostate in replication controller details page.">There are currently no Services scheduled on this Replication Controller</translation>
+	<translation id="1910376458037896268" key="MSG_RC_DETAIL_PODS_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for pods card zerostate in replication controller details page.">There is nothing to display here</translation>
+	<translation id="7879546337055672253" key="MSG_RC_DETAIL_PODS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for pods card zerostate in replication controller details page.">There are currently no Pods scheduled on this Replication Controller</translation>
+	<translation id="2834124217521827542" key="MSG_DAEMON_SET_DETAIL_PODS_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for pods card zerostate in daemon set details page.">There is nothing to display here</translation>
+	<translation id="6966925142436210394" key="MSG_DAEMON_SET_DETAIL_PODS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for pods card zerostate in daemon set details page.">There are currently no Pods scheduled on this Daemon Set</translation>
+	<translation id="9095381728458969006" key="MSG_PET_SET_DETAIL_PODS_ZEROSTATE_TITLE" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Title for pods card zerostate in pet set details page.">There is nothing to display here</translation>
+	<translation id="2585968200369310069" key="MSG_PET_SET_DETAIL_PODS_ZEROSTATE_TEXT" source="/usr/local/google/home/bryk/src/github.com/kubernetes/dashboard/.tmp/serve/app-dev.js" desc="Text for pods card zerostate in pet set details page.">There are currently no Pods scheduled on this Pet Set</translation>
 </translationbundle>
\ No newline at end of file

src/app/frontend/chrome/chrome.html

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<md-toolbar>
+<md-toolbar class="kd-toolbar">
   <div class="md-toolbar-tools kd-toolbar-tools">
     <kd-nav-hamburger></kd-nav-hamburger>
     <h2>
@@ -25,10 +25,11 @@ limitations under the License.
   </div>
 </md-toolbar>
 
+<kd-actionbar flex="none"></kd-actionbar>
+
 <div layout="row">
   <kd-nav></kd-nav>
   <div layout="column" flex="shrink" class="kd-chrome-content-container">
-    <kd-actionbar ng-if="$ctrl.isActionbarVisible()" flex="none"></kd-actionbar>
     <md-content flex="auto" class="kd-app-content">
       <div ng-switch="$ctrl.showLoadingSpinner" flex="auto" >
         <div ng-switch-when="true" class="kd-center-fixed">

src/app/frontend/chrome/chrome.scss

@@ -104,7 +104,14 @@ a {
   word-wrap: break-word;
 }
 
-// Disables animation on md-tab switch. Avoids some flickering and is simpler.
-[role='tabpanel'] {
-  transition: none;
+// Style scrollbars on Webkit-based browsers (e.g., Chrome or Safari).
+* {
+  &::-webkit-scrollbar {
+    background: transparent;
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: $delicate;
+  }
 }

src/app/frontend/chrome/nav/module.js

+
 // Copyright 2015 Google Inc. All Rights Reserved.
 //
 // Licensed under the Apache License, Version 2.0 (the "License");
@@ -15,6 +16,7 @@
 import {hamburgerComponent} from './hamburger_component';
 import {navComponent} from './nav_component';
 import {NavService} from './nav_service';
+import {navItemComponent} from './navitem_component';
 
 /**
  * Angular module containing navigation for the application.
@@ -24,7 +26,9 @@ export default angular
         'kubernetesDashboard.chrome.nav',
         [
           'ngMaterial',
+          'ui.router',
         ])
     .service('kdNavService', NavService)
     .component('kdNavHamburger', hamburgerComponent)
+    .component('kdNavItem', navItemComponent)
     .component('kdNav', navComponent);

src/app/frontend/chrome/nav/nav.html

@@ -15,5 +15,37 @@ limitations under the License.
 -->
 
 <md-sidenav md-is-locked-open="$ctrl.isVisible" class="kd-nav">
-  Navigation_drawer_here
+  <div class="kd-nav-group">
+    <kd-nav-item class="kd-nav-group-item">Admin</kd-nav-item>
+    <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.namespace}}">Namespaces</kd-nav-item>
+    <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.node}}">Nodes</kd-nav-item>
+    <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.persistentVolume}}">Persistent Volumes</kd-nav-item>
+  </div>
+  <div class="kd-nav-group">
+    <kd-nav-item class="kd-nav-group-item" state="{{::$ctrl.states.overview}}">Overview</kd-nav-item>
+  </div>
+  <div class="kd-nav-group">
+    <kd-nav-item class="kd-nav-group-item" state="{{::$ctrl.states.workload}}">Workloads</kd-nav-item>
+    <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.deployment}}">Deployments</kd-nav-item>
+    <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.replicaSet}}">Replica Sets</kd-nav-item>
+    <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.replicationController}}">Replication Controllers</kd-nav-item>
+    <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.daemonSet}}">Daemon Sets</kd-nav-item>
+    <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.petSet}}">Pet Sets</kd-nav-item>
+    <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.job}}">Jobs</kd-nav-item>
+    <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.pod}}">Pods</kd-nav-item>
+  </div>
+  <div class="kd-nav-group">
+    <kd-nav-item class="kd-nav-group-item" state="{{::$ctrl.states.serviceDiscovery}}">Services and discovery</kd-nav-item>
+    <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.service}}">Services</kd-nav-item>
+    <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.ingress}}">Ingress</kd-nav-item>
+  </div>
+  <div class="kd-nav-group">
+    <kd-nav-item class="kd-nav-group-item" state="{{::$ctrl.states.strage}}">Storage</kd-nav-item>
+    <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.persistentVolumeClaim}}">Persistent Volume Claims</kd-nav-item>
+  </div>
+  <div class="kd-nav-group">
+    <kd-nav-item class="kd-nav-group-item" state="{{::$ctrl.states.config}}">Config</kd-nav-item>
+    <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.secret}}">Secrets</kd-nav-item>
+    <kd-nav-item class="kd-nav-item" state="{{::$ctrl.states.configMap}}">Config Maps</kd-nav-item>
+  </div>
 </md-sidenav>

src/app/frontend/chrome/nav/nav.scss

@@ -16,6 +16,32 @@
 
 .kd-nav {
   background-color: initial;
+  font-size: $body-font-size-base;
   height: 100%;
   overflow: hidden;
+  overflow-y: auto;
+  white-space: nowrap;
+  width: 30 * $baseline-grid;
+
+  &.md-closed {
+    &.md-locked-open-add-active {
+      min-width: 30 * $baseline-grid;
+      width: 30 * $baseline-grid;
+    }
+  }
+
+  // Next two rules are to only show the scrollbar on hover, but always enable scrolling.
+  &:hover {
+    overflow-y: scroll;
+  }
+
+  &:not(:hover) {
+    &::-webkit-scrollbar-thumb {
+      background-color: transparent;
+    }
+  }
+}
+
+.kd-nav-group {
+  margin-right: $baseline-grid;
 }

src/app/frontend/chrome/nav/nav_component.js

@@ -12,6 +12,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {stateName as configMapState} from 'configmaplist/configmaplist_state';
+import {stateName as daemonSetState} from 'daemonsetlist/daemonsetlist_state';
+import {stateName as deploymentState} from 'deploymentlist/deploymentlist_state';
+import {stateName as jobState} from 'joblist/joblist_state';
+import {stateName as namespaceState} from 'namespacelist/namespacelist_state';
+import {stateName as nodeState} from 'nodelist/nodelist_state';
+import {stateName as petSetState} from 'petsetlist/petsetlist_state';
+import {stateName as podState} from 'podlist/podlist_state';
+import {stateName as replicaSetState} from 'replicasetlist/replicasetlist_state';
+import {stateName as replicationControllerState} from 'replicationcontrollerlist/replicationcontrollerlist_state';
+import {stateName as secretState} from 'secretlist/list_state';
+import {stateName as serviceState} from 'servicelist/servicelist_state';
+import {stateName as workloadState} from 'workloads/workloads_state';
+
 /**
  * @final
  */
@@ -26,6 +40,23 @@ export class NavController {
 
     /** @private {!./nav_service.NavService} */
     this.kdNavService_ = kdNavService;
+
+    /** @export {!Object<string, string>} */
+    this.states = {
+      'namespace': namespaceState,
+      'node': nodeState,
+      'workload': workloadState,
+      'pod': podState,
+      'deployment': deploymentState,
+      'replicaSet': replicaSetState,
+      'replicationController': replicationControllerState,
+      'daemonSet': daemonSetState,
+      'petSet': petSetState,
+      'job': jobState,
+      'service': serviceState,
+      'secret': secretState,
+      'configMap': configMapState,
+    };
   }
 
   /** @export */

src/app/frontend/chrome/nav/navitem.html

+<!--
+Copyright 2015 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<md-button ng-href="{{$ctrl.getHref()}}" ng-if="::$ctrl.getHref()" class="kd-nav-item-button">
+  <span ng-transclude></span>
+</md-button>
+<span ng-transclude ng-if="::!$ctrl.getHref()" class="kd-nav-item-button"></span>

src/app/frontend/chrome/nav/navitem.scss

+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+@import '../../variables';
+
+kd-nav-item {
+  display: block;
+}
+
+.kd-nav-item-button {
+  border-radius: 0;
+  display: block;
+  font-weight: $regular-font-weight;
+  line-height: 5 * $baseline-grid;
+  margin: 0;
+  max-height: 5 * $baseline-grid;
+  padding: 0;
+  text-align: left;
+  text-transform: none;
+  white-space: nowrap;
+  width: 100%;
+
+  &:visited {
+    color: inherit;
+  }
+}
+
+.kd-nav-item {
+  >.kd-nav-item-button {
+    line-height: 4 * $baseline-grid;
+    max-height: 4 * $baseline-grid;
+    min-height: 4 * $baseline-grid;
+    padding-left: 3 * $baseline-grid;
+  }
+}
+
+.kd-nav-group-item {
+  >.kd-nav-item-button {
+    font-weight: $bold-font-weight;
+    padding-left: 2 * $baseline-grid;
+  }
+}

src/app/frontend/chrome/nav/navitem_component.js

+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/**
+ * @final
+ */
+export class NavItemController {
+  /**
+   * @param {!ui.router.$state} $state
+   * @ngInject
+   */
+  constructor($state) {
+    /** @export {string} */
+    this.state;
+
+    /** @private {!ui.router.$state} */
+    this.state_ = $state;
+  }
+
+  /**
+   * @return {string}
+   * @export
+   */
+  getHref() { return this.state_.href(this.state); }
+}
+
+/**
+ * @type {!angular.Component}
+ */
+export const navItemComponent = {
+  controller: NavItemController,
+  bindings: {
+    'state': '@',
+  },
+  transclude: true,
+  templateUrl: 'chrome/nav/navitem.html',
+};

src/app/frontend/common/components/actionbar/actionbar_component.js

@@ -36,27 +36,6 @@ export class ActionbarComponent {
     if (!closestContent || closestContent.length === 0) {
       throw new Error('Actionbar component requires sibling md-content element');
     }
-
-    this.computeScrollClass_(closestContent[0]);  // Initialize scroll state at first.
-
-    let computeScrollClassCallback =
-        (/** !Event */ e) => { this.computeScrollClass_(/** @type {!Element} */ (e.target)); };
-    closestContent.on('scroll', computeScrollClassCallback);
-    this.scope_.$on(
-        '$destroy', () => { closestContent.off('scroll', computeScrollClassCallback); });
-  }
-
-  /**
-   * Computes scroll class based on scroll position and applies it to current element.
-   * @param {!Element} mdContentElement
-   * @private
-   */
-  computeScrollClass_(mdContentElement) {
-    if (mdContentElement.scrollTop > 0) {
-      this.element_.removeClass('kd-actionbar-not-scrolled');
-    } else {
-      this.element_.addClass('kd-actionbar-not-scrolled');
-    }
   }
 }
 

src/app/frontend/common/components/breadcrumbs/breadcrumbs.html

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 
-<div ng-switch="$last" ng-repeat="breadcrumb in ::ctrl.breadcrumbs" class="md-title kd-breadcrumbs-ellipsised"
+<div ng-switch="$last" ng-repeat="breadcrumb in ctrl.breadcrumbs" class="md-title kd-breadcrumbs-ellipsised"
     ng-class="{'kd-inline-breadcrumb': !$last}" flex="shrink">
   <a ng-switch-when="false" href="{{::breadcrumb.stateLink}}">
     {{::breadcrumb.label}}

src/app/frontend/common/components/breadcrumbs/breadcrumbs.scss

@@ -17,6 +17,7 @@
 .kd-breadcrumbs-ellipsised {
   display: inline-block;
   float: left;
+  font-weight: $regular-font-weight;
   max-width: 100%;
 }
 

src/app/frontend/common/components/breadcrumbs/breadcrumbs_component.js

@@ -24,9 +24,10 @@ export default class BreadcrumbsController {
    * @param {!ui.router.$state} $state
    * @param {!angular.$interpolate} $interpolate
    * @param {!./../breadcrumbs/breadcrumbs_service.BreadcrumbsService} kdBreadcrumbsService
+   * @param {!angular.Scope} $scope
    * @ngInject
    */
-  constructor($state, $interpolate, kdBreadcrumbsService) {
+  constructor($state, $interpolate, kdBreadcrumbsService, $scope) {
     /** @private {!ui.router.$state} */
     this.state_ = $state;
 
@@ -41,12 +42,19 @@ export default class BreadcrumbsController {
 
     /** @private {!./breadcrumbs_service.BreadcrumbsService} */
     this.kdBreadcrumbsService_ = kdBreadcrumbsService;
+
+    /** @private {!angular.Scope} */
+    this.scope_ = $scope;
   }
 
   /**
    * @export
    */
-  $onInit() { this.breadcrumbs = this.initBreadcrumbs_(); }
+  $onInit() {
+    this.breadcrumbs = this.initBreadcrumbs_();
+
+    this.scope_.$on('$stateChangeSuccess', () => { this.breadcrumbs = this.initBreadcrumbs_(); });
+  }
 
   /**
    * Initializes breadcrumbs array by traversing states parents until none is found.

src/app/frontend/common/components/contentcard/contentcard.scss

@@ -20,7 +20,7 @@
 }
 
 .kd-content-card {
-  padding-bottom: $baseline-grid;
+  padding: $baseline-grid;
 }
 
 .kd-content-card-content-title {

src/app/frontend/daemonsetlist/daemonsetlist_stateconfig.js

@@ -15,7 +15,6 @@
 import {actionbarViewName, stateName as chromeStateName} from 'chrome/chrome_state';
 import {breadcrumbsConfig} from 'common/components/breadcrumbs/breadcrumbs_service';
 import {PaginationService} from 'common/pagination/pagination_service';
-import {stateName as workloadsState} from 'workloads/workloads_state';
 
 import {DaemonSetListController} from './daemonsetlist_controller';
 import {stateName, stateUrl} from './daemonsetlist_state';
@@ -36,7 +35,6 @@ export default function stateConfig($stateProvider) {
     data: {
       [breadcrumbsConfig]: {
         'label': i18n.MSG_BREADCRUMBS_DAEMON_SETS_LABEL,
-        'parent': workloadsState,
       },
     },
     views: {

src/app/frontend/deploymentlist/deploymentlist_stateconfig.js

@@ -15,7 +15,6 @@
 import {actionbarViewName, stateName as chromeStateName} from 'chrome/chrome_state';
 import {breadcrumbsConfig} from 'common/components/breadcrumbs/breadcrumbs_service';
 import {PaginationService} from 'common/pagination/pagination_service';
-import {stateName as workloadsState} from 'workloads/workloads_state';
 
 import {DeploymentListController} from './deploymentlist_controller';
 import {stateName, stateUrl} from './deploymentlist_state';
@@ -36,7 +35,6 @@ export default function stateConfig($stateProvider) {
     data: {
       [breadcrumbsConfig]: {
         'label': i18n.MSG_BREADCRUMBS_DEPLOYMENTS_LABEL,
-        'parent': workloadsState,
       },
     },
     views: {

src/app/frontend/joblist/joblist_stateconfig.js

@@ -15,7 +15,6 @@
 import {actionbarViewName, stateName as chromeStateName} from 'chrome/chrome_state';
 import {breadcrumbsConfig} from 'common/components/breadcrumbs/breadcrumbs_service';
 import {PaginationService} from 'common/pagination/pagination_service';
-import {stateName as workloadsState} from 'workloads/workloads_state';
 
 import {JobListController} from './joblist_controller';
 import {stateName, stateUrl} from './joblist_state';
@@ -36,7 +35,6 @@ export default function stateConfig($stateProvider) {
     data: {
       [breadcrumbsConfig]: {
         'label': i18n.MSG_BREADCRUMBS_JOBS_LABEL,
-        'parent': workloadsState,
       },
     },
     views: {

src/app/frontend/namespacelist/namespacelist_stateconfig.js

@@ -14,7 +14,6 @@
 
 import {actionbarViewName, stateName as chromeStateName} from 'chrome/chrome_state';
 import {breadcrumbsConfig} from 'common/components/breadcrumbs/breadcrumbs_service';
-import {stateName as workloadsState} from 'workloads/workloads_state';
 
 import {NamespaceListController} from './namespacelist_controller';
 import {stateName, stateUrl} from './namespacelist_state';
@@ -35,7 +34,6 @@ export default function stateConfig($stateProvider) {
     data: {
       [breadcrumbsConfig]: {
         'label': i18n.MSG_BREADCRUMBS_NAMESPACES_LABEL,
-        'parent': workloadsState,
       },
     },
     views: {

src/app/frontend/petsetlist/petsetlist_stateconfig.js

@@ -15,7 +15,6 @@
 import {actionbarViewName, stateName as chromeStateName} from 'chrome/chrome_state';
 import {breadcrumbsConfig} from 'common/components/breadcrumbs/breadcrumbs_service';
 import {PaginationService} from 'common/pagination/pagination_service';
-import {stateName as workloadsState} from 'workloads/workloads_state';
 
 import {PetSetListController} from './petsetlist_controller';
 import {stateName, stateUrl} from './petsetlist_state';
@@ -36,7 +35,6 @@ export default function stateConfig($stateProvider) {
     data: {
       [breadcrumbsConfig]: {
         'label': i18n.MSG_BREADCRUMBS_PET_SETS_LABEL,
-        'parent': workloadsState,
       },
     },
     views: {

src/app/frontend/podlist/podlist_stateconfig.js

@@ -15,7 +15,6 @@
 import {actionbarViewName, stateName as chromeStateName} from 'chrome/chrome_state';
 import {breadcrumbsConfig} from 'common/components/breadcrumbs/breadcrumbs_service';
 import {PaginationService} from 'common/pagination/pagination_service';
-import {stateName as workloadsState} from 'workloads/workloads_state';
 
 import {PodListController} from './podlist_controller';
 import {stateName, stateUrl} from './podlist_state';
@@ -36,7 +35,6 @@ export default function stateConfig($stateProvider) {
     data: {
       [breadcrumbsConfig]: {
         'label': i18n.MSG_BREADCRUMBS_PODS_LABEL,
-        'parent': workloadsState,
       },
     },
     views: {

src/app/frontend/replicasetlist/replicasetlist_stateconfig.js

@@ -15,7 +15,6 @@
 import {actionbarViewName, stateName as chromeStateName} from 'chrome/chrome_state';
 import {breadcrumbsConfig} from 'common/components/breadcrumbs/breadcrumbs_service';
 import {PaginationService} from 'common/pagination/pagination_service';
-import {stateName as workloadsState} from 'workloads/workloads_state';
 
 import {ReplicaSetListController} from './replicasetlist_controller';
 import {stateName, stateUrl} from './replicasetlist_state';
@@ -36,7 +35,6 @@ export default function stateConfig($stateProvider) {
     data: {
       [breadcrumbsConfig]: {
         'label': i18n.MSG_BREADCRUMBS_REPLICA_SETS_LABEL,
-        'parent': workloadsState,
       },
     },
     views: {

src/app/frontend/replicationcontrollerlist/replicationcontrollerlist_stateconfig.js

@@ -15,7 +15,6 @@
 import {actionbarViewName, stateName as chromeStateName} from 'chrome/chrome_state';
 import {breadcrumbsConfig} from 'common/components/breadcrumbs/breadcrumbs_service';
 import {PaginationService} from 'common/pagination/pagination_service';
-import {stateName as workloadsState} from 'workloads/workloads_state';
 
 import {ReplicationControllerListController} from './replicationcontrollerlist_controller';
 import {stateName, stateUrl} from './replicationcontrollerlist_state';
@@ -36,7 +35,6 @@ export default function stateConfig($stateProvider) {
     data: {
       [breadcrumbsConfig]: {
         'label': i18n.MSG_BREADCRUMBS_RC_LABEL,
-        'parent': workloadsState,
       },
     },
     views: {

src/test/frontend/chrome/nav/navitem_component_test.js

+// Copyright 2015 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import module from 'chrome/nav/module';
+
+describe('Nav item component', () => {
+  /** @type {!chrome/nav/navitem_component.NavItemController} */
+  let ctrl;
+
+  beforeEach(() => {
+    let fakeModule = angular.module('fakeModule', ['ui.router']);
+    fakeModule.config(($stateProvider) => {
+      $stateProvider.state('fakeState', {
+        url: 'fakeStateUrl',
+        template: '<ui-view>Foo</ui-view>',
+      });
+    });
+    angular.mock.module(module.name);
+    angular.mock.module(fakeModule.name);
+    angular.mock.inject(($componentController, $rootScope) => {
+      ctrl = $componentController('kdNavItem', {$scope: $rootScope}, {state: 'fakeState'});
+    });
+  });
+
+  it('should render href', () => {
+    // initial state assert
+    expect(ctrl.state).toBe('fakeState');
+
+    expect(ctrl.getHref()).toBe('#fakeStateUrl');
+  });
+});

src/test/frontend/common/components/actionbar/actionbar_component_test.js

@@ -17,40 +17,6 @@ import actionbarCardModule from 'common/components/actionbar/actionbar_module';
 describe('Action bar', () => {
   beforeEach(() => angular.mock.module(actionbarCardModule.name));
 
-  it('should add shadow on scroll', angular.mock.inject(($rootScope, $compile) => {
-    let elem = $compile(`
-           <div>
-             <kd-actionbar></kd-actionbar>
-             <md-content>foo</md-content>
-           </div>`)($rootScope);
-
-    let mdContent = elem.find('md-content');
-    let actionbar = elem.find('kd-actionbar');
-
-    // Start with no state.
-    expect(actionbar[0].classList).not.toContain('kd-actionbar-not-scrolled');
-
-    $rootScope.$digest();
-    let abCtrl = actionbar.controller('kdActionbar');
-    // On initial load go with not scrolled state.
-    expect(actionbar[0].classList).toContain('kd-actionbar-not-scrolled');
-
-    abCtrl.computeScrollClass_({scrollTop: 1});
-    // Now it is scrolled
-    expect(actionbar[0].classList).not.toContain('kd-actionbar-not-scrolled');
-
-    mdContent.trigger('scroll');
-    $rootScope.$digest();
-    // Go back.
-    expect(actionbar[0].classList).toContain('kd-actionbar-not-scrolled');
-
-    $rootScope.$destroy();
-    mdContent.trigger('scroll');
-    $rootScope.$digest();
-    // After $destroy - nothing happens.
-    expect(actionbar[0].classList).toContain('kd-actionbar-not-scrolled');
-  }));
-
   it('should throw an error on no content', angular.mock.inject(($rootScope, $compile) => {
     $compile('<kd-actionbar></kd-actionbar>')($rootScope);
     expect(() => { $rootScope.$digest(); }).toThrow();