From ef9fa7b0cc94d4e678116923ffbb24c6bb425bba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Thu, 8 Jun 2017 22:17:43 +0200
Subject: [PATCH 1/5] ux: very early start to new sidemenu

---
 public/app/core/components/navbar/navbar.html |  3 --
 .../core/components/sidemenu/sidemenu.html    |  2 --
 public/sass/_variables.dark.scss              |  9 ++++--
 public/sass/_variables.light.scss             |  5 ++-
 public/sass/_variables.scss                   |  2 +-
 public/sass/components/_navbar.scss           | 21 -------------
 public/sass/components/_row.scss              |  4 +--
 public/sass/components/_sidemenu.scss         | 31 +++++++++++--------
 8 files changed, 31 insertions(+), 46 deletions(-)

diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html
index ea8eb21d6d6..bed1ef0e270 100644
--- a/public/app/core/components/navbar/navbar.html
+++ b/public/app/core/components/navbar/navbar.html
@@ -3,9 +3,6 @@
 		<span class="navbar-brand-btn-background">
 			<img src="public/img/grafana_icon.svg"></img>
 		</span>
-		<i class="icon-gf icon-gf-grafana_wordmark"></i>
-		<i class="fa fa-caret-down"></i>
-		<i class="fa fa-chevron-left"></i>
 	</a>
 
   <a class="navbar-page-btn navbar-page-btn--search" ng-click="ctrl.showSearch()">
diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html
index 8aa3c6ae571..cc28175bd95 100644
--- a/public/app/core/components/sidemenu/sidemenu.html
+++ b/public/app/core/components/sidemenu/sidemenu.html
@@ -13,7 +13,6 @@
 				<span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span>
 			</div>
 		</a>
-		<i class="fa fa-caret-right"></i>
 		<ul class="dropdown-menu" role="menu">
 			<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="::menuItem.cssClass">
 				<span ng-show="::menuItem.section">{{::menuItem.section}}</span>
@@ -42,7 +41,6 @@
 				<img ng-src="{{::item.img}}" ng-show="::item.img">
 			</span>
 			<span class="sidemenu-item-text">{{::item.text}}</span>
-			<span class="fa fa-caret-right" ng-if="::item.children"></span>
 		</a>
 		<ul class="dropdown-menu" role="menu" ng-if="::item.children">
 			<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 27def5ed4b1..95586c9b69f 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -93,6 +93,10 @@ $panel-border:  	      solid 1px $dark-3;
 $panel-drop-zone-bg:    repeating-linear-gradient(-128deg, #111, #111 10px, #191919 10px, #222 20px);
 $panel-menu-border:     solid 1px black;
 
+// Row
+// -------------------------
+$row-menu-bg: $body-bg;
+
 $divider-border-color:        #555;
 
 // Graphite Target Editor
@@ -226,9 +230,8 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
 
 // Sidemenu
 // -------------------------
-$side-menu-bg:            $body-bg;
-$side-menu-item-hover-bg: $dark-3;
-$side-menu-opacity:		  0.97;
+$side-menu-bg:            $dark-3;
+$side-menu-item-hover-bg: $dark-2;
 
 // Pagination
 // -------------------------
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index cd6469cbc04..8e35aa60375 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -100,6 +100,10 @@ $panel-border:       solid 1px $gray-6;
 $panel-drop-zone-bg: repeating-linear-gradient(-128deg, $body-bg, $body-bg 10px, $gray-6 10px, $gray-6 20px);
 $panel-menu-border:  solid 1px white;
 
+// Row
+// -------------------------
+$row-menu-bg: $body-bg;
+
 $divider-border-color:	      $gray-2;
 
 // Graphite Target Editor
@@ -182,7 +186,6 @@ $input-invalid-border-color:     lighten($red, 5%);
 // -------------------------
 $side-menu-bg:            $body-bg;
 $side-menu-item-hover-bg: $gray-6;
-$side-menu-opacity:		  0.97;
 
 // search
 $search-shadow: 0 5px 30px 0 lighten($gray-2, 30%);
diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss
index 186b22f2390..4e99c8bf5ba 100644
--- a/public/sass/_variables.scss
+++ b/public/sass/_variables.scss
@@ -219,7 +219,7 @@ $btn-padding-y-lg:               .75rem !default;
 $btn-border-radius:              2px;
 
 // sidemenu
-$side-menu-width:  14rem;
+$side-menu-width:  68px;
 
 // dashboard
 $panel-margin: 0.4rem;
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index fd336ad94bf..35626986a5f 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -171,27 +171,6 @@
   }
 }
 
