refactor(sideBar): change behabior of hover element and remove slecetedElem

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

@@ -14,26 +14,16 @@
     $scope.menuItems = sidebarService.getMenuItems();
     $scope.menuHeight = $element[0].childNodes[0].clientHeight - 84;
 
-    function changeSelectElemTopValue() {
-      $timeout(function () {
-        var selectedItem = $('.al-sidebar-list-item.selected');
-        if (selectedItem.length) {
-          $scope.selectElemTop = selectedItem.position().top;
-        }
-      }, 101);
-    }
-
     function selectMenuItem() {
       $.each($scope.menuItems, function (index, menu) {
         menu.selected = ('#' + $location.$$url).indexOf(menu.root) == 0;
-        menu.expanded = menu.selected;
+        menu.expanded = menu.expanded || menu.selected;
         if (menu.subMenu) {
           $.each(menu.subMenu, function (subIndex, subMenu) {
             subMenu.selected = ('#' + $location.$$url).indexOf(subMenu.root) == 0;
           });
         }
       });
-      changeSelectElemTopValue();
     }
 
     selectMenuItem();
@@ -50,11 +40,6 @@
       $scope.$isMenuCollapsed = true;
     };
 
-    $scope.$watch('$isMenuCollapsed', function (newValue) {
-      if (!newValue && !$scope.selectElemTop) {
-        changeSelectElemTopValue();
-      }
-    });
 
     // watch window resize to change menu collapsed state if needed
     $(window).resize(function () {
@@ -83,25 +68,16 @@
         if (!item.expanded) {
           $timeout(function () {
             item.expanded = !item.expanded;
-            changeSelectElemTopValue();
             submenu.slideToggle();
           });
         }
       } else {
         item.expanded = !item.expanded;
-        changeSelectElemTopValue();
         submenu.slideToggle();
       }
 
     };
 
-    function toggleExpandedSubmenu() {
-
-      $timeout(function () {
-
-      }, 200);
-    }
-
     window.onclick = function () {
       $timeout(function () {
 
@@ -117,6 +93,7 @@
 
     $scope.hoverItem = function ($event) {
       $scope.showHoverElem = true;
+      $scope.hoverElemHeight =  $event.currentTarget.clientHeight;
       var menuTopValue = 66;
       $scope.hoverElemTop = $event.currentTarget.getBoundingClientRect().top - menuTopValue;
     };

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

@@ -2,14 +2,13 @@
        ng-mouseleave="hoverElemTop=selectElemTop">
   <ul class="al-sidebar-list" slimscroll="{height: '{{menuHeight}}px'}" slimscroll-watch="menuHeight" >
     <li ng-repeat="item in menuItems" class="al-sidebar-list-item"
-        ng-class="{'selected': item.selected, 'with-sub-menu': item.subMenu}"
+        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 ng-mouseenter="hoverItem($event, item)" href="{{ item.root }}" ng-if="!item.subMenu" class="al-sidebar-list-link">
         <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
       </a>
 
-      <a ng-if="item.subMenu" href ng-click="toggleSubMenu($event, item)"
+      <a ng-mouseenter="hoverItem($event, item)" ng-if="item.subMenu" href ng-click="toggleSubMenu($event, item)"
          class="al-sidebar-list-link">
         <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
         <b class="fa" ng-class="{'fa-angle-up': item.expanded, 'fa-angle-down': !item.expanded}"
@@ -17,26 +16,25 @@
       </a>
 
       <ul ng-if="item.subMenu" class="al-sidebar-sublist"
-          ng-class="{expanded: item.selected, 'slide-right': item.slideRight}">
+          ng-class="{expanded: item.expanded, 'slide-right': item.slideRight}">
         <li ng-repeat="subitem in item.subMenu" ng-class="{'selected': subitem.selected, 'with-sub-menu': subitem.subMenu}">
-          <a ng-if="subitem.subMenu" href ng-click="toggleSubMenu($event, subitem);"
+          <a ng-mouseenter="hoverItem($event, item)" ng-if="subitem.subMenu" href ng-click="toggleSubMenu($event, subitem);"
              class="al-sidebar-list-link subitem-submenu-link"><span>{{ subitem.title }}</span>
             <b class="fa" ng-class="{'fa-angle-up': subitem.expanded, 'fa-angle-down': !subitem.expanded}"
                ng-if="subitem.subMenu"></b>
           </a>
           <ul ng-if="subitem.subMenu" class="al-sidebar-sublist subitem-submenu-list"
-              ng-class="{expanded: subitem.selected, 'slide-right': subitem.slideRight}">
+              ng-class="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
-            <li ng-repeat="subSubitem in subitem.subMenu" ng-class="{selected: subitem.selected}">
+            <li ng-mouseenter="hoverItem($event, item)" ng-repeat="subSubitem in subitem.subMenu" ng-class="{selected: subitem.selected}">
-              <a href="{{ subSubitem.root }}">{{
+              <a  ng-mouseenter="hoverItem($event, item)" href="{{ subSubitem.root }}">{{
                 subSubitem.title }}</a>
             </li>
           </ul>
-          <a ng-if="!subitem.subMenu" href="{{ subitem.root }}">{{ subitem.title}}</a>
+          <a  ng-mouseenter="hoverItem($event, item)" ng-if="!subitem.subMenu" href="{{ subitem.root }}">{{ subitem.title}}</a>
         </li>
       </ul>
     </li>
   </ul>
-  <div class="sidebar-select-elem" ng-style="{top: selectElemTop + 'px'}"></div>
+  <div class="sidebar-hover-elem" ng-style="{top: hoverElemTop + 'px', height: hoverElemHeight + 'px'}"
-  <div class="sidebar-hover-elem" ng-style="{top: hoverElemTop + 'px'}"
        ng-class="{'show-hover-elem': showHoverElem }"></div>
 </aside>

src/sass/theme/components/_sidebar.scss

@@ -89,6 +89,7 @@ a.al-sidebar-list-link {
 .slimScrollBar, .slimScrollRail {
   border-radius: 0px !important;
   width: 4px !important;
+  left: 176px;
 }
 
 @mixin layout-collapsed() {
@@ -143,20 +144,17 @@ a.al-sidebar-list-link {
   @include default-sublist();
 }
 
-.sidebar-hover-elem, .sidebar-select-elem {
+.sidebar-hover-elem{
   width: 4px;
   background: $primary;
   position: absolute;
-  top: 0;
+  top: -150px;
   left: 176px;
-  height: 42px;
+  transition: all 0.5s ease;
-  display: none;
+  transition-property: top, height;
-  transition: top 0.5s ease;
-  &.show-hover-elem {
   height: 42px;
   display: block;
 }
-}
 
 .sidebar-select-elem {
   display: block;

src/sass/theme/dashboard/_blurFeed.scss

@@ -119,7 +119,7 @@
     font-size: 12px;
     padding-bottom: 5px;
     .author {
-      font-weight: $font-bold;
+      font-size: 13px;
       padding-right: 5px;
     }
   }