ux: side nav experiments

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}}

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>
 

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;

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
 // --------------------------------------------------
 

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,

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;

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 {