-.sidemenu-pinned {
-  .navbar-brand-btn {
-    width: $side-menu-width;
-
-    .icon-gf-grafana_wordmark  {
-      display: inline-block;
-    }
-
-    .fa-caret-down {
-      display: none;
-    }
-
-    &:hover .fa-chevron-left {
-      display: inline-block;
-      color: $text-color-weak;
-      position: relative;
-      left: 1.3rem;
-    }
-  }
-}
-
 .navbar-section-wrapper {
   position: relative;
   float: left;
diff --git a/public/sass/components/_row.scss b/public/sass/components/_row.scss
index 840db839607..1410ec06783 100644
--- a/public/sass/components/_row.scss
+++ b/public/sass/components/_row.scss
@@ -142,7 +142,7 @@ $dash-row-menu-animation-speed: 0.20s;
   list-style: none;
   flex-grow: 1;
   box-shadow: $search-shadow;
-  background: $side-menu-bg;
+  background: $row-menu-bg;
 
   li a {
     display: block;
@@ -150,7 +150,7 @@ $dash-row-menu-animation-speed: 0.20s;
     color: $text-muted;
     font-size: $font-size-sm;
     padding: $spacer/2 $spacer;
-    border-left: 2px solid $side-menu-bg;
+    border-left: 2px solid $row-menu-bg;
     i {
       display: inline-block;
       padding-right: $spacer/2;
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index 0e5402403e5..b4142cc0a88 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -6,8 +6,9 @@
   position: absolute;
   top: 52px;
   left: 0;
+  border-top: 1px solid $navbarBorder;
   width: $side-menu-width;
-  background-color: rgba($side-menu-bg,$side-menu-opacity);
+  background-color: $side-menu-bg;
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
@@ -31,7 +32,7 @@
     min-height: calc(100% - 54px);
   }
   .dashboard-container {
-    padding-left: $side-menu-width + 0.5rem;
+    padding-left: $side-menu-width + 20px;
   }
   .page-container {
     margin-left: $side-menu-width;
@@ -61,8 +62,8 @@
         top: 0px;
         // important to overlap it otherwise it can be hidden
         // again by the mouse getting outside the hover space
-        left: $side-menu-width - 0.2rem;
-        background-color: rgba($side-menu-bg,$side-menu-opacity);
+        left: $side-menu-width - 5px;
+        background-color: $side-menu-bg;
         @include animation('dropdown-anim 150ms ease-in-out 100ms forwards');
         z-index: -9999;
       }
@@ -118,10 +119,22 @@
   padding: 0px 10px 0px 10px;
   display: block;
   border-left: 1px solid transparent;
+  position: relative;
 
 
   .sidemenu-item-text {
     padding-left: 11px;
+    position: absolute;
+    display: none;
+    opacity: 0;
+  }
+
+  &:hover {
+    .sidemenu-item-text {
+      display: block;
+      opacity: 1;
+      transition: opacity 150ms ease-in-out;
+    }
   }
 
   img {
@@ -132,15 +145,6 @@
   }
 }
 
-.sidemenu-section-tagline {
-  font-style: italic;
-  line-height: 10px;
-}
-
-.sidemenu-section-text-wrapper {
-  padding-top: 4px;
-}
-
 .sidemenu-org-section .dropdown-menu-title {
   margin: 0 10px 0 6px;
   padding: 7px 0 7px;
@@ -215,6 +219,7 @@
 .sidemenu-org-details {
   padding-left: 10px;
   color: $link-color;
+  display: none;
 }
 
 .sidemenu-org-name {

From ff2394709df03f435398a505f13113c992754340 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Thu, 8 Jun 2017 23:13:38 +0200
Subject: [PATCH 2/5] ux: very early start to new sidemenu

---
 .../core/components/sidemenu/sidemenu.html    | 74 ++++++++++---------
 public/sass/components/_sidemenu.scss         | 25 ++++---
 2 files changed, 52 insertions(+), 47 deletions(-)

diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html
index cc28175bd95..401a177a604 100644
--- a/public/app/core/components/sidemenu/sidemenu.html
+++ b/public/app/core/components/sidemenu/sidemenu.html
@@ -1,38 +1,5 @@
 <ul class="sidemenu">
 
-	<li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
-		<a class="sidemenu-org" href="profile">
-			<div class="sidemenu-org-avatar">
-				<img ng-src="{{::ctrl.user.gravatarUrl}}">
-				<span class="sidemenu-org-avatar--missing">
-					<i class="fa fa-fw fa-user"></i>
-				</span>
-			</div>
-			<div class="sidemenu-org-details">
-				<span class="sidemenu-org-user sidemenu-item-text">{{::ctrl.user.name}}</span>
-				<span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span>
-			</div>
-		</a>
-		<ul class="dropdown-menu" role="menu">
-			<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="::menuItem.cssClass">
-				<span ng-show="::menuItem.section">{{::menuItem.section}}</span>
-				<a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
-					<i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
-					{{::menuItem.text}}
-				</a>
-			</li>
-            <li ng-show="ctrl.orgs.length > ctrl.maxShownOrgs" style="margin-left: 10px;width: 90%">
-                <span class="sidemenu-item-text">Max shown : {{::ctrl.maxShownOrgs}}</span>
-                <input ng-model="::ctrl.orgFilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadOrgsItems();" class="gf-input-small width-12" placeholder="Filter">
-            </li>
-            <li ng-repeat="orgItem in ctrl.orgItems" ng-class="::orgItem.cssClass">
-				<a href="{{::orgItem.url}}" ng-show="::orgItem.url" target="{{::orgItem.target}}">
-					<i class="{{::orgItem.icon}}" ng-show="::orgItem.icon"></i>
-					{{::orgItem.text}}
-				</a>
-			</li>
-		</ul>
-	</li>
 
 	<li ng-repeat="item in ::ctrl.mainLinks" class="dropdown">
 		<a href="{{::item.url}}" class="sidemenu-item sidemenu-main-link" target="{{::item.target}}">
@@ -40,9 +7,11 @@
 				<i class="{{::item.icon}}" ng-show="::item.icon"></i>
 				<img ng-src="{{::item.img}}" ng-show="::item.img">
 			</span>
-			<span class="sidemenu-item-text">{{::item.text}}</span>
 		</a>
 		<ul class="dropdown-menu" role="menu" ng-if="::item.children">
+			<li class="side-menu-header">
+				<span class="sidemenu-item-text">{{::item.text}}</span>
+			</li>
 			<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
 				<a href="{{::child.url}}">
 					<i class="{{::child.icon}}" ng-show="::child.icon"></i>
@@ -53,12 +22,47 @@
 	</li>
 
 	<li ng-show="::!ctrl.isSignedIn">
-    <a href="{{ctrl.loginUrl}}" class="sidemenu-item" target="_self">
+		<a href="{{ctrl.loginUrl}}" class="sidemenu-item" target="_self">
 			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
 			<span class="sidemenu-item-text">Sign in</span>
 		</a>
 	</li>
 
+	<li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
+		<a class="sidemenu-item sidemenu-main-link" href="profile">
+			<span class="icon-circle sidemenu-icon sidemenu-org-avatar">
+				<img ng-src="{{::ctrl.user.gravatarUrl}}">
+				<span class="sidemenu-org-avatar--missing">
+					<i class="fa fa-fw fa-user"></i>
+				</span>
+			</div>
+		</a>
+		<ul class="dropdown-menu" role="menu">
+			<li class="side-menu-header">
+				<span class="sidemenu-org-user sidemenu-item-text">{{::ctrl.user.name}}</span>
+				<span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span>
+			</li>
+			<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="::menuItem.cssClass">
+				<span ng-show="::menuItem.section">{{::menuItem.section}}</span>
+				<a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
+					<i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
+					{{::menuItem.text}}
+				</a>
+			</li>
+			<li ng-show="ctrl.orgs.length > ctrl.maxShownOrgs" style="margin-left: 10px;width: 90%">
+				<span class="sidemenu-item-text">Max shown : {{::ctrl.maxShownOrgs}}</span>
+				<input ng-model="::ctrl.orgFilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadOrgsItems();" class="gf-input-small width-12" placeholder="Filter">
+			</li>
+			<li ng-repeat="orgItem in ctrl.orgItems" ng-class="::orgItem.cssClass">
+				<a href="{{::orgItem.url}}" ng-show="::orgItem.url" target="{{::orgItem.target}}">
+					<i class="{{::orgItem.icon}}" ng-show="::orgItem.icon"></i>
+					{{::orgItem.text}}
+				</a>
+			</li>
+		</ul>
+	</li>
+
+
 	<li>
 		<a class="sidemenu-item" target="_self" ng-hide="ctrl.contextSrv.pinned" ng-click="ctrl.contextSrv.setPinnedState(true)">
 			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-thumb-tack"></i></span>
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index b4142cc0a88..ca2b4969e00 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -6,7 +6,7 @@
   position: absolute;
   top: 52px;
   left: 0;
-  border-top: 1px solid $navbarBorder;
+  border-top: 1px solid $tight-form-border;
   width: $side-menu-width;
   background-color: $side-menu-bg;
   z-index: 1000;
@@ -64,7 +64,7 @@
         // again by the mouse getting outside the hover space
         left: $side-menu-width - 5px;
         background-color: $side-menu-bg;
-        @include animation('dropdown-anim 150ms ease-in-out 100ms forwards');
+        @include animation('dropdown-anim 0ms ease-in-out 0ms forwards');
         z-index: -9999;
       }
     }
@@ -121,7 +121,6 @@
   border-left: 1px solid transparent;
   position: relative;
 
-
   .sidemenu-item-text {
     padding-left: 11px;
     position: absolute;
@@ -145,6 +144,12 @@
   }
 }
 
