activate menu item

src/app/pages/pages.component.ts

@@ -10,7 +10,7 @@ import {PageTop, Sidebar} from '../theme';
   encapsulation: ViewEncapsulation.None,
   styles: [],
   directives: [PageTop, Sidebar],
-  template: `<sidebar [routes]="getRoutes()"></sidebar><page-top></page-top><router-outlet></router-outlet>`
+  template: `<sidebar></sidebar><page-top></page-top><router-outlet></router-outlet>`
 })
 @RouteConfig([
   {
@@ -18,51 +18,18 @@ import {PageTop, Sidebar} from '../theme';
     component: Dashboard,
     path: '/dashboard',
     useAsDefault: true,
-    data: {
-      title: 'Dashboard',
-      selected: false,
-      expanded: false,
-      sidebarMeta: {
-        icon: 'ion-android-home',
-        order: 0,
-      }
-    }
   },
   {
     name: 'Ui',
     component: Ui,
     path: '/ui/...',
-    data: {
-      title: 'UI Features',
-      selected: false,
-      expanded: false,
-      sidebarMeta: {
-        icon: 'ion-android-laptop',
-        order: 200,
-      }
-    }
   },
 ])
 export class Pages {
 
-  private _routeConfig;
-
-  constructor(private _router:Router) {
+  constructor() {
   }
 
   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

@@ -16,8 +16,6 @@ import {SidebarStateService} from './sidebarState.service';
 })
 export class Sidebar {
 
-  @Input('routes') routes;
-
   menuItems:Array<any>;
   menuHeight:number;
   isMenuCollapsed:boolean;
@@ -30,15 +28,17 @@ export class Sidebar {
 
   isMenuShouldCollapsed:boolean = false;
 
-  constructor(private elementRef:ElementRef,
-              private router:Router,
+  constructor(private _elementRef:ElementRef,
+              private _router:Router,
               private _sidebarService:SidebarService,
               private _sidebarStateService:SidebarStateService) {
+
   }
 
   ngOnInit() {
-    this.menuItems = this._sidebarService.getMenuItems(this.routes);
+    this.menuItems = this._sidebarService.getMenuItems();
     this.selectMenuItem();
+    this._router.root.subscribe(() => this.selectMenuItem());
   }
 
   // TODO: is it really the best event for this kind of things?
@@ -80,7 +80,7 @@ export class Sidebar {
 
   updateSidebarHeight() {
     // TODO: get rid of magic 84 constant
-    this.menuHeight = this.elementRef.nativeElement.childNodes[0].clientHeight - 84;
+    this.menuHeight = this._elementRef.nativeElement.childNodes[0].clientHeight - 84;
   }
 
   toggleSubMenu($event, item) {
@@ -100,9 +100,9 @@ export class Sidebar {
   }
 
   private selectMenuItem() {
-    let isCurrent = (instruction) => (instruction ? this.router.isRouteActive(this.router.generate([instruction])) : false);
+    let isCurrent = (instruction) => (instruction ? this._router.isRouteActive(this._router.generate([instruction])) : false);
 
-    this.menuItems.forEach(function (menu) {
+    this.menuItems.forEach(function (menu: any) {
 
       menu.selected = isCurrent(menu.name);
       menu.expanded = menu.expanded || menu.selected;

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

@@ -4,6 +4,22 @@ import {Injectable} from 'angular2/core';
 export class SidebarService {
 
   staticMenuItems = [
+    {
+      title: 'Dashboard',
+      name: 'Dashboard',
+      icon: 'ion-android-home',
+      selected: false,
+      expanded: false,
+      order: 0
+    },
+    {
+      title: 'UI Features',
+      name: 'Ui',
+      icon: 'ion-android-laptop',
+      selected: false,
+      expanded: false,
+      order: 200
+    },
     {
       title: 'Pages',
       icon: 'ion-document',
@@ -58,29 +74,7 @@ export class SidebarService {
   constructor() {
   }
 
-  getMenuItems(routes) {
-
-    let menuItems = routes.configs
-      .filter(function (s) {
-        return s.data.sidebarMeta != null;
-      })
-      .map(function (s) {
-        var meta = s.data.sidebarMeta;
-        return {
-          title: s.data.title,
-          name: s.name,
-          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);
+  getMenuItems() {
+    return this.staticMenuItems;
   }
 }