merging new-sidenav

public/sass/components/_dropdown.scss

@@ -90,8 +90,38 @@
       }
     }
   }
+
+  &--navbar {
+    top: 100%;
+    min-width: 100%;
+  }
+
+  &--navbar,
+  &--sidemenu {
+    background: $menu-dropdown-bg;
+    box-shadow: $menu-dropdown-shadow;
+    margin-top: 0px;
+    border: none;
+
+    > li > a {
+      padding: $spacer/2 1.2rem;
+      border-left: 2px solid transparent;
+
+      i {
+        display: inline-block;
+        margin-right: 10px;
+      }
+
+      &:hover {
+        @include left-brand-border-gradient();
+        color: $link-hover-color;
+        background: $menu-dropdown-hover-bg !important;
+      }
+    }
+  }
 }
 
+
 // Hover/Focus state
 // -----------
 .dropdown-menu > li > a:hover,

public/sass/components/_navbar.scss

@@ -60,10 +60,9 @@
   position: relative;
   float: left;
   margin: 0;
-  border-right: 1px solid $tight-form-border;
-  background-color: $navbarButtonBackground;
+  background-color: $side-menu-bg;
   padding: 0.4rem 1.0rem 0.4rem 1rem;
-  min-height:: $navbarHeight;
+  min-height: $navbarHeight;
 
   .fa-caret-down {
     font-size: 70%;
@@ -102,25 +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;
-  border-right: 1px solid $tight-form-border;
   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;
@@ -131,6 +129,7 @@
     top: 2px;
     font-size: 20px;
     line-height: 8px;
+    margin-right: 0.5rem;
   }
 
   > img {
@@ -148,49 +147,6 @@
   position: relative;
 }
 
-.dropdown-menu.dropdown-menu--navbar {
-  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;
-    }
-  }
-}
-
-.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 $tight-form-border;
   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 + 8px;
   }
   .page-container {
     margin-left: $side-menu-width;
@@ -56,14 +57,14 @@
       @include left-brand-border-gradient();
 
       .dropdown-menu {
+        margin: 0;
         display: block;
         opacity: 0;
         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);
-        @include animation('dropdown-anim 150ms ease-in-out 100ms forwards');
+        left: $side-menu-width - 2px;
+        @include animation('dropdown-anim 0ms ease-in-out 0ms forwards');
         z-index: -9999;
       }
     }
@@ -81,19 +82,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;
@@ -103,9 +91,17 @@
     opacity: .7;
     position: relative;
     left: 7px;
-    top: 5px;
     font-size: 150%;
   }
+
+  .fa {
+    top: 2px;
+  }
+
+  .icon-gf {
+    top: 5px;
+  }
+
   img {
     left: 7px;
     position: relative;
@@ -117,12 +113,9 @@
   line-height: 47px;
   padding: 0px 10px 0px 10px;
   display: block;
-  border-left: 1px solid transparent;
-
-
-  .sidemenu-item-text {
-    padding-left: 11px;
-  }
+  position: relative;
+  font-size: 16px;
+  border: 1px solid transparent;
 
   img {
     border-radius: 50%;
@@ -132,13 +125,11 @@
   }
 }
 
-.sidemenu-section-tagline {
-  font-style: italic;
-  line-height: 10px;
-}
-
-.sidemenu-section-text-wrapper {
-  padding-top: 4px;
+.side-menu-header {
+  padding: 10px 10px 10px 20px;
+  white-space: nowrap;
+  background-color: $side-menu-item-hover-bg;
+  font-size: 18px;
 }
 
 .sidemenu-org-section .dropdown-menu-title {
@@ -190,31 +181,28 @@
 }
 
 .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;
 }
 
 .sidemenu-org-details {
   padding-left: 10px;
   color: $link-color;
+  display: none;
 }
 
 .sidemenu-org-name {