ux: very early start to new sidemenu

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>

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