dynamic menu items

src/app/theme/sidebar/sidebar.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, HostListener, ViewEncapsulation} from 'angular2/core';
+import {Component, ElementRef, HostListener, ViewEncapsulation, Input} from 'angular2/core';
 import {Router} from 'angular2/router';
 
 import {layoutSizes} from '../theme.constants';
@@ -16,6 +16,8 @@ import {SidebarStateService} from './sidebarState.service';
 })
 export class Sidebar {
 
+  @Input('routes') routes;
+
   menuItems: Array<any>;
   menuHeight: number;
   isMenuCollapsed: boolean;
@@ -28,12 +30,13 @@ export class Sidebar {
 
   isMenuShouldCollapsed: boolean = false;
 
-  constructor(private elementRef: ElementRef, private router: Router, private _sidebarService: SidebarService, private _sidebarStateService: SidebarStateService) {
-
-    this.menuItems = this._sidebarService.getMenuItems();
-  }
+  constructor(private elementRef: ElementRef,
+              private router: Router,
+              private _sidebarService: SidebarService,
+              private _sidebarStateService: SidebarStateService) { }
 
   ngOnInit() {
+    this.menuItems = this._sidebarService.getMenuItems(this.routes);
     this.selectMenuItem();
   }
 

src/app/theme/sidebar/sidebar.service.ts

@@ -53,54 +53,33 @@ export class SidebarService {
           }]
         }
       ]
-    }];
+  }];
 
-  getMenuItems() {
-    var states = this.defineMenuItemStates();
-    var menuItems = states.filter(function(item) {
-      return item.level == 0;
-    });
+  constructor() { }
 
-    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;
-    });
+  getMenuItems(routes) {
 
-    return menuItems.concat(this.staticMenuItems);
-  };
-
-  defineMenuItemStates() {
-
-    // TODO mock state object
-    var state = [{
-      name: 'Dashboard',
-      title: 'Dashboard',
-      selected: false,
-      expanded: false,
-      sidebarMeta: {
-        icon: 'ion-android-home',
-        order: 0,
-      }
-    }];
-
-    return state
+    let menuItems = routes.configs
       .filter(function(s) {
-        return s.sidebarMeta != null;
+        return s.data.sidebarMeta != null;
       })
       .map(function(s) {
-        var meta = s.sidebarMeta;
+        var meta = s.data.sidebarMeta;
         return {
+          title: s.data.title,
           name: s.name,
-          title: s.title,
-          level: (s.name.match(/\./g) || []).length,
+          level: 0,
           order: meta.order,
           icon: meta.icon
         };
       })
       .sort(function(a, b) {
         return (a.level - b.level) * 100 + a.order - b.order;
+      })
+      .filter(function(item) {
+        return item.level == 0;
       });
+
+    return menuItems.concat(this.staticMenuItems);
   }
 }