Use routes for navigation (DevExpress#5)

* Use routes for navigation

* Remove icon

* generate navigation for treeview

* Fix indents

* Add HomeComponent to routes

* Add export navigation

* Add a new line

src/app/app-navigation.ts

@@ -0,0 +1,18 @@
+export const navigation = [
+    {
+        text: 'Home',
+        path: '/home',
+        icon: 'home',
+        items: [{
+            text: 'Profile',
+            path: '/profile'
+        }, {
+            text: 'Settings',
+            path: '/settings'
+        }]
+    }, {
+        text: 'About',
+        path: '/about',
+        icon: 'info'
+    }
+];

src/app/app-routing.module.ts

@@ -5,23 +5,20 @@ import { ProfileComponent } from './pages/profile/profile.component';
 import { SettingsComponent } from './pages/settings/settings.component';
 import { AboutComponent } from './pages/about/about.component'
 
-const routes: Routes = [{
-    path: '',
-    redirectTo: 'profile',
-    pathMatch: 'full'
-  }, {
-    path: 'profile',
-    component: ProfileComponent,
-    data: { title: 'Profile' }
-  }, {
-    path: 'settings',
-    component: SettingsComponent,
-    data: { title: 'Settings' }
-  }, {
-    path: 'about',
-    component: AboutComponent,
-    data: { title: 'About' }
-  }
+export const routes: Routes = [{
+        path: '',
+        redirectTo: 'profile',
+        pathMatch: 'full'
+    }, {
+        path: 'profile',
+        component: ProfileComponent
+    }, {
+        path: 'settings',
+        component: SettingsComponent
+    }, {
+        path: 'about',
+        component: AboutComponent
+    }
 ];
 
 @NgModule({

src/app/layout/layout.component.html

@@ -1,6 +1,6 @@
 <div class="container">
-    <app-header 
-        class="header dx-additional-color-scheme-dark" 
+    <app-header
+        class="header dx-additional-color-scheme-dark"
         (menuToggle)="menuOpened = !menuOpened;">
     </app-header>
     <dx-drawer
@@ -10,13 +10,13 @@
         [minWidth]="minMenuWidth"
         [shading]="shaderEnabled"
         [(opened)]="menuOpened">
-    
-        <app-navigation-menu 
+
+        <app-navigation-menu
             class="dx-additional-color-scheme-dark"
-            *dxTemplate="let dataMenu of 'panel'" 
+            *dxTemplate="let dataMenu of 'panel'"
             (selectedItemChanged)="navigationChanged($event)">
         </app-navigation-menu>
-        
+
         <ng-content></ng-content>
     </dx-drawer>
 </div>

src/app/shared/components/navigation-menu/navigation-menu.component.html

@@ -1,6 +1,6 @@
 <dx-tree-view
     [items]="menuItems"
-    (onItemClick)="onItemSelectionChanged($event)" 
+    (onItemClick)="onItemSelectionChanged($event)"
     [selectByClick]="true"
     selectionMode="single">
 </dx-tree-view>

src/app/shared/components/navigation-menu/navigation-menu.component.ts

@@ -1,6 +1,6 @@
 import { Component, NgModule, Output, EventEmitter } from '@angular/core';
 import { DxTreeViewModule } from 'devextreme-angular/ui/tree-view';
-import { NavigationService, Navigation } from '../../../services/navigation/navigation.service';
+import { navigation } from '../../../app-navigation';
 import { Router } from '@angular/router';
 
 @Component({
@@ -11,17 +11,15 @@ import { Router } from '@angular/router';
             display: block;
             height: 100%;
         }
-    `],
-    providers: [NavigationService]
+    `]
 })
 export class NavigationMenuComponent {
     @Output() selectedItemChanged = new EventEmitter<string>();
+    menuItems: any;
 
-    menuItems: Navigation[];
-
-  constructor(private router: Router, navigationService: NavigationService) {
-      this.menuItems = navigationService.getNavigationData();
-  }
+    constructor(private router: Router) {
+        this.menuItems = navigation;
+    }
 
   onItemSelectionChanged(event) {
       this.selectedItemChanged.emit(event.itemData.text);