From cd0256d40d0bdce140ba2325c51a794d83289e70 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Thu, 14 Jan 2016 21:20:56 +0100
Subject: [PATCH] poc(new nav): beginings....

---
 .../dashboard/partials/dashboardTopNav.html   |  14 +-
 public/less/navbar.less                       | 147 +++++++++++-------
 2 files changed, 96 insertions(+), 65 deletions(-)

diff --git a/public/app/features/dashboard/partials/dashboardTopNav.html b/public/app/features/dashboard/partials/dashboardTopNav.html
index 461650c9d0e..200dc872926 100644
--- a/public/app/features/dashboard/partials/dashboardTopNav.html
+++ b/public/app/features/dashboard/partials/dashboardTopNav.html
@@ -3,12 +3,16 @@
 		<div class="container-fluid">
 
 			<div class="top-nav">
-				<a class="pointer top-nav-menu-btn" ng-if="!contextSrv.sidemenu" ng-click="contextSrv.toggleSideMenu()">
-					<img class="logo-icon" src="img/fav32.png"></img>
-					<i class="fa fa-bars"></i>
-				</a>
+				<div class="top-nav-btn top-nav-menu-btn">
+					<a class="pointer" ng-click="openSearch()">
+						<span class="top-nav-logo-background">
+							<img class="logo-icon" src="img/fav32.png"></img>
+						</span>
+						<i class="fa fa-caret-down"></i>
+					</a>
+				</div>
 
-				<div class="top-nav-dashboards-btn">
+				<div class="top-nav-btn top-nav-dashboards-btn">
 					<a class="pointer" ng-click="openSearch()">
 						<i class="fa fa-th-large"></i>
 						<span class="dashboard-title">{{dashboard.title}}</span>
diff --git a/public/less/navbar.less b/public/less/navbar.less
index d5c74f8042a..7be191e4d73 100644
--- a/public/less/navbar.less
+++ b/public/less/navbar.less
@@ -20,77 +20,104 @@
   color: @textColor;
 }
 
-.top-nav-menu-btn {
-  border: 1px solid @bodyBackground;
-  border-radius: 50%;
-  background: @iconContainerBackground;
-  display: block;
-  position: relative;
-  float: left;
-  width: 30px;
-  height: 30px;
-  padding: 4px;
-  margin: 6px 6px 3px 9px;
-  .fa {
-    color: @textColor;
-    width: 30px;
-    height: 30px;
-    left: 9px;
-    top: 7px;
-    font-size: 150%;
-    opacity: 0;
-    position: absolute;
-    transition: opacity .20s ease-in-out;
-  }
-  img {
-    width: 30px;
-    position: absolute;
-    opacity: 1;
-    transition: opacity .20s ease-in-out;
-  }
-  &:hover {
-    .fa {
-      opacity: .7;
-    }
-    img {
-      opacity: 0;
-    }
-  }
-}
+// .top-nav-menu-btn {
+//   float: left;
+//   .top-nav-menu-circle {
+//     border: 1px solid @bodyBackground;
+//     margin: 6px 6px 3px 9px;
+//     display: inline-block;
+//     padding: 4px;
+//     border-radius: 50%;
+//     background: @iconContainerBackground;
+//     width: 30px;
+//     height: 30px;
+//     float: left;
+//   }
+//   .fa-bars {
+//     color: @textColor;
+//     width: 30px;
+//     height: 30px;
+//     left: 9px;
+//     top: 7px;
+//     font-size: 150%;
+//     opacity: 0;
+//     position: absolute;
+//     transition: opacity .20s ease-in-out;
+//   }
+//   .fa-caret-down {
+//     position: relative;
+//     font-size: 80%;
+//   }
+//   img {
+//     width: 30px;
+//     position: absolute;
+//     opacity: 1;
+//     transition: opacity .20s ease-in-out;
+//   }
+//   &:hover {
+//     .fa {
+//       opacity: .7;
+//     }
+//     img {
+//       opacity: 0;
+//     }
+//   }
+// }
 
-.top-nav-dashboards-btn {
+.top-nav-btn {
   display: block;
   float: left;
-  margin: 9px 18px 5px 14px;
-  border-radius: 3px;
+  margin: 0;
   font-size: 1.4em;
   color: #a2a2a2;
-  border: @grafanaTriggerBorder;
-  a {
-    background-color: @grafanaTargetFuncBackground;
-    display: inline-block;
-    padding: 5px 15px 5px 10px;
-    border-radius: 3px;
-    color: #a2a2a2;
-
-    &:hover {
-      background: @grafanaTargetFuncBackground;
-      .fa {
-        color: @linkColor;
-      }
-    }
-  }
-
-  .fa-th-large {
-    position: relative;
-    top: 2px;
-  }
+  border-right: 1px solid black;
 
   .fa-caret-down {
     font-size: 60%;
     position: relative;
     top: 4px;
   }
+
+  a {
+    background-color: darken(@grafanaTargetFuncBackground, 2%);
+    display: inline-block;
+    color: #a2a2a2;
+    &:hover {
+      background: @grafanaTargetFuncBackground;
+      color: @linkColor;
+      border-bottom: 1px solid @blue;
+    }
+  }
+}
+
+.top-nav-menu-btn {
+  a {
+    padding: 6px 15px 6px 10px;
+  }
+  img {
+    width: 30px;
+    position: relative;
+  }
+  .top-nav-logo-background {
+    display: inline-block;
+    border: 1px solid @bodyBackground;
+    padding: 4px;
+    border-radius: 50%;
+    background: @iconContainerBackground;
+    width: 30px;
+    height: 30px;
+  }
+}
+
+.top-nav-dashboards-btn {
+  a {
+    padding: 14px 15px 14px 10px;
+  }
+
+  .fa-th-large {
+    position: relative;
+    top: 2px;
+  }
 }
 
 .dashboard-title {