From 6c52ba22ebafd803eddd29a6b9acc3d4e3bf7137 Mon Sep 17 00:00:00 2001
From: KostyaDanovsky <kostya.danovsky@gmail.com>
Date: Fri, 13 Nov 2015 20:24:27 +0300
Subject: [PATCH] fix expand/collapse menu

---
 src/app/components/pageTop/pageTop.html  | 2 +-
 src/app/components/sidebar/_sidebar.scss | 4 ++--
 src/app/components/sidebar/sidebar.js    | 8 +++-----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/app/components/pageTop/pageTop.html b/src/app/components/pageTop/pageTop.html
index ab6615a46..bcd54cb76 100644
--- a/src/app/components/pageTop/pageTop.html
+++ b/src/app/components/pageTop/pageTop.html
@@ -1,6 +1,6 @@
 <div class="page-top clearfix">
   <a href="#/dashboard" class="al-logo clearfix"><span>Blur</span>Admin</a>
-  <a href class="collapse-menu-link ion-navicon" ng-click="menuToggle()"></a>
+  <a href class="collapse-menu-link ion-navicon" ng-click="isMenuCollapsed=!isMenuCollapsed"></a>
 
   <div class="search">
     <i class="ion-ios-search-strong" ng-click="startSearch()"></i>
diff --git a/src/app/components/sidebar/_sidebar.scss b/src/app/components/sidebar/_sidebar.scss
index 1325107e1..8b47b789f 100644
--- a/src/app/components/sidebar/_sidebar.scss
+++ b/src/app/components/sidebar/_sidebar.scss
@@ -83,7 +83,7 @@ a.al-sidebar-list-link {
 
 @mixin layout-collapsed() {
   .al-main {
-    margin-left: 70px;
+    margin-left: 50px;
   }
 
   .al-footer {
@@ -140,7 +140,7 @@ a.al-sidebar-list-link {
   left: 176px;
   height: 42px;
   display: none;
-  transition: all 0.3s ease;
+  transition: all 0.5s ease;
   &.show-hover-elem {
     height: 42px;
     display: block;
diff --git a/src/app/components/sidebar/sidebar.js b/src/app/components/sidebar/sidebar.js
index 5efce3d4c..11b2c6159 100644
--- a/src/app/components/sidebar/sidebar.js
+++ b/src/app/components/sidebar/sidebar.js
@@ -123,13 +123,11 @@ blurAdminApp.directive('sidebar', function () {
         $scope.isMenuCollapsed = true;
       };
 
-      $scope.menuToggle = function () {
-        $scope.isMenuCollapsed = !$scope.isMenuCollapsed;
-
-        if (!$scope.isMenuCollapsed && !$scope.selectElemTop) {
+      $scope.$watch('isMenuCollapsed', function(newValue) {
+        if (!newValue && !$scope.selectElemTop) {
           changeSelectElemTopValue();
         }
-      };
+      })
 
       // watch window resize to change menu collapsed state if needed
       $(window).resize(function () {