fix(sidebar): fix isMenuCollapsed flag

src/app/theme/components/baPanel/baPanelBlur.directive.js

@@ -34,12 +34,10 @@
         });
 
         function recalculatePanelStyle() {
-          console.log(bodyBgSize);
           if (!bodyBgSize) {
             return;
           }
           var position = elem[0].getBoundingClientRect();
-          console.log(position);
           elem.css({
             backgroundSize: Math.round(bodyBgSize.width) + 'px ' + Math.round(bodyBgSize.height) + 'px',
             backgroundPosition: Math.floor(-position.left + bodyBgSize.positionX) + 'px ' + Math.floor(-position.top + bodyBgSize.positionY) + 'px'

src/app/theme/components/pageTop/pageTop.directive.js

@@ -12,6 +12,9 @@
   function pageTop() {
     return {
       restrict: 'E',
+      scope: {
+        isMenuCollapsed: '=',
+      },
       templateUrl: 'app/theme/components/pageTop/pageTop.html'
     };
   }

src/app/theme/components/pageTop/pageTop.html

@@ -1,6 +1,6 @@
 <div class="page-top clearfix" scroll-position="scrolled" max-height="50" ng-class="{'scrolled': scrolled}">
   <a href="#/dashboard" class="al-logo clearfix"><span>Blur</span>Admin</a>
-  <a href class="collapse-menu-link ion-navicon" ng-click="$isMenuCollapsed=!$isMenuCollapsed"></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>

src/app/theme/components/sidebar/SidebarCtrl.js

@@ -9,32 +9,28 @@
     .controller('SidebarCtrl', SidebarCtrl);
 
   /** @ngInject */
-  function SidebarCtrl($scope, $timeout, $location, $rootScope, layoutSizes, sidebarService) {
+  function SidebarCtrl($scope, $rootScope, $timeout, $location, layoutSizes, sidebarService) {
 
     $scope.menuItems = sidebarService.getMenuItems();
 
     function changeSelectElemTopValue() {
       $timeout(function () {
         var selectedItem = $('.al-sidebar-list-item.selected');
-        if (selectedItem) {
+        if (selectedItem.length) {
           $scope.selectElemTop = selectedItem.position().top;
         }
       }, 101);
     }
 
     function selectMenuItem() {
-      $.each($scope.menuItems, function (index, value) {
+      $.each($scope.menuItems, function (index, menu) {
-        value.selected = value.root === '#' + $location.$$url;
+        menu.selected = ('#' + $location.$$url).indexOf(menu.root) == 0;
+        menu.expanded = menu.selected;
 
-        if (value.subMenu) {
+        if (menu.subMenu) {
-          var hasSelectedSubmenu = false;
+          $.each(menu.subMenu, function (subIndex, subMenu) {
-          $.each(value.subMenu, function (subIndex, subValue) {
+            subMenu.selected = ('#' + $location.$$url).indexOf(subMenu.root) == 0;
-            subValue.selected = subValue.root === '#' + $location.$$url;
-            if (subValue.selected) {
-              hasSelectedSubmenu = true;
-            }
           });
-          value.selected = hasSelectedSubmenu;
         }
       });
       changeSelectElemTopValue();
@@ -47,14 +43,14 @@
     });
 
     $scope.menuExpand = function () {
-      $rootScope.$isMenuCollapsed = false;
+      $scope.$isMenuCollapsed = false;
     };
 
     $scope.menuCollapse = function () {
-      $rootScope.$isMenuCollapsed = true;
+      $scope.$isMenuCollapsed = true;
     };
 
-    $rootScope.$watch('$isMenuCollapsed', function (newValue) {
+    $scope.$watch('$isMenuCollapsed', function (newValue) {
       if (!newValue && !$scope.selectElemTop) {
         changeSelectElemTopValue();
       }
@@ -65,7 +61,7 @@
       var isMenuShouldCollapsed = $(window).width() <= layoutSizes.resWidthCollapseSidebar;
       if ($scope.isMenuShouldCollapsed !== isMenuShouldCollapsed) {
         $scope.$apply(function () {
-          $rootScope.$isMenuCollapsed = isMenuShouldCollapsed;
+          $scope.$isMenuCollapsed = isMenuShouldCollapsed;
         });
       }
       $scope.isMenuShouldCollapsed = isMenuShouldCollapsed;
@@ -74,13 +70,14 @@
     $scope.toggleSubMenu = function ($event, item) {
       var submenu = $($event.currentTarget).next();
 
-      if ($rootScope.$isMenuCollapsed) {
+      if ($scope.$isMenuCollapsed) {
         if (!item.slideRight) {
           $timeout(function () {
             item.slideRight = true;
             $scope.anySlideRight = true;
           }, 20);
         }
+        $scope.menuExpand();
       } else {
         submenu.slideToggle(100);
         changeSelectElemTopValue();
@@ -105,11 +102,5 @@
       var menuTopValue = 66;
       $scope.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - menuTopValue;
     };
-
-    $scope.collapseSidebarIfSmallRes = function () {
-      if (window.innerWidth <= layoutSizes.resWidthCollapseSidebar) {
-        $rootScope.$isMenuCollapsed = true;
-      }
-    };
   }
 })();

src/app/theme/components/sidebar/sidebar.html

@@ -5,8 +5,7 @@
         ng-class="{'selected': item.selected, 'with-sub-menu': item.subMenu}"
         ng-mouseenter="hoverItem($event, item)">
 
-      <a href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link"
+      <a href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link">
-         ng-click="collapseSidebarIfSmallRes()">
         <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
       </a>
 
@@ -28,11 +27,11 @@
           <ul ng-if="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"
               ng-class="{expanded: subitem.selected, 'slide-right': subitem.slideRight}">
             <li ng-repeat="subSubitem in subitem.subMenu" ng-class="{selected: subitem.selected}">
-              <a href="{{ subSubitem.root }}" ng-click="collapseSidebarIfSmallRes()">{{
+              <a href="{{ subSubitem.root }}">{{
                 subSubitem.title }}</a>
             </li>
           </ul>
-          <a ng-if="!subitem.subMenu" href="{{ subitem.root }}" ng-click="collapseSidebarIfSmallRes()">{{ subitem.title}}</a>
+          <a ng-if="!subitem.subMenu" href="{{ subitem.root }}">{{ subitem.title}}</a>
         </li>
       </ul>
     </li>

src/index.html

@@ -29,7 +29,7 @@
 <main ng-if="$pageFinishedLoading" ng-class="{ 'menu-collapsed': $isMenuCollapsed }">
 
   <sidebar></sidebar>
-  <page-top></page-top>
+  <page-top is-menu-collapsed="$isMenuCollapsed"></page-top>
 
   <div class="al-main">
     <div class="al-content">