+.side-menu-header {
+  padding: 8px 10px 8px 10px;
+  background-color: $side-menu-item-hover-bg;
+  font-size: 18px;
+}
+
 .sidemenu-org-section .dropdown-menu-title {
   margin: 0 10px 0 6px;
   padding: 7px 0 7px;
@@ -194,25 +199,21 @@
 }
 
 .sidemenu-org-avatar {
-  width: 40px;
-  height: 40px;
-  background-color: $gray-2;
-  border-radius: 50%;
-  text-align: center;
-
   >img {
     position: absolute;
-    width: 40px;
-    height: 40px;
+    width: 35px;
+    height: 35px;
     border-radius: 50%;
     left: 14px;
+    top: 12px;
+    z-index: 10;
   }
 }
 
 .sidemenu-org-avatar--missing {
   color: $gray-4;
   text-shadow: 0 1px 0 $dark-1;
-  line-height: 40px;
+  line-height: 28px;
   font-size: $font-size-lg;
 }
 

From f341a21b01cdcdc11c0ba49b0b9a41a7f2ca5bf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Mon, 12 Jun 2017 16:46:02 +0200
Subject: [PATCH 3/5] ux: side nav experiments

---
 public/app/core/components/navbar/navbar.html |  8 +--
 .../core/components/sidemenu/sidemenu.html    | 15 +++--
 public/sass/_variables.dark.scss              | 11 +++-
 public/sass/_variables.light.scss             |  7 ++-
 public/sass/components/_dropdown.scss         | 28 ++++++++++
 public/sass/components/_navbar.scss           | 27 +--------
 public/sass/components/_sidemenu.scss         | 55 ++++++++-----------
 7 files changed, 80 insertions(+), 71 deletions(-)

diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html
index bed1ef0e270..00b6fe68fc8 100644
--- a/public/app/core/components/navbar/navbar.html
+++ b/public/app/core/components/navbar/navbar.html
@@ -5,9 +5,9 @@
 		</span>
 	</a>
 
-  <a class="navbar-page-btn navbar-page-btn--search" ng-click="ctrl.showSearch()">
-		<i class="fa fa-search"></i>
-	</a>
+  <!-- <a class="navbar&#45;page&#45;btn navbar&#45;page&#45;btn&#45;&#45;search" ng&#45;click="ctrl.showSearch()"> -->
+	<!-- 	<i class="fa fa&#45;search"></i> -->
+	<!-- </a> -->
 
 	<div ng-if="::!ctrl.hasMenu">
 		<a href="{{::ctrl.section.url}}" class="navbar-page-btn">
@@ -25,7 +25,7 @@
       <i class="fa fa-caret-down"></i>
     </a>
     <ul class="dropdown-menu dropdown-menu--navbar">
-      <li ng-repeat="navItem in ::ctrl.model.menu" ng-class="{active: navItem.active}">
+      <li ng-repeat="navItem in ::ctrl.model.menu">
         <a class="pointer" ng-href="{{::navItem.url}}" ng-click="ctrl.navItemClicked(navItem, $event)">
           <i class="{{::navItem.icon}}" ng-show="::navItem.icon"></i>
           {{::navItem.title}}
diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html
index 401a177a604..354b44f6aa1 100644
--- a/public/app/core/components/sidemenu/sidemenu.html
+++ b/public/app/core/components/sidemenu/sidemenu.html
@@ -1,14 +1,19 @@
 <ul class="sidemenu">
 
+	<li>
+		<a class="sidemenu-item" ng-click="ctrl.search()">
+			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-search"></i></span>
+		</a>
+	</li>
 
 	<li ng-repeat="item in ::ctrl.mainLinks" class="dropdown">
-		<a href="{{::item.url}}" class="sidemenu-item sidemenu-main-link" target="{{::item.target}}">
+		<a href="{{::item.url}}" class="sidemenu-item" target="{{::item.target}}">
 			<span class="icon-circle sidemenu-icon">
 				<i class="{{::item.icon}}" ng-show="::item.icon"></i>
 				<img ng-src="{{::item.img}}" ng-show="::item.img">
 			</span>
 		</a>
-		<ul class="dropdown-menu" role="menu" ng-if="::item.children">
+		<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu" ng-if="::item.children">
 			<li class="side-menu-header">
 				<span class="sidemenu-item-text">{{::item.text}}</span>
 			</li>
@@ -29,7 +34,7 @@
 	</li>
 
 	<li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
-		<a class="sidemenu-item sidemenu-main-link" href="profile">
+		<a class="sidemenu-item" href="profile">
 			<span class="icon-circle sidemenu-icon sidemenu-org-avatar">
 				<img ng-src="{{::ctrl.user.gravatarUrl}}">
 				<span class="sidemenu-org-avatar--missing">
@@ -37,7 +42,7 @@
 				</span>
 			</div>
 		</a>
-		<ul class="dropdown-menu" role="menu">
+		<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu">
 			<li class="side-menu-header">
 				<span class="sidemenu-org-user sidemenu-item-text">{{::ctrl.user.name}}</span>
 				<span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span>
@@ -62,12 +67,12 @@
 		</ul>
 	</li>
 
-
 	<li>
 		<a class="sidemenu-item" target="_self" ng-hide="ctrl.contextSrv.pinned" ng-click="ctrl.contextSrv.setPinnedState(true)">
 			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-thumb-tack"></i></span>
 			<span class="sidemenu-item-text">Pin</span>
 		</a>
 	</li>
