diff --git a/src/app/components/pageTop/pageTop.html b/src/app/components/pageTop/pageTop.html
index ab6615a..bcd54cb 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 1325107..8b47b78 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 5efce3d..11b2c61 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 () {