refactor(sidebar): static items configuration moved to provider config

bower.json

@@ -43,7 +43,7 @@
     "moment": "~2.10.6",
     "slimScroll": "jquery-slimscroll#~1.3.6",
     "angular-progress-button-styles": "~0.1.0",
-    "angular-ui-router": "~0.2.15",
+    "angular-ui-router": "~0.2.16",
     "angular-chart.js": "~0.8.8",
     "angular-chartist.js": "~3.3.12",
     "chartist": "0.9.5",

src/app/pages/pages.module.js

@@ -20,8 +20,43 @@
       .config(routeConfig);
 
   /** @ngInject */
-  function routeConfig($urlRouterProvider) {
+  function routeConfig($urlRouterProvider, baSidebarServiceProvider) {
     $urlRouterProvider.otherwise('/dashboard');
+
+    baSidebarServiceProvider.addStaticItem({
+      title: 'Pages',
+      icon: 'ion-document',
+      subMenu: [{
+        title: 'Sign In',
+        fixedHref: 'auth.html',
+        blank: true
+      }, {
+        title: 'Sign Up',
+        fixedHref: 'reg.html',
+        blank: true
+      }, {
+        title: 'User Profile',
+        stateRef: 'profile'
+      }, {
+        title: '404 Page',
+        fixedHref: '404.html',
+        blank: true
+      }]
+    });
+    baSidebarServiceProvider.addStaticItem({
+      title: 'Menu Level 1',
+      icon: 'ion-ios-more',
+      subMenu: [{
+        title: 'Menu Level 1.1',
+        disabled: true
+      }, {
+        title: 'Menu Level 1.2',
+        subMenu: [{
+          title: 'Menu Level 1.2.1',
+          disabled: true
+        }]
+      }]
+    });
   }
 
 })();

src/app/theme/components/baSidebar/ba-sidebar.html

@@ -4,7 +4,7 @@
     <li ng-repeat="item in ::menuItems" class="al-sidebar-list-item"
         ng-class="::{'with-sub-menu': item.subMenu}" ui-sref-active="selected">
 
-      <a ng-mouseenter="hoverItem($event, item)" ui-sref="{{ ::(item.stateRef || defaultSidebarState) }}" ng-if="::!item.subMenu" class="al-sidebar-list-link">
+      <a ng-mouseenter="hoverItem($event, item)" ui-state="item.stateRef || ''" ng-href="{{::(item.fixedHref ? item.fixedHref: '')}}" ng-if="::!item.subMenu" class="al-sidebar-list-link">
         <i class="{{ ::item.icon }}"></i><span>{{ ::item.title }}</span>
       </a>
 
@@ -28,11 +28,13 @@
               ng-class="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}"
               ba-ui-sref-toggling-submenu="subitem.stateRef">
             <li ng-mouseenter="hoverItem($event, item)" ng-repeat="subSubitem in ::subitem.subMenu" ui-sref-active="selected">
