ux: very early start to new sidemenu

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()">

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

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

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%);

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;

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;

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;

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 {