dynamic menu items

src/app/pages/pages.component.ts

@@ -9,20 +9,47 @@ import {PageTop, Sidebar} from '../theme';
  * Top Level Component
  */
 @Component({
-    selector: 'pages',
-    encapsulation: ViewEncapsulation.None,
-    styles: [],
-    directives: [PageTop, Sidebar],
-    template:  `<sidebar></sidebar><page-top></page-top><router-outlet></router-outlet>`
+  selector: 'pages',
+  encapsulation: ViewEncapsulation.None,
+  styles: [],
+  directives: [PageTop, Sidebar],
+  template: `<sidebar [routes]="getRoutes()"></sidebar><page-top></page-top><router-outlet></router-outlet>`
 })
 @RouteConfig([
-    { path: '/dashboard', name: 'Dashboard', component: Dashboard, useAsDefault: true },
+  {
+    path: '/dashboard',
+    name: 'Dashboard',
+    component: Dashboard,
+    useAsDefault: true,
+    data: {
+      title: 'Dashboard',
+      selected: true,
+      expanded: true,
+      sidebarMeta: {
+        icon: 'ion-android-home',
+        order: 0,
+      }
+    }
+  },
 ])
 export class Pages {
-    constructor() {}
 
-    ngOnInit() {
-        console.log('Pages');
+  private _routeConfig;
+
+  constructor(private _router: Router) { }
+
+  ngOnInit() { }
+
+  getRoutes() {
+
+    if (!this._routeConfig) {
+      this._routeConfig = Reflect.getMetadata('annotations', this.constructor)
+        .filter(a => {
+          return a.constructor.name === 'RouteConfig';
+        })
+        .pop();
     }
 
+    return this._routeConfig;
+  }
 }

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);
   }
 }