MT-168 Updated left menu icon styles and functionality

src/main/webapp/WEB-INF/controllers/HeaderController.js

@@ -54,5 +54,10 @@ myApp.controller("headerController",function($scope, myFactory, $compile, $mdDia
 	
 	function ProgressController($scope) {
 		$scope.progressText = "Please wait!!! Logging out from My Team.";
+	};
+
+	// For Left Menu Toggle
+	$scope.menuIcon=function(){
+		$('#sidebar-left').toggleClass("small-menu");
 	}
 });
\ No newline at end of file

src/main/webapp/WEB-INF/css/custom-theme.css

@@ -59,7 +59,7 @@ i.fa.fa-refresh:hover {
 #header .navbar-header {
 	background: #ffffff;
 	position: relative;
-	width: 225px;
+	width: 215px;
 }
 #header .navbar-header img {
     margin: 0 0 0 10px;
@@ -77,6 +77,11 @@ i.fa.fa-refresh:hover {
 	border-bottom: 2px solid #00b4e5;
 	height: 53px;
 }
+#header .navbar-inverse a.menu-icon {
+	color: #34495e;
+	font-size: 22px;
+	margin: 14px 0 0 40px;
+}
 #header .dropdown-toggle {
 	padding: 12px;
 }
@@ -139,9 +144,10 @@ i.fa.fa-refresh:hover {
 
 /* Left Section */
 #sidebar-left {
-	float: left; 
+	float: left;
+	transition: width 0.5s ease-out;
 	/* margin: 0 15px 0 0; */
-	width: 225px;
+	width: 215px;
 }
 #sidebar-wrapper {
 	background: #00b4e5 !important;	
@@ -183,6 +189,19 @@ i.fa.fa-refresh:hover {
     padding: 12px;
     text-decoration: none;
 }
+/* For Small Menu Styles */
+#sidebar-left.small-menu #sidebar-wrapper .sidebar-nav li a span {
+	display: none;
+}
+#sidebar-left.small-menu #sidebar-wrapper .sidebar-nav li a {
+	text-align: center;
+}
+#sidebar-left.small-menu #sidebar-wrapper .sidebar-nav li ul {
+	/* background: #fafafc; */
+	margin: 0 0 0 15px;
+	padding-left: 15px;
+}
+
 #sidebar-wrapper .sidebar-nav li a i {
 	transition: all .5s ease-in-out 0s;
     -moz-transition: all .5s ease-in-out 0s;
@@ -208,7 +227,10 @@ i.fa.fa-refresh:hover {
 	background: #34495e;
 	color: #fff;
 }
-
+#sidebar-left.small-menu {
+	transition: width 0.5s ease-out;
+	width: 85px;
+}
 
 /* ===== Main Container ===== */
 .main-container {
@@ -220,9 +242,10 @@ i.fa.fa-refresh:hover {
 	flex: 1;
 } */
 #main {
+	/* flex: 1; */
 	float: left;
 	height: 100%;
-	width: calc(100% - 225px);
+	width: calc(100% - 215px);
 }
 #main h1 {
 	border-bottom: 1px solid #ccc;
@@ -295,7 +318,7 @@ i.fa.fa-refresh:hover {
 }
 #footer .navbar-inverse .copyrights {
     background: #fff;
-    width: 225px;
+    width: 215px;
 }
 #footer .navbar-inverse .copyrights:after {
 	content: "";
@@ -322,7 +345,7 @@ i.fa.fa-refresh:hover {
 	border: none !important;
 }
 .ui-grid-viewport {
-	border: 1px solid #cccccc;
+	/* border: 1px solid #cccccc; */
 }
 .ui-grid-contents-wrapper .ui-grid-header {
 	border: none;
@@ -402,7 +425,7 @@ i.fa.fa-refresh:hover {
 }
 .ui-grid-pager-panel {
 	background: #fff;
-	border: solid 1px #ccc;
+	/* border: solid 1px #ccc; */
 	border-top: none;
 	font-size: 13px;
 	width: 99.8% !important;

src/main/webapp/WEB-INF/templates/header.html

@@ -12,6 +12,7 @@
 		</div>
 			
 		<div class="collapse navbar-collapse" id="b-menu-1">
+			<a href="#" class="left menu-icon" ng-click="menuIcon()"><i class="fa fa-bars" aria-hidden="true"></i></a>
 			<ul class="nav navbar-nav navbar-right">
 				<li class="active"><a href="#">Signed in as <b>{{empName}}</b></a></li>
 				<li class="dropdown active"><a href="#" class="dropdown-toggle"

src/main/webapp/WEB-INF/templates/leftmenu.html

@@ -10,7 +10,7 @@
 								aria-hidden="false"> </i> <span style="margin-left: 15px;">{{manageItem.menu}}</span></a></i> 
 			</li> -->
 
-		<li> <a href="#" ng-click="toggleManage()" ng-show="manageGroup.length > 0"> <i class="fa fa-users" aria-hidden="true"></i> Manage Group <i class="fa fa-caret-down"></i></a> 
+		<li> <a href="#" ng-click="toggleManage()" ng-show="manageGroup.length > 0"> <i class="fa fa-users" aria-hidden="true"></i> <span>Manage Group</span> <i class="fa fa-angle-down right"></i></a> 
 			<ul ng-hide="custom" class="manageGroup">
 					
 				<li ng-repeat="manageItem in manageGroup">