Work on new top nav design

src/app/controllers/grafanaCtrl.js

@@ -30,6 +30,7 @@ function (angular, config, _, $, store) {
       $scope.grafana.style = 'dark';
       $scope.grafana.user = userSrv.getSignedInUser();
       $scope.grafana.sidemenu = store.getBool('grafana.sidemenu');
+      $scope.topnav = { title: 'Grafana' };
 
       $scope.onAppEvent('logged-out', function() {
         $scope.grafana.sidemenu = false;

src/app/directives/all.js

@@ -16,4 +16,5 @@ define([
   './graphiteSegment',
   './grafanaVersionCheck',
   './dropdown.typeahead',
+  './navHeader',
 ], function () {});

src/app/features/dashboard/dashboardCtrl.js

@@ -61,6 +61,9 @@ function (angular, $, config, _) {
     $scope.setWindowTitleAndTheme = function() {
       window.document.title = config.window_title_prefix + $scope.dashboard.title;
       $scope.grafana.style = $scope.dashboard.style;
+      $scope.topnav.title = $scope.dashboard.title;
+      $scope.topnav.icon = "fa fa-th-large";
+      $scope.topnav.titleAction = function() { alert("hej"); };
     };
 
     $scope.isPanel = function(obj) {

src/app/partials/dashboard_topnav.html

@@ -1,19 +1,23 @@
 <div class="navbar navbar-static-top" ng-controller='DashboardNavCtrl' ng-init="init()">
 	<div class="navbar-inner">
 		<div class="container-fluid">
-			<span class="hamburger">
-				<a class="pointer" ng-click="toggleSideMenu()">
-					<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
-					Menu
-				</a>
-			</span>
-			<div class="navbar-header">
-				<div class="navbar-header-breadcrumb">
-					Dashboards <i class="fa fa-angle-right"></i>
-				</div>
-				<a ng-click="openSearch()" class="page-title">
-					<i class="fa fa-th-large"></i> {{dashboard.title}}
-					<span class="small">
+
+			<div class="top-nav">
+				<span class="top-nav-menu-btn" ng-if="!grafana.sidemenu">
+					<a class="pointer" ng-click="toggleSideMenu()">
+						<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
+						<span>menu</span>
+					</a>
+				</span>
+
+				<span class="top-nav-breadcrumb">
+					<i class="top-nav-icon" ng-class="topnav.icon"></i>
+					<i class="fa fa-angle-right"></i>
+				</span>
+
+				<a ng-click="topnav.titleAction()" class="top-nav-title">
+					{{topnav.title}}
+					<span class="small" ng-show="topnav.titleAction">
 						<i class="fa fa-angle-down"></i>
 					</span>
 				</a>

src/app/partials/sidemenu.html

@@ -1,5 +1,11 @@
 <div ng-controller="SideMenuCtrl" ng-init="init()">
 	<ul class="sidemenu">
+		<li class="sidemenu-logo-container">
+			<img ng-src="{{appSubUrl}}/img/logo_transparent_200x.png" style="width: 80px">
+			<a ng-click="toggleSideMenu()" class="pull-right pointer">
+				<i class="fa fa-chevron-right"></i>
+			</a>
+		</li>
 		<li class="dropdown" ng-if="grafana.user.isSignedIn">
 			<a class="sidemenu-user pointer" data-toggle="dropdown" title="{{grafana.user.email}}">
 				<span class="gravatar-missing">f</span>

src/css/less/bootswatch.dark.less

@@ -63,7 +63,7 @@ hr {
 	}
 
 	.nav > li > a {
-		padding: 22px 15px 16px;
+		padding: 15px 15px 14px;
 		border-bottom: 1px solid transparent;
 	}
 

src/css/less/grafana.less

@@ -47,38 +47,54 @@
 
 .logo-icon {
   width: 24px;
-  display: block;
-  padding-right: 5px;
-  float: left;
 }
 
-.navbar .brand {
-  margin-left: 0;
+.navbar-inner {
+  padding-left: 0px;
 }
 
-.hamburger {
+.top-nav {
   float: left;
-  padding: 17px 20px 16px 0;
-  font-size: 1.1em;
-  color: @gray;
 }
 
-.navbar-header {
+.top-nav-menu-btn {
+  display: block;
   float: left;
-  padding: 10px;
-  .navbar-header-breadcrumb {
-    font-size: 90%;
-    padding-bottom: 4px;
+  padding: 15px 13px 13px 14px;;
+  position: relative;
+  background: @black;
+  font-weight: bold;
+  font-size: 90%;
+  span {
+    position: relative;
+    top: 2px;
+  }
+}
+
+.top-nav-breadcrumb {
+  display: block;
+  float: left;
+  padding: 18px 9px 12px 12px;
+  font-size: 1.4em;
+  font-weight: bold;
+  color: darken(@gray, 10%);
+  i {
+    padding-left: 4px;
+  }
+  .fa-angle-right {
   }
 }
 
-.page-title {
- i {
-   padding-right: 6px;
- }
- display: block;
- font-size: 1.3em;
- font-weight: bold;
+.top-nav-title {
+  display: block;
+  float: left;
+  padding: 18px 10px 10px 0px;
+  font-size: 1.3em;
+  font-weight: bold;
+  i {
+    position: relative;
+    top: 3px;
+  }
 }
 
 .row-button {