+
 </ul>
 
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 95586c9b69f..1c06f0bdb9d 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -213,7 +213,7 @@ $wellBackground:                  #131517;
 
 $navbarHeight:                    52px;
 $navbarBackgroundHighlight:       $dark-3;
-$navbarBackground:                $dark-3;
+$navbarBackground:                $panel-bg;
 $navbarBorder:                    1px solid $body-bg;
 
 $navbarText:                      $gray-4;
@@ -225,7 +225,7 @@ $navbarLinkBackgroundActive:      $navbarBackground;
 $navbarBrandColor:                $link-color;
 $navbarDropdownShadow:            inset 0px 4px 10px -4px $body-bg;
 
-$navbarButtonBackground:          lighten($navbarBackground, 3%);
+$navbarButtonBackground:          $navbarBackground;
 $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
 
 // Sidemenu
@@ -233,6 +233,13 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
 $side-menu-bg:            $dark-3;
 $side-menu-item-hover-bg: $dark-2;
 
+// Menu dropdowns
+// -------------------------
+$menu-dropdown-bg:            $body-bg;
+$menu-dropdown-hover-bg:      $dark-2;
+$menu-dropdown-border-color:  $dark-4;
+
+
 // Pagination
 // -------------------------
 $paginationBackground:                $body-bg;
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 8e35aa60375..2249b57f9c0 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -187,6 +187,12 @@ $input-invalid-border-color:     lighten($red, 5%);
 $side-menu-bg:            $body-bg;
 $side-menu-item-hover-bg: $gray-6;
 
+// Menu dropdowns
+// -------------------------
+$menu-dropdown-bg:            $white;
+$menu-dropdown-hover-bg:      $gray-6;
+$menu-dropdown-border-color:  $tight-form-border;
+
 // search
 $search-shadow: 0 5px 30px 0 lighten($gray-2, 30%);
 
@@ -206,7 +212,6 @@ $dropdownLinkColorActive:       $link-color;
 $dropdownLinkBackgroundActive:  $gray-6;
 $dropdownLinkBackgroundHover:   $gray-6;
 
-
 // COMPONENT VARIABLES
 // --------------------------------------------------
 
diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss
index 6031c05db3f..679dc6f0527 100644
--- a/public/sass/components/_dropdown.scss
+++ b/public/sass/components/_dropdown.scss
@@ -90,8 +90,36 @@
       }
     }
   }
+
+  &--navbar {
+    top: 100%;
+    min-width: 100%;
+  }
+
+  &--navbar,
+  &--sidemenu {
+    background: $menu-dropdown-bg;
+    margin-top: 0px;
+
+    > li > a {
+      padding: $spacer/2 $spacer;
+      border-left: 2px solid transparent;
+
+      i {
+        display: inline-block;
+        padding-right: 21px;
+      }
+
+      &:hover {
+        @include left-brand-border-gradient();
+        color: $link-hover-color;
+        background: $input-label-bg !important;
+      }
+    }
+  }
 }
 
+
 // Hover/Focus state
 // -----------
 .dropdown-menu > li > a:hover,
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index 35626986a5f..354f9fb3d47 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -60,9 +60,8 @@
   position: relative;
   float: left;
   margin: 0;
-  border-right: 1px solid $tight-form-border;
   background-color: $navbarButtonBackground;
-  padding: 0.4rem 1.0rem 0.4rem 1rem;
+  padding: 0.4rem 2.0rem 0.4rem 1rem;
   min-height:: $navbarHeight;
 
   .fa-caret-down {
@@ -110,7 +109,6 @@
   display: block;
   margin: 0;
   font-size: 1.4rem;
-  border-right: 1px solid $tight-form-border;
   color: darken($link-color, 5%);
   background-color: $navbarButtonBackground;
   font-size: $font-size-lg;
@@ -148,29 +146,6 @@
   position: relative;
 }
 
-.dropdown-menu.dropdown-menu--navbar {
-  top: 100%;
-  min-width: 100%;
-  margin-top: 0px;
-
-  li a {
-    padding: $spacer/2 $spacer;
-    border-left: 2px solid $side-menu-bg;
-    background: $side-menu-bg;
-
-    i {
-      display: inline-block;
-      padding-right: 21px;
-    }
-
-    &:hover {
-      @include left-brand-border-gradient();
-      color: $link-hover-color;
-      background: $input-label-bg;
-    }
-  }
-}
-
 .navbar-section-wrapper {
   position: relative;
   float: left;
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index ca2b4969e00..3617a935340 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -56,14 +56,21 @@
       background-color: $side-menu-item-hover-bg;
       @include left-brand-border-gradient();
 
+      .sidemenu-item {
+        border-top: 1px solid $menu-dropdown-border-color;
+        border-bottom: 1px solid $menu-dropdown-border-color;
+      }
+
       .dropdown-menu {
+        margin: 0;
         display: block;
         opacity: 0;
         top: 0px;
+        border: 1px solid $dark-4;
+        border-left: none;
         // important to overlap it otherwise it can be hidden
         // again by the mouse getting outside the hover space
-        left: $side-menu-width - 5px;
-        background-color: $side-menu-bg;
+        left: $side-menu-width - 2px;
         @include animation('dropdown-anim 0ms ease-in-out 0ms forwards');
         z-index: -9999;
       }
@@ -82,19 +89,6 @@
   }
 }
 
