now is active based on router functionality rather than on location/urls

src/app/app.component.ts

@@ -12,6 +12,7 @@ require("!style!css!sass!./theme/sass/_ionicons.scss");
   /*
    * App Component
    * Top Level Component
+   * TODO: whey the header and footer are not implemented?
    */
 @Component({
   selector: 'app',
@@ -34,7 +35,7 @@ require("!style!css!sass!./theme/sass/_ionicons.scss");
 })
 @RouteConfig([
   {
-    path: '/...',
+    path: '/pages/...',
     name: 'Pages',
     component: Pages,
     useAsDefault: true

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

@@ -1,7 +1,7 @@
 import {Component, ElementRef} from 'angular2/core';
 
 import {SidebarService} from './sidebar.service';
-import {Location} from 'angular2/router';
+import {Router} from 'angular2/router';
 
 @Component({
     selector: 'sidebar',
@@ -13,17 +13,19 @@ import {Location} from 'angular2/router';
 })
 export class Sidebar {
   elementRef: ElementRef;
-  location: Location;
+  router: Router;
 
   menuItems: Array<any>;
   menuHeight: number;
   isMenuCollapsed: boolean;
 
-  constructor(el: ElementRef, location: Location, private _sidebarService: SidebarService) {
+  constructor(el: ElementRef, router: Router, private _sidebarService: SidebarService) {
     this.elementRef = el;
-    this.location = location;
+    this.router = router;
     this.menuItems = this._sidebarService.getMenuItems();
+  }
 
+  ngOnInit() {
     this.selectMenuItem();
   }
 
@@ -63,17 +65,21 @@ export class Sidebar {
     return false;
   }
 
+  private isActive(instruction: any[]): boolean {
+    return ;
+  }
+
   private selectMenuItem() {
-    let currentPath = this.location.path();
+    let isCurrent = (instruction) => (this.router.isRouteActive(this.router.generate([instruction])));
-    let isCurrent = (root) => (('#' + currentPath).indexOf(root) == 0);
 
     this.menuItems.forEach(function (menu) {
-      menu.selected = isCurrent(menu.root);
+
+      menu.selected = isCurrent(menu.name);
       menu.expanded = menu.expanded || menu.selected;
-      console.log(menu);
+
       if (menu.subMenu) {
         menu.subMenu.forEach(function (subMenu) {
-          subMenu.selected = isCurrent(subMenu.root) && !subMenu.disabled;
+          subMenu.selected = isCurrent(subMenu.name) && !subMenu.disabled;
         });
       }
     });

src/app/theme/sidebar/sidebar.html

@@ -3,7 +3,7 @@
     <li *ngFor="#item of menuItems" class="al-sidebar-list-item"
         [ngClass]="{'selected': item.selected, 'with-sub-menu': item.subMenu}">
 
-      <a *ngIf="!item.subMenu" href="{{ item.root }}" class="al-sidebar-list-link">
+      <a *ngIf="!item.subMenu" [routerLink]="[item.name]" class="al-sidebar-list-link">
         <i class="{{ item.icon }}"></i><span>{{ item.title }}</span>
       </a>
 

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

@@ -12,21 +12,21 @@ export class SidebarService {
       subMenu: [
         {
           title: 'Sign In',
-          root: 'auth.html',
+          // name: 'SignIn',
           blank: true
         },
         {
           title: 'Sign Up',
-          root: 'reg.html',
+          // name: 'SignUp',
           blank: true
         },
         {
           title: 'User Profile',
-          root: '#/profile'
+          // name: 'UserProfile'
         },
         {
           title: '404 Page',
-          root: '404.html',
+          // name: 'NotFound',
           blank: true
         }
       ]
@@ -39,14 +39,12 @@ export class SidebarService {
       subMenu: [
         {
           title: 'Menu Level 1.1',
-          root: '#',
           disabled: true
         },
         {
           title: 'Menu Level 1.2',
           subMenu: [{
             title: 'Menu Level 1.2.1',
-            root: '#',
             disabled: true
           }]
         }
@@ -73,12 +71,10 @@ export class SidebarService {
 
     // TODO mock state object
     var state = [{
-      name: 'dashboard',
+      name: 'Dashboard',
       title: 'Dashboard',
       selected: false,
       expanded: false,
-      url: '/pages/dashboard',
-      templateUrl: 'app/pages/dashboard/dashboard.html',
       sidebarMeta: {
         icon: 'ion-android-home',
         order: 0,
@@ -96,8 +92,7 @@ export class SidebarService {
           title: s.title,
           level: (s.name.match(/\./g) || []).length,
           order: meta.order,
-          icon: meta.icon,
+          icon: meta.icon
-          root: '#/' + s.name.replace('.', '/'),
         };
       })
       .sort(function(a, b) {