first changes

app/app.css

@@ -406,6 +406,20 @@ select {
 .sidebar {
     background-color:#fff;
     border-right: 1px solid #ccc;
+	-webkit-transition: all .2s;
+    -moz-transition: all .2s;
+    -ms-transition: all .2s;
+    -o-transition: all .2s;
+    transition: all .2s;
+}
+
+.sidebar .fa {
+	font-size:18px;
+	margin-right:10px;	
+}
+
+.sidebar span.menu-text {
+	display:inline-block;	
 }
 
 .sidebar .sidebar-nav.navbar-collapse {
@@ -1020,11 +1034,10 @@ table.dataTable thead .sorting:after {
 	
 	.sidebar .sidebar-nav.navbar-collapse {
 		overflow-x: visible;
-		overflow-y: scroll;
+		overflow-y: auto;
 		position: absolute;
 		width: 100%;
 		max-height: calc(85% - 139px);
-		border-bottom: 2px solid #ccc;
 	}
 	
 	footer {

app/shared/directives.js

@@ -49,10 +49,16 @@ app.directive('collapseMenu', function () {
             $scope.collapsed = false;
             $scope.collapseToggle = function () {
                 if ($scope.collapsed === false) {
-                    jQuery(".manager-view").css("z-index" , "9999").css("width" , "100%");
+					jQuery("span.menu-text").css("display" , "none");
+                    jQuery(".sidebar").css("z-index" , "9999").css("width" , "62px");
+					jQuery(".manager-view").css("z-index" , "9999").css("width" , "calc(100% - 62px)");
+					jQuery(".sidebar footer").css("display" , "none");
                     $scope.collapsed = true;
                 } else {
-                    jQuery(".manager-view").css("z-index" , "0").css("width" , "calc(100% - 250px)");
+					jQuery("span.menu-text").fadeIn(400);
+                    jQuery(".sidebar").css("z-index" , "0").css("width" , "250px");
+					jQuery(".manager-view").css("z-index" , "9999").css("width" , "calc(100% - 250px)");
+					jQuery(".sidebar footer").fadeIn(400);
                     $scope.collapsed = false;
                 }
             };

app/shared/templates/directives/sidebar.html

@@ -7,7 +7,8 @@
             <!--<sidebar-search></sidebar-search>-->
             <li ui-sref-active="active">
                 <a href="#/dashboard" ng-click="breadcrumb(['Panel'])"><i class="fa fa-dashboard fa-fw"></i>
-                Panel</a>
+                	<span class="menu-text">Panel</span>
+                </a>
             </li>
             <li ng-repeat="(key, item) in menuItems" ng-class="{active: collapseVar == $index+1}">{{dropDown}}
                 <a href="" ng-click="check($index+1)"><i class="fa fa-wrench fa-fw"></i> {{ item[0] }}<span