-.sidemenu-main-link {
-  font-size: 16px;
-}
-
-.sidemenu-item-text {
-  width: 110px;
-  display: inline-block;
-  vertical-align: middle;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .icon-circle {
   width: 40px;
   height: 40px;
@@ -104,9 +98,17 @@
     opacity: .7;
     position: relative;
     left: 7px;
-    top: 5px;
     font-size: 150%;
   }
+
+  .fa {
+    top: 2px;
+  }
+
+  .icon-gf {
+    top: 5px;
+  }
+
   img {
     left: 7px;
     position: relative;
@@ -118,23 +120,9 @@
   line-height: 47px;
   padding: 0px 10px 0px 10px;
   display: block;
-  border-left: 1px solid transparent;
   position: relative;
-
-  .sidemenu-item-text {
-    padding-left: 11px;
-    position: absolute;
-    display: none;
-    opacity: 0;
-  }
-
-  &:hover {
-    .sidemenu-item-text {
-      display: block;
-      opacity: 1;
-      transition: opacity 150ms ease-in-out;
-    }
-  }
+  font-size: 16px;
+  border: 1px solid transparent;
 
   img {
     border-radius: 50%;
@@ -145,9 +133,10 @@
 }
 
 .side-menu-header {
-  padding: 8px 10px 8px 10px;
+  padding: 10px;
   background-color: $side-menu-item-hover-bg;
   font-size: 18px;
+  border-bottom: 1px solid $menu-dropdown-border-color;
 }
 
 .sidemenu-org-section .dropdown-menu-title {

From 5061b3c6911c5997b7330270912865f18ba48ac5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Mon, 12 Jun 2017 21:11:22 +0200
Subject: [PATCH 4/5] ux: nav experiments

---
 pkg/api/index.go                              |  4 +--
 public/app/core/components/grafana_app.ts     |  8 -----
 public/app/core/components/navbar/navbar.html |  2 +-
 public/app/core/components/search/search.html |  6 ++--
 .../core/components/sidemenu/sidemenu.html    |  7 -----
 .../app/core/components/sidemenu/sidemenu.ts  |  6 +++-
 public/app/core/services/context_srv.ts       |  4 +--
 public/sass/_variables.dark.scss              |  5 ++--
 public/sass/_variables.light.scss             |  3 +-
 public/sass/components/_dropdown.scss         |  8 +++--
 public/sass/components/_navbar.scss           | 30 +++++++------------
 public/sass/components/_sidemenu.scss         | 14 ++-------
 12 files changed, 36 insertions(+), 61 deletions(-)

diff --git a/pkg/api/index.go b/pkg/api/index.go
index bf7a9fc1759..f2aaf028460 100644
--- a/pkg/api/index.go
+++ b/pkg/api/index.go
@@ -105,8 +105,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 
 	if setting.AlertingEnabled && (c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR) {
 		alertChildNavs := []*dtos.NavLink{
-			{Text: "Alert List", Url: setting.AppSubUrl + "/alerting/list"},
-			{Text: "Notification channels", Url: setting.AppSubUrl + "/alerting/notifications"},
+			{Text: "Alert List", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"},
+			{Text: "Notification channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "fa fa-fw fa-bell-o"},
 		}
 
 		data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts
index 5a677094754..da15beb3aa2 100644
--- a/public/app/core/components/grafana_app.ts
+++ b/public/app/core/components/grafana_app.ts
@@ -199,14 +199,6 @@ export function grafanaAppDirective(playlistSrv, contextSrv) {
           }
         }
 
-        // hide menus
-        var openMenus = body.find('.navbar-page-btn--open');
-        if (openMenus.length > 0) {
-          if (target.parents('.navbar-page-btn--open').length === 0) {
-            openMenus.removeClass('navbar-page-btn--open');
-          }
-        }
-
         // hide sidemenu
         if (!ignoreSideMenuHide && !contextSrv.pinned && body.find('.sidemenu').length > 0) {
           if (target.parents('.sidemenu').length === 0) {
diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html
index 00b6fe68fc8..bcb8a50573c 100644
--- a/public/app/core/components/navbar/navbar.html
+++ b/public/app/core/components/navbar/navbar.html
@@ -17,7 +17,7 @@
     </a>
 	</div>
 
-  <div class="dropdown navbar-section-wrapper"  ng-if="::ctrl.hasMenu">
+  <div class="dropdown navbar-page-btn-wrapper"  ng-if="::ctrl.hasMenu">
     <a href="{{::ctrl.section.url}}" class="navbar-page-btn" data-toggle="dropdown">
       <i class="{{::ctrl.section.icon}}" ng-show="::ctrl.section.icon"></i>
       <img ng-src="{{::ctrl.section.iconUrl}}" ng-show="::ctrl.section.iconUrl"></i>
diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html
index 8cf537ac137..a7f5d074f7b 100644
--- a/public/app/core/components/search/search.html
+++ b/public/app/core/components/search/search.html
@@ -4,9 +4,9 @@
 <div class="search-container" ng-if="ctrl.isOpen">
 
 	<div class="search-field-wrapper">
-		<div class="search-field-icon pointer" ng-click="ctrl.closeSearch()">
-			<i class="fa fa-search"></i>
-		</div>
+		<!-- <div class="search&#45;field&#45;icon pointer" ng&#45;click="ctrl.closeSearch()"> -->
+		<!-- 	<i class="fa fa&#45;search"></i> -->
+		<!-- </div> -->
 
 		<input type="text" placeholder="Find dashboards by name" give-focus="ctrl.giveSearchFocus" tabindex="1"
 						ng-keydown="ctrl.keyDown($event)"
diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html
index 354b44f6aa1..166d5e30688 100644
--- a/public/app/core/components/sidemenu/sidemenu.html
+++ b/public/app/core/components/sidemenu/sidemenu.html
@@ -67,12 +67,5 @@
 		</ul>
 	</li>
 
-	<li>
-		<a class="sidemenu-item" target="_self" ng-hide="ctrl.contextSrv.pinned" ng-click="ctrl.contextSrv.setPinnedState(true)">
-			<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-thumb-tack"></i></span>
-			<span class="sidemenu-item-text">Pin</span>
-		</a>
-	</li>
-
 </ul>
 
diff --git a/public/app/core/components/sidemenu/sidemenu.ts b/public/app/core/components/sidemenu/sidemenu.ts
index 62258a25e7d..44ec473eea5 100644
--- a/public/app/core/components/sidemenu/sidemenu.ts
+++ b/public/app/core/components/sidemenu/sidemenu.ts
@@ -19,7 +19,7 @@ export class SideMenuCtrl {
   maxShownOrgs: number;
 
   /** @ngInject */
-  constructor(private $scope, private $location, private contextSrv, private backendSrv, private $element) {
+  constructor(private $scope, private $rootScope, private $location, private contextSrv, private backendSrv, private $element) {
     this.isSignedIn = contextSrv.isSignedIn;
     this.user = contextSrv.user;
     this.appSubUrl = config.appSubUrl;
@@ -44,6 +44,10 @@ export class SideMenuCtrl {
    return config.appSubUrl + url;
  }
 
+ search() {
+   this.$rootScope.appEvent('show-dash-search');
+ }
+
  openUserDropdown() {
    this.orgMenu = [
      {section: 'You', cssClass: 'dropdown-menu-title'},
diff --git a/public/app/core/services/context_srv.ts b/public/app/core/services/context_srv.ts
index ddff1093720..2ff65fd6d0f 100644
--- a/public/app/core/services/context_srv.ts
+++ b/public/app/core/services/context_srv.ts
@@ -64,9 +64,7 @@ export class ContextSrv {
 
   toggleSideMenu() {
     this.sidemenu = !this.sidemenu;
-    if (!this.sidemenu) {
-      this.setPinnedState(false);
-    }
+    this.setPinnedState(this.sidemenu);
   }
 }
 
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss
index 1c06f0bdb9d..81dfffbd32b 100644
--- a/public/sass/_variables.dark.scss
+++ b/public/sass/_variables.dark.scss
@@ -226,7 +226,7 @@ $navbarBrandColor:                $link-color;
 $navbarDropdownShadow:            inset 0px 4px 10px -4px $body-bg;
 
 $navbarButtonBackground:          $navbarBackground;
-$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
+$navbarButtonBackgroundHighlight: $body-bg;
 
 // Sidemenu
 // -------------------------
@@ -237,7 +237,8 @@ $side-menu-item-hover-bg: $dark-2;
 // -------------------------
 $menu-dropdown-bg:            $body-bg;
 $menu-dropdown-hover-bg:      $dark-2;
-$menu-dropdown-border-color:  $dark-4;
+$menu-dropdown-border-color:  $dark-3;
+$menu-dropdown-shadow: 5px 5px 20px -5px $black;
 
 
 // Pagination
diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss
index 2249b57f9c0..3787305b80d 100644
--- a/public/sass/_variables.light.scss
+++ b/public/sass/_variables.light.scss
@@ -192,9 +192,10 @@ $side-menu-item-hover-bg: $gray-6;
 $menu-dropdown-bg:            $white;
 $menu-dropdown-hover-bg:      $gray-6;
 $menu-dropdown-border-color:  $tight-form-border;
+$menu-dropdown-shadow: 5px 5px 20px -5px $gray-4;
 
 // search
-$search-shadow: 0 5px 30px 0 lighten($gray-2, 30%);
+$search-shadow: 0 5px 30px 0 $gray-4;
 
 // Dropdowns
 // -------------------------
diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss
index 679dc6f0527..c93ae02c083 100644
--- a/public/sass/components/_dropdown.scss
+++ b/public/sass/components/_dropdown.scss
@@ -99,21 +99,23 @@
   &--navbar,
   &--sidemenu {
     background: $menu-dropdown-bg;
+    box-shadow: $menu-dropdown-shadow;
     margin-top: 0px;
+    border: none;
 
     > li > a {
-      padding: $spacer/2 $spacer;
+      padding: $spacer/2 1.2rem;
       border-left: 2px solid transparent;
 
       i {
         display: inline-block;
-        padding-right: 21px;
+        margin-right: 10px;
       }
 
       &:hover {
         @include left-brand-border-gradient();
         color: $link-hover-color;
-        background: $input-label-bg !important;
+        background: $menu-dropdown-hover-bg !important;
       }
     }
   }
diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss
index 354f9fb3d47..bb43946bf6b 100644
--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -60,9 +60,9 @@
   position: relative;
   float: left;
   margin: 0;
-  background-color: $navbarButtonBackground;
-  padding: 0.4rem 2.0rem 0.4rem 1rem;
-  min-height:: $navbarHeight;
+  background-color: $side-menu-bg;
+  padding: 0.4rem 1.0rem 0.4rem 1rem;
+  min-height: $navbarHeight;
 
   .fa-caret-down {
     font-size: 70%;
@@ -101,24 +101,24 @@
   }
 }
 
+.navbar-page-btn-wrapper {
+  float: left;
+  &:hover {
+    background: $navbarButtonBackgroundHighlight;
+  }
+}
+
 .navbar-page-btn {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-  float: left;
   display: block;
   margin: 0;
-  font-size: 1.4rem;
   color: darken($link-color, 5%);
-  background-color: $navbarButtonBackground;
   font-size: $font-size-lg;
   padding: 1rem 1rem 0.75rem 1rem;
   min-height:: $navbarHeight;
 
-  &:hover, &.active {
-    background: $navbarButtonBackgroundHighlight;
-  }
-
   .fa-caret-down {
     font-size: 60%;
     padding-left: 0.2rem;
@@ -129,6 +129,7 @@
     top: 2px;
     font-size: 20px;
     line-height: 8px;
+    margin-right: 0.5rem;
   }
 
   > img {
@@ -141,12 +142,3 @@
   }
 }
 
-.navbar-page-btn-wrapper {
-  display: inline-block;
-  position: relative;
-}
-
-.navbar-section-wrapper {
-  position: relative;
-  float: left;
-}
diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss
index 3617a935340..d72c439afb1 100644
--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -6,7 +6,7 @@
   position: absolute;
   top: 52px;
   left: 0;
-  border-top: 1px solid $tight-form-border;
+  //border-top: 1px solid $tight-form-border;
   width: $side-menu-width;
   background-color: $side-menu-bg;
   z-index: 1000;
@@ -32,7 +32,7 @@
     min-height: calc(100% - 54px);
   }
   .dashboard-container {
-    padding-left: $side-menu-width + 20px;
+    padding-left: $side-menu-width + 8px;
   }
   .page-container {
     margin-left: $side-menu-width;
@@ -56,18 +56,11 @@
       background-color: $side-menu-item-hover-bg;
       @include left-brand-border-gradient();
 
-      .sidemenu-item {
-        border-top: 1px solid $menu-dropdown-border-color;
-        border-bottom: 1px solid $menu-dropdown-border-color;
-      }
-
       .dropdown-menu {
         margin: 0;
         display: block;
         opacity: 0;
         top: 0px;
-        border: 1px solid $dark-4;
-        border-left: none;
         // important to overlap it otherwise it can be hidden
         // again by the mouse getting outside the hover space
         left: $side-menu-width - 2px;
@@ -133,10 +126,9 @@
 }
 
 .side-menu-header {
-  padding: 10px;
+  padding: 10px 10px 10px 20px;
   background-color: $side-menu-item-hover-bg;
   font-size: 18px;
-  border-bottom: 1px solid $menu-dropdown-border-color;
 }
 
 .sidemenu-org-section .dropdown-menu-title {

From 81abfd4ca4f29d9dba66de51e83e6e7fda43284c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Wed, 14 Jun 2017 10:00:40 -0400
Subject: [PATCH 5/5] minor update

---
 public/app/features/alerting/partials/alert_list.html | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/public/app/features/alerting/partials/alert_list.html b/public/app/features/alerting/partials/alert_list.html
index cb76e381bec..7a9f868bbc1 100644
--- a/public/app/features/alerting/partials/alert_list.html
+++ b/public/app/features/alerting/partials/alert_list.html
@@ -7,11 +7,6 @@
 			<i class="fa fa-info-circle"></i>
 			How to add an alert
 		</a>
-
-    <a class="btn btn-inverse" href="alerting/notifications" >
-			<i class="fa fa-cog"></i>
-			Configure notifications
-		</a>
 	</div>
 
   <div class="gf-form-group">