worked on new sidemenu design

src/app/controllers/all.js

@@ -7,5 +7,6 @@ define([
   './inspectCtrl',
   './jsonEditorCtrl',
   './loginCtrl',
+  './sidemenuCtrl',
   './errorCtrl',
 ], function () {});

src/app/controllers/sidemenuCtrl.js

@@ -0,0 +1,71 @@
+define([
+  'angular',
+  'lodash',
+],
+function (angular, _) {
+  'use strict';
+
+  var module = angular.module('grafana.controllers');
+
+  module.controller('SideMenuCtrl', function($scope, $location) {
+
+    $scope.menu = [
+      {
+        text: "Dashbord",
+        href: "/",
+        icon: "fa fa-th-large",
+        links: [
+          { text: 'Settings', href:"asd", icon: "fa fa-cogs" },
+          { text: 'Templating', href:"asd", icon: "fa fa-cogs" },
+          { text: 'Annotations', href:"asd", icon: "fa fa-bolt" },
+          { text: 'More', href:"asd", icon: "fa fa-bolt" },
+        ]
+      },
+      {
+        text: "Account", href: "/account",
+        icon: "fa fa-shield",
+        links: [
+          { text: 'Data sources', href:"/account/datasources", icon: "fa fa-sitemap" },
+          { text: 'Users', href:"/account/datasources", icon: "fa fa-users" },
+          { text: 'API Keys', href:"/account/datasources", icon: "fa fa-key" },
+        ]
+      },
+      {
+        text: "Profile", href: "/profile",
+        icon: "fa fa-user",
+        links: [
+          { text: 'Password', href:"asd", icon: "fa fa-lock" },
+        ]
+      }
+    ];
+
+    $scope.onAppEvent('$routeChangeSuccess', function() {
+      $scope.updateState();
+    });
+
+    $scope.updateState = function() {
+      var currentPath = $location.path();
+      _.each($scope.menu, function(item) {
+        item.active = false;
+
+        if (item.href === currentPath) {
+          item.active = true;
+        }
+
+        _.each(item.links, function(link) {
+          link.active = false;
+
+          if (link.href === currentPath) {
+            item.active = true;
+            link.active = true;
+          }
+        });
+      });
+    };
+
+    $scope.init = function() {
+      $scope.updateState();
+    };
+  });
+
+});

src/app/features/account/partials/account.html

@@ -0,0 +1,3 @@
+<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
+
+

src/app/partials/sidemenu.html

@@ -1,4 +1,55 @@
+<div ng-controller="SideMenuCtrl" ng-init="init()">
+	<div class="navbar navbar-static-top">
+		<div class="navbar-inner">
+			<span class="brand">
+				<span class="page-title">Grafana</span>
+			</span>
+		</div>
+	</div>
+
+	<ul class="sidemenu">
+		<li ng-repeat-start="item in menu">
+			<a href="{{item.href}}" class="sidemenu-item"><i class="{{item.icon}}"></i>{{item.text}}</a>
+		</li>
+		<li ng-repeat-end ng-if="item.active">
+			<ul class="sidemenu-links">
+				<li ng-repeat="link in item.links">
+					<a href="{{link.href}}" class="sidemenu-link"><i class="fa fa-angle-right"></i>{{link.text}}</a>
+				</li>
+			</ul>
+		</li>
+	</ul>
+</div>
+
 <section class="pro-sidemenu-items">