-              <a ng-mouseenter="hoverItem($event, item)" ui-sref="{{ ::(subSubitem.stateRef || defaultSidebarState) }}">{{
+              <a ng-mouseenter="hoverItem($event, item)" ui-state="subSubitem.stateRef || ''" ng-href="{{::(subSubitem.fixedHref ? subSubitem.fixedHref: '')}}">{{
                 ::subSubitem.title }}</a>
             </li>
           </ul>
-          <a ng-mouseenter="hoverItem($event, item)" target="{{::(subitem.blank ? '_blank' : '_self')}}" ng-if="::!subitem.subMenu" ui-sref="{{ ::(subitem.stateRef || defaultSidebarState) }}">{{ ::subitem.title}}</a>
+          <a ng-mouseenter="hoverItem($event, item)" target="{{::(subitem.blank ? '_blank' : '_self')}}" ng-if="::!subitem.subMenu"
+             ui-state="subitem.stateRef || ''"
+             ng-href="{{::(subitem.fixedHref ? subitem.fixedHref: '')}}">{{ ::subitem.title}}</a>
         </li>
       </ul>
     </li>

src/app/theme/components/baSidebar/baSidebar.service.js

@@ -2,107 +2,85 @@
   'use strict';
 
   angular.module('BlurAdmin.theme.components')
-      .service('baSidebarService', baSidebarService);
+      .provider('baSidebarService', baSidebarServiceProvider);
 
   /** @ngInject */
-  function baSidebarService($state, layoutSizes) {
+  function baSidebarServiceProvider() {
+    var staticMenuItems = [];
 
-    var isMenuCollapsed = shouldMenuBeCollapsed();
+    this.addStaticItem = function() {
-
+      staticMenuItems.push.apply(staticMenuItems, arguments);
-    var staticMenuItems = [ {
-        title: 'Pages',
-        icon: 'ion-document',
-        subMenu: [{
-            title: 'Sign In',
-            root: 'auth.html',
-            blank: true
-          }, {
-            title: 'Sign Up',
-            root: 'reg.html',
-            blank: true
-          }, {
-            title: 'User Profile',
-            root: '#/profile'
-          }, {
-            title: '404 Page',
-            root: '404.html',
-            blank: true
-          }]
-      }, {
-        title: 'Menu Level 1',
-        icon: 'ion-ios-more',
-        subMenu: [{
-            title: 'Menu Level 1.1',
-            root: '#',
-            disabled: true
-          }, {
-            title: 'Menu Level 1.2',
-            subMenu: [{
-              title: 'Menu Level 1.2.1',
-              root: '#',
-              disabled: true
-            }]
-          }]
-      }];
-
-    this.getMenuItems = function() {
-      var states = defineMenuItemStates();
-      var menuItems = states.filter(function(item) {
-        return item.level == 0;
-      });
-
-      menuItems.forEach(function(item) {
-        var children = states.filter(function(child) {
-          return child.level == 1 && child.name.indexOf(item.name) === 0;
-        });
-        item.subMenu = children.length ? children : null;
-      });
-
-      return menuItems.concat(staticMenuItems);
     };
 
-    this.shouldMenuBeCollapsed = shouldMenuBeCollapsed;
+    /** @ngInject */
-    this.canSidebarBeHidden = canSidebarBeHidden;
+    this.$get = function($state, layoutSizes) {
+      return new _factory();
 
-    this.setMenuCollapsed = function(isCollapsed) {
+      function _factory() {
-      isMenuCollapsed = isCollapsed;
+        var isMenuCollapsed = shouldMenuBeCollapsed();
-    };
 
-    this.isMenuCollapsed = function() {
+        this.getMenuItems = function() {
-      return isMenuCollapsed;
+          var states = defineMenuItemStates();
-    };
+          var menuItems = states.filter(function(item) {
-
+            return item.level == 0;
-    this.toggleMenuCollapsed = function() {
-      isMenuCollapsed = !isMenuCollapsed;
-    };
-
-    function defineMenuItemStates() {
-      return $state.get()
-          .filter(function(s) {
-            return s.sidebarMeta;
-          })
-          .map(function(s) {
-            var meta = s.sidebarMeta;
-            return {
-              name: s.name,
-              title: s.title,
-              level: (s.name.match(/\./g) || []).length,
-              order: meta.order,
-              icon: meta.icon,
-              stateRef: s.name,
-            };
-          })
-          .sort(function(a, b) {
-            return (a.level - b.level) * 100 + a.order - b.order;
           });
-    }
 
-    function shouldMenuBeCollapsed() {
+          menuItems.forEach(function(item) {
-      return window.innerWidth <= layoutSizes.resWidthCollapseSidebar;
+            var children = states.filter(function(child) {
-    }
+              return child.level == 1 && child.name.indexOf(item.name) === 0;
+            });
+            item.subMenu = children.length ? children : null;
+          });
+
+          return menuItems.concat(staticMenuItems);
+        };
+
+        this.shouldMenuBeCollapsed = shouldMenuBeCollapsed;
+        this.canSidebarBeHidden = canSidebarBeHidden;
+
+        this.setMenuCollapsed = function(isCollapsed) {
+          isMenuCollapsed = isCollapsed;
+        };
+
+        this.isMenuCollapsed = function() {
+          return isMenuCollapsed;
+        };
+
+        this.toggleMenuCollapsed = function() {
+          isMenuCollapsed = !isMenuCollapsed;
+        };
+
+        function defineMenuItemStates() {
+          return $state.get()
+              .filter(function(s) {
+                return s.sidebarMeta;
+              })
+              .map(function(s) {
+                var meta = s.sidebarMeta;
+                return {
+                  name: s.name,
+                  title: s.title,
+                  level: (s.name.match(/\./g) || []).length,
+                  order: meta.order,
+                  icon: meta.icon,
+                  stateRef: s.name,
+                };
+              })
+              .sort(function(a, b) {
+                return (a.level - b.level) * 100 + a.order - b.order;
+              });
+        }
+
+        function shouldMenuBeCollapsed() {
+          return window.innerWidth <= layoutSizes.resWidthCollapseSidebar;
+        }
+
+        function canSidebarBeHidden() {
+          return window.innerWidth <= layoutSizes.resWidthHideSidebar;
+        }
+      }
+
+    };
 
-    function canSidebarBeHidden() {
-      return window.innerWidth <= layoutSizes.resWidthHideSidebar;
-    }
   }
 })();