merging new-sidenav

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{
@@ -122,12 +122,17 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 			Text: "Data Sources",
 			Icon: "icon-gf icon-gf-datasources",
 			Url:  setting.AppSubUrl + "/datasources",
+			Children: []*dtos.NavLink{
+				{Text: "List", Url: setting.AppSubUrl + "/datasources", Icon: "icon-gf icon-gf-datasources"},
+			},
 		})
-
 		data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
 			Text: "Plugins",
 			Icon: "icon-gf icon-gf-apps",
 			Url:  setting.AppSubUrl + "/plugins",
+			Children: []*dtos.NavLink{
+				{Text: "List", Url: setting.AppSubUrl + "/datasources", Icon: "icon-gf icon-gf-apps"},
+			},
 		})
 	}
 

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) {

public/app/core/components/navbar/navbar.html

@@ -3,13 +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()">
-		<i class="fa fa-search"></i>
 	</a>
 
 	<div ng-if="::!ctrl.hasMenu">
@@ -20,7 +13,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>
@@ -28,7 +21,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/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)"
@@ -87,26 +87,5 @@
       </a>
     </div>
 	</div>
-
-		<div class="search-button-row">
-			<a class="btn btn-secondary" href="dashboard/new" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
-				<i class="fa fa-plus"></i>&nbsp; New Dashboard
-			</a>
-
-    <a class="btn btn-inverse" ng-click="ctrl.showNewFolderModal()" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
-			<i class="fa fa-plus"></i>
-			New Folder
-		</a>
-
-		<a class="btn btn-inverse" href="dashboard/new/?editview=import" ng-show="ctrl.contextSrv.isEditor" ng-click="ctrl.isOpen = false;">
-			<i class="fa fa-upload"></i>
-			&nbsp; Import Dashboard
-		</a>
-
-			<a class="search-button-row-explore-link" target="_blank" href="https://grafana.com/dashboards?utm_source=grafana_search">
-				Find <img src="public/img/icn-dashboard-tiny.svg" width="14" /> dashboards on Grafana.com
-			</a>
-		</div>
-	</div>
 </div>
 

public/app/core/components/sidemenu/sidemenu.html

@@ -1,50 +1,22 @@
 <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>
+	<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>
-		<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>
-				<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}}">
+		<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>
-			<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">
+		<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>
 			<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>
@@ -55,17 +27,45 @@
 	</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>
-		<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>
+	<li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
+		<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">
+					<i class="fa fa-fw fa-user"></i>
+				</span>
+			</div>
 		</a>
+		<ul class="dropdown-menu dropdown-menu--sidemenu dropup" 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>
+
 </ul>
 

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

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

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

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
@@ -209,7 +213,7 @@ $wellBackground:                  #131517;
 
 $navbarHeight:                    52px;
 $navbarBackgroundHighlight:       $dark-3;
-$navbarBackground:                $dark-3;
+$navbarBackground:                $panel-bg;
 $navbarBorder:                    1px solid $body-bg;
 
 $navbarText:                      $gray-4;
@@ -221,14 +225,21 @@ $navbarLinkBackgroundActive:      $navbarBackground;
 $navbarBrandColor:                $link-color;
 $navbarDropdownShadow:            inset 0px 4px 10px -4px $body-bg;
 
-$navbarButtonBackground:          lighten($navbarBackground, 3%);
-$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
+$navbarButtonBackground:          $navbarBackground;
+$navbarButtonBackgroundHighlight: $body-bg;
 
 // 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;
+
+// Menu dropdowns
+// -------------------------
+$menu-dropdown-bg:            $body-bg;
+$menu-dropdown-hover-bg:      $dark-2;
+$menu-dropdown-border-color:  $dark-3;
+$menu-dropdown-shadow: 5px 5px 20px -5px $black;
+
 
 // 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,10 +186,16 @@ $input-invalid-border-color:     lighten($red, 5%);
 // -------------------------
 $side-menu-bg:            $body-bg;
 $side-menu-item-hover-bg: $gray-6;
-$side-menu-opacity:		  0.97;
+
+// Menu dropdowns
+// -------------------------
+$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
 // -------------------------
@@ -203,7 +213,6 @@ $dropdownLinkColorActive:       $link-color;
 $dropdownLinkBackgroundActive:  $gray-6;
 $dropdownLinkBackgroundHover:   $gray-6;
 
-
 // COMPONENT VARIABLES
 // --------------------------------------------------
 

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