+	<!-- <a class="pro&#45;sidemenu&#45;link" ng&#45;href="{{appSubUrl}}/"> -->
+		<!-- 	<i class="fa fa&#45;th&#45;large"></i> -->
+		<!-- 	Dashboards -->
+		<!-- </a> -->
+	<!-- <a class="pro&#45;sidemenu&#45;link" href="account/datasources"> -->
+		<!-- 	<i class="fa fa&#45;sitemap"></i> -->
+		<!-- 	Data -->
+		<!-- </a> -->
+	<!-- <a class="pro&#45;sidemenu&#45;link" href="account/users"> -->
+		<!-- 	<i class="fa fa&#45;users"></i>Users -->
+		<!-- </a> -->
+	<!-- <a class="pro&#45;sidemenu&#45;link" href="account/apikeys"> -->
+		<!-- 	<i class="fa fa&#45;key"></i>API Keys -->
+		<!-- </a> -->
+	<!-- <a class="pro&#45;sidemenu&#45;link" href="account/import"> -->
+		<!-- 	<i class="fa fa&#45;download"></i> -->
+		<!-- 	Import -->
+		<!-- </a> -->
+	<!--  -->
+	<!-- <a class="pro&#45;sidemenu&#45;link" href="profile"> -->
+		<!-- 	<i class="fa fa&#45;user"></i> -->
+		<!-- 	Profile -->
+		<!-- </a> -->
+	<!--  -->
+	<a class="pro-sidemenu-link" href="admin/users" ng-if="grafana.user.isGrafanaAdmin">
+		<i class="fa fa-institution"></i>Admin
+	</a>
+
 	<div class="dropdown">
 		<a class="pro-sidemenu-link pointer gravatar" data-toggle="dropdown" title="{{grafana.user.email}}">
 			<span class="gravatar-missing">f</span>
@@ -8,35 +59,7 @@
 			<li><a href="/login?logout">Logout</a></li>
 		</ul>
 	</div>
-	<a class="pro-sidemenu-link" ng-href="{{appSubUrl}}/">
-		<i class="fa fa-th-large"></i>
-		Dashboards
-	</a>
-	<a class="pro-sidemenu-link" href="account/datasources">
-		<i class="fa fa-sitemap"></i>
-		Data
-	</a>
-	<a class="pro-sidemenu-link" href="account/users">
-		<i class="fa fa-users"></i>Users
-	</a>
-	<a class="pro-sidemenu-link" href="account/apikeys">
-		<i class="fa fa-key"></i>API Keys
-	</a>
-	<a class="pro-sidemenu-link" href="account/import">
-		<i class="fa fa-download"></i>
-		Import
-	</a>
-
-	<a class="pro-sidemenu-link" href="profile">
-		<i class="fa fa-user"></i>
-		Profile
-	</a>
-
-	<a class="pro-sidemenu-link" href="admin/users" ng-if="grafana.user.isGrafanaAdmin">
-		<i class="fa fa-institution"></i>Admin
-	</a>
-
-  <a class="pro-sidemenu-link" href="login?logout">
+	<a class="pro-sidemenu-link" href="login?logout">
 		<i class="fa fa-sign-out"></i>Sign out
 	</a>
 

src/app/routes/backend/all.js

@@ -30,6 +30,9 @@ define([
         controller : 'DashFromImportCtrl',
         reloadOnSearch: false,
       })
+      .when('/account', {
+        templateUrl: 'app/features/account/partials/account.html',
+      })
       .when('/account/datasources', {
         templateUrl: 'app/features/account/partials/datasources.html',
         controller : 'DataSourcesCtrl',

src/css/less/p_pro.less

@@ -2,6 +2,43 @@
   display: none;
 }
 
+.sidemenu {
+  list-style: none;
+  background: @bodyBackground;
+  margin: 0;
+  padding: 0;
+}
+
+.sidemenu-links {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: @grafanaTargetFuncBackground;
+  li {
+    display: block;
+  }
+}
+
+.sidemenu-link {
+  padding: 6px 0 6px 30px;
+  font-size: 15px;
+  display: block;
+  i {
+    padding-right: 15px;
+  }
+}
+
+.sidemenu-item {
+  font-size: 17px;
+  padding: 14px 10px 14px 20px;
+  display: block;
+  background: @grafanaPanelBackground;
+  i {
+    padding-right: 15px;
+  }
+  border-bottom: 1px solid black;
+}
+
 .pro-sidemenu-open {
   .pro-sidemenu {
     display: block;