maps components structure created

src/app/pages/maps/components/googleMaps/googleMaps.component.ts

@@ -0,0 +1,19 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+
+@Component({
+  selector: 'google-maps',
+  pipes: [],
+  providers: [],
+  styles: [],
+  template: 'googleMaps'
+})
+export class GoogleMaps {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+    console.log('googleMaps');
+  }
+
+}

src/app/pages/maps/components/googleMaps/index.ts

@@ -0,0 +1 @@
+export * from './googleMaps.component';

src/app/pages/maps/index.ts

@@ -0,0 +1 @@
+export * from './maps.component';

src/app/pages/maps/maps.component.ts

@@ -0,0 +1,29 @@
+import {Component, ViewEncapsulation} from 'angular2/core';
+import {RouteConfig} from 'angular2/router';
+
+import {GoogleMaps} from './components/googleMaps';
+
+@Component({
+  selector: 'maps',
+  pipes: [],
+  providers: [],
+  styles: [],
+  template: `<router-outlet></router-outlet>`
+})
+@RouteConfig([
+  {
+    name: 'GoogleMaps',
+    component: GoogleMaps,
+    path: '/google-maps',
+    useAsDefault: true
+  },
+])
+export class Maps {
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/pages/pages.component.ts

@@ -1,9 +1,10 @@
 import {Component, ViewEncapsulation} from 'angular2/core';
 import {RouteConfig, Router} from 'angular2/router';
 
+import {PageTop, ContentTop, Sidebar} from '../theme';
 import {Dashboard} from './dashboard';
 import {Ui} from './ui';
-import {PageTop, ContentTop, Sidebar} from '../theme';
+import {Maps} from './maps';
 
 @Component({
   selector: 'pages',
@@ -32,6 +33,11 @@ import {PageTop, ContentTop, Sidebar} from '../theme';
     component: Ui,
     path: '/ui/...',
   },
+  {
+    name: 'Maps',
+    component: Maps,
+    path: '/maps/...',
+  },
 ])
 export class Pages {
 

src/app/pages/ui/ui.component.ts

@@ -15,15 +15,7 @@ import {Typography} from './components/typography';
     name: 'Typography',
     component: Typography,
     path: '/typography',
-    useAsDefault: true,
+    useAsDefault: true
-    data: {
-      title: 'Typography',
-      selected: false,
-      expanded: false,
-      sidebarMeta: {
-        order: 0,
-      }
-    }
   },
 ])
 export class Ui {

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

@@ -102,22 +102,23 @@ export class Sidebar {
   private selectMenuItem() {
     let currentMenu;
 
-    let isCurrent = (instruction) => (instruction ? this._router.isRouteActive(this._router.generate([instruction])) : false);
+    let isCurrent = (instructions) => (instructions.filter(i => typeof i !== 'undefined').length > 0 ? this._router.isRouteActive(this._router.generate(instructions)) : false);
     let assignCurrent = (menu) => (menu.selected ? currentMenu = menu : null);
 
     this.menuItems.forEach(function (menu: any) {
 
-      menu.selected = isCurrent(menu.name);
+      menu.selected = isCurrent([menu.name]);
       menu.expanded = menu.expanded || menu.selected;
       assignCurrent(menu);
 
       if (menu.subMenu) {
         menu.subMenu.forEach(function (subMenu) {
-          subMenu.selected = isCurrent(subMenu.name) && !subMenu.disabled;
+          subMenu.selected = isCurrent([menu.name, subMenu.name]) && !subMenu.disabled;
           assignCurrent(menu);
         });
       }
     });
+    
     // notifies all subscribers
     this._themeGlobal.setData('menu.activeLink', currentMenu);
   }

src/app/theme/sidebar/sidebar.html

@@ -27,11 +27,11 @@
               [ngClass]="{expanded: subitem.expanded, 'slide-right': subitem.slideRight}">
             <li *ngFor="#subSubitem of subitem.subMenu" (mouseenter)="hoverItem($event, item)"
                 [ngClass]="{selected: subitem.selected}">
-              <a (mouseenter)="hoverItem($event, item)" [routerLink]="[subSubitem.name]">
+              <a (mouseenter)="hoverItem($event, item)" [routerLink]="[item.name, subitem.name, subSubitem.name]">
                 {{ subSubitem.title }}</a>
             </li>
           </ul>
-          <a *ngIf="!subitem.subMenu" [routerLink]="[subitem.name]"
+          <a *ngIf="!subitem.subMenu" [routerLink]="[item.name, subitem.name]"
              (mouseenter)="hoverItem($event, item)" target="{{subitem.blank ? '_blank' : '_self'}}">
             {{ subitem.title}}
           </a>

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

@@ -20,6 +20,20 @@ export class SidebarService {
       expanded: false,
       order: 200
     },
+    {
+      title: 'Maps',
+      name: 'Maps',
+      icon: 'ion-ios-location-outline',
+      selected: false,
+      expanded: false,
+      order: 300,
+      subMenu: [
+        {
+          title: 'Google Maps',
+          name: 'GoogleMaps',
+        }
+      ]
+    },
     {
       title: 'Pages',
       icon: 'ion-document',