Changed how navigation data passed into the fuse-navigation

+ Added hidden property to the nav items
+ Updated fuse-navigation component docs
+ Updated other components that uses fuse-navigation service
+ Updated various packages including Angular and Angular Material

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "fuse2",
+  "name": "fuse",
-  "version": "1.3.7",
+  "version": "5.2.5",
   "license": "https://themeforest.net/licenses/terms/regular",
   "scripts": {
     "ng": "ng",
@@ -19,19 +19,19 @@
   "private": true,
   "dependencies": {
     "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "5.2.4",
+    "@angular/animations": "5.2.5",
-    "@angular/cdk": "5.2.0",
+    "@angular/cdk": "5.2.1",
-    "@angular/common": "5.2.4",
+    "@angular/common": "5.2.5",
-    "@angular/compiler": "5.2.4",
+    "@angular/compiler": "5.2.5",
-    "@angular/core": "5.2.4",
+    "@angular/core": "5.2.5",
     "@angular/flex-layout": "2.0.0-beta.12",
-    "@angular/forms": "5.2.4",
+    "@angular/forms": "5.2.5",
-    "@angular/http": "5.2.4",
+    "@angular/http": "5.2.5",
-    "@angular/material": "5.2.0",
+    "@angular/material": "5.2.1",
-    "@angular/material-moment-adapter": "5.2.0",
+    "@angular/material-moment-adapter": "5.2.1",
-    "@angular/platform-browser": "5.2.4",
+    "@angular/platform-browser": "5.2.5",
-    "@angular/platform-browser-dynamic": "5.2.4",
+    "@angular/platform-browser-dynamic": "5.2.5",
-    "@angular/router": "5.2.4",
+    "@angular/router": "5.2.5",
     "@ngrx/effects": "5.0.0",
     "@ngrx/router-store": "5.0.0",
     "@ngrx/store": "5.0.0",
@@ -41,7 +41,7 @@
     "@swimlane/ngx-datatable": "11.1.7",
     "@swimlane/ngx-dnd": "3.1.0",
     "@types/prismjs": "1.9.0",
-    "angular-calendar": "0.23.3",
+    "angular-calendar": "0.23.6",
     "angular-in-memory-web-api": "0.5.3",
     "chart.js": "2.7.1",
     "classlist.js": "1.1.20150312",
@@ -52,7 +52,7 @@
     "moment": "2.20.1",
     "ng2-charts": "1.6.0",
     "ngrx-store-freeze": "0.2.1",
-    "ngx-color-picker": "5.3.1",
+    "ngx-color-picker": "5.3.2",
     "ngx-cookie-service": "1.0.10",
     "perfect-scrollbar": "1.3.0",
     "prismjs": "1.11.0",
@@ -61,13 +61,13 @@
     "zone.js": "0.8.20"
   },
   "devDependencies": {
-    "@angular/cli": "1.6.8",
+    "@angular/cli": "1.7.0",
-    "@angular/compiler-cli": "5.2.4",
+    "@angular/compiler-cli": "5.2.5",
-    "@angular/language-service": "5.2.4",
+    "@angular/language-service": "5.2.5",
     "@angularclass/hmr": "2.1.3",
     "@types/jasmine": "2.8.6",
     "@types/jasminewd2": "2.0.3",
-    "@types/node": "6.0.98",
+    "@types/node": "6.0.101",
     "codelyzer": "4.1.0",
     "jasmine-core": "2.8.0",
     "jasmine-spec-reporter": "4.2.1",

src/@fuse/components/navigation/navigation.component.html

@@ -4,7 +4,7 @@
     <!-- Vertical Navigation Layout -->
     <ng-container *ngIf="layout === 'vertical'">
 
-        <ng-container *ngFor="let item of navigationModel">
+        <ng-container *ngFor="let item of navigation">
 
             <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
             <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
@@ -18,7 +18,7 @@
     <!-- Horizontal Navigation Layout -->
     <ng-container *ngIf="layout === 'horizontal'">
 
-        <ng-container *ngFor="let item of navigationModel">
+        <ng-container *ngFor="let item of navigation">
 
             <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
             <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>

src/@fuse/components/navigation/navigation.component.scss

@@ -1,6 +1,12 @@
 @import 'src/@fuse/scss/fuse';
 
+fuse-navigation {
+    display: flex;
+    flex: 1 0 auto;
+
     #main-navigation {
         margin: 0;
         padding: 0;
+        width: 100%;
+    }
 }

src/@fuse/components/navigation/navigation.component.ts

@@ -1,6 +1,4 @@
-import { Component, Input, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { FuseNavigationService } from './navigation.service';
-import { Subscription } from 'rxjs/Subscription';
 
 @Component({
     selector     : 'fuse-navigation',
@@ -8,25 +6,13 @@ import { Subscription } from 'rxjs/Subscription';
     styleUrls    : ['./navigation.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseNavigationComponent implements OnDestroy
+export class FuseNavigationComponent
 {
-    navigationModel: any[];
+    @Input() layout = 'vertical';
-    navigationModelChangeSubscription: Subscription;
+    @Input() navigation: any;
 
-    @Input('layout') layout = 'vertical';
+    constructor()
-
-    constructor(private fuseNavigationService: FuseNavigationService)
     {
-        this.navigationModelChangeSubscription =
-            this.fuseNavigationService.onNavigationModelChange
-                .subscribe((navigationModel) => {
-                    this.navigationModel = navigationModel;
-                });
-    }
-
-    ngOnDestroy()
-    {
-        this.navigationModelChangeSubscription.unsubscribe();
-    }
 
     }
+}

src/@fuse/components/navigation/navigation.model.ts

@@ -1,5 +0,0 @@
-export interface FuseNavigationModelInterface
-{
-    model: any[];
-}
-

src/@fuse/components/navigation/navigation.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../../modules/shared.module';
 import { RouterModule } from '@angular/router';
+
 import { FuseNavigationComponent } from './navigation.component';
 import { FuseNavVerticalItemComponent } from './vertical/nav-item/nav-vertical-item.component';
 import { FuseNavVerticalCollapseComponent } from './vertical/nav-collapse/nav-vertical-collapse.component';

src/@fuse/components/navigation/navigation.service.ts

@@ -1,177 +1,27 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Subject } from 'rxjs/Subject';
-import { FuseNavigationModelInterface } from './navigation.model';
 
 @Injectable()
 export class FuseNavigationService
 {
-    onNavCollapseToggle = new EventEmitter<any>();
-    onNavCollapseToggled = new EventEmitter<any>();
-    onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
-    navigationModel: FuseNavigationModelInterface;
     flatNavigation: any[] = [];
 
+    onItemCollapsed: Subject<any> = new Subject;
+    onItemCollapseToggled: Subject<any> = new Subject;
+
     constructor()
     {
     }
 
     /**
-     * Get navigation model
+     * Get flattened navigation array
-     *
+     * @param navigation
      * @returns {any[]}
      */
-    getNavigationModel()
+    getFlatNavigation(navigation)
     {
-        return this.navigationModel.model;
-    }
-
-    /**
-     * Set the navigation model
-     *
-     * @param model
-     */
-    setNavigationModel(model)
-    {
-        this.navigationModel = model;
-        this.onNavigationModelChange.next(this.navigationModel.model);
-    }
-
-    /**
-     * Add new navigation item
-     * to the given location
-     */
-    addNavigationItem(location, item)
-    {
-        // Parse the location
-        const locationArr = location.split('.');
-
-        if ( locationArr.length === 0 )
-        {
-            return;
-        }
-
-        // Find the navigation item
-        const navItem = this.findNavigationItemById(locationArr);
-
-        // Act according to the item type
-        switch ( navItem.type )
-        {
-            case 'item':
-
-                // Create a children array
-                navItem.children = [];
-
-                // Push the item
-                navItem.children.push(item);
-
-                // Change the item type to collapsable
-                navItem.type = 'collapse';
-
-                break;
-
-            case 'collapse':
-
-                // Push the item
-                navItem.children.push(item);
-
-                break;
-
-            case 'group':
-
-                // Push the item
-                navItem.children.push(item);
-
-                break;
-
-            default:
-                break;
-        }
-    }
-
-    /**
-     * Get navigation item from
-     * given location
-     *
-     * @param location
-     */
-    getNavigationItem(location)
-    {
-        // Parse the location
-        const locationArr = location.split('.');
-
-        if ( locationArr.length === 0 )
-        {
-            return;
-        }
-
-        // Find and return the navigation item
-        return this.findNavigationItemById(locationArr);
-    }
-
-    /**
-     * Find navigation item by location
-     *
-     * @param location
-     * @param navigation
-     */
-    findNavigationItemById(location, navigation?)
-    {
-        if ( !navigation )
-        {
-            navigation = this.navigationModel.model;
-        }
-
-        // Iterate through the given navigation
         for ( const navItem of navigation )
         {
-            // If the nav item id equals the first location...
-            if ( navItem.id === location[0] )
-            {
-                // If there is more location to look at...
-                if ( location.length > 1 )
-                {
-                    // Remove the first item of the location
-                    location.splice(0, 1);
-
-                    // Go nested...
-                    return this.findNavigationItemById(location, navItem.children);
-                }
-
-                // Otherwise just return the nav item
-                else
-                {
-                    return navItem;
-                }
-            }
-        }
-    }
-
-    /**
-     * Get flattened navigation array
-     * @param navigationItems
-     * @returns {any[]}
-     */
-    getFlatNavigation(navigationItems?)
-    {
-        // If navigation items not provided,
-        // that means we are running the function
-        // for the first time...
-        if ( !navigationItems )
-        {
-            // Reset the flat navigation
-            this.flatNavigation = [];
-
-            // Get the entire navigation model
-            navigationItems = this.navigationModel.model;
-        }
-
-        for ( const navItem of navigationItems )
-        {
-            if ( navItem.type === 'subheader' )
-            {
-                continue;
-            }
-
             if ( navItem.type === 'item' )
             {
                 this.flatNavigation.push({

src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html

@@ -1,3 +1,5 @@
+<ng-container *ngIf="!item.hidden">
+
     <a class="nav-link" matRipple (click)="toggleOpen($event)">
         <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
         <span class="nav-link-title" [translate]="item.translate">{{item.title}}</span>
@@ -15,3 +17,5 @@
             <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
         </ng-container>
     </div>
+
+</ng-container>

src/@fuse/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts

@@ -40,7 +40,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
         );
 
         // Listen for collapsing of any navigation item
-        this.navigationService.onNavCollapseToggled
+        this.navigationService.onItemCollapsed
             .subscribe(
                 (clickedItem) => {
                     if ( clickedItem && clickedItem.children )
@@ -95,8 +95,8 @@ export class FuseNavVerticalCollapseComponent implements OnInit
         this.isOpen = !this.isOpen;
 
         // Navigation collapse toggled...
-        this.navigationService.onNavCollapseToggled.emit(this.item);
+        this.navigationService.onItemCollapsed.next(this.item);
-        this.navigationService.onNavCollapseToggle.emit();
+        this.navigationService.onItemCollapseToggled.next();
     }
 
     /**
@@ -110,7 +110,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
         }
 
         this.isOpen = true;
-        this.navigationService.onNavCollapseToggle.emit();
+        this.navigationService.onItemCollapseToggled.next();
     }
 
     /**
@@ -124,7 +124,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
         }
 
         this.isOpen = false;
-        this.navigationService.onNavCollapseToggle.emit();
+        this.navigationService.onItemCollapseToggled.next();
     }
 
     /**

src/@fuse/components/navigation/vertical/nav-group/nav-vertical-group.component.html

@@ -1,3 +1,5 @@
+<ng-container *ngIf="!item.hidden">
+
     <div class="group-title">
         <span class="hint-text" [translate]="item.translate">{{ item.title }}</span>
     </div>
@@ -9,3 +11,5 @@
             <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
         </ng-container>
     </div>
+
+</ng-container>

src/@fuse/components/navigation/vertical/nav-item/nav-vertical-item.component.html

@@ -1,3 +1,5 @@
+<ng-container *ngIf="!item.hidden">
+
     <a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active"
        [routerLinkActiveOptions]="{exact: item.exactMatch || false}" matRipple>
         <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
@@ -16,3 +18,5 @@
             {{item.badge.title}}
         </span>
     </span>
+
+</ng-container>

src/@fuse/components/shortcuts/shortcuts.component.ts

@@ -6,6 +6,8 @@ import { FuseMatchMedia } from '../../services/match-media.service';
 import { FuseConfigService } from '../../services/config.service';
 import { CookieService } from 'ngx-cookie-service';
 
+import { navigation } from 'app/navigation/navigation';
+
 @Component({
     selector   : 'fuse-shortcuts',
     templateUrl: './shortcuts.component.html',
@@ -34,7 +36,7 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
         private cookieService: CookieService
     )
     {
-        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation();
+        this.filteredNavigationItems = this.navigationItems = this.fuseNavigationService.getFlatNavigation(navigation);
 
         this.onConfigChanged =
             this.fuseConfig.onConfigChanged

src/@fuse/components/theme-options/theme-options.component.ts

@@ -4,6 +4,7 @@ import { Subscription } from 'rxjs/Subscription';
 import { FuseConfigService } from '../../services/config.service';
 import { fuseAnimations } from '../../animations/index';
 import { FuseNavigationService } from '../navigation/navigation.service';
+import { navigation } from 'app/navigation/navigation';
 
 @Component({
     selector   : 'fuse-theme-options',
@@ -43,9 +44,9 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
 
         // Get the nav model and add customize nav item
         // that opens the bar programmatically
-        const navModel = this.navigationService.getNavigationModel();
+        const nav: any = navigation;
 
-        navModel.push({
+        nav.push({
             'id'      : 'custom-function',
             'title'   : 'Custom Function',
             'type'    : 'group',

src/app/app.component.ts

@@ -5,7 +5,6 @@ import { FuseSplashScreenService } from '@fuse/services/splash-screen.service';
 import { FuseTranslationLoaderService } from '@fuse/services/translation-loader.service';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
-import { FuseNavigationModel } from './navigation/navigation.model';
 import { locale as navigationEnglish } from './navigation/i18n/en';
 import { locale as navigationTurkish } from './navigation/i18n/tr';
 
@@ -32,9 +31,6 @@ export class AppComponent
         // Use a language
         this.translate.use('en');
 
-        // Set the navigation model
-        this.fuseNavigationService.setNavigationModel(new FuseNavigationModel());
-
         // Set the navigation translations
         this.translationLoader.loadTranslations(navigationEnglish, navigationTurkish);
     }

src/app/main/content/components/navigation/navigation.component.html

@@ -26,27 +26,44 @@
             <p class="py-8">
                 <fuse-highlight lang="html">
                     <textarea #source>
-                        <fuse-navigation></fuse-navigation>
+                        <fuse-navigation [navigation]="navigation" [layout]="'vertical'"></fuse-navigation>
                     </textarea>
                 </fuse-highlight>
             </p>
         </div>
 
         <div class="my-48">
-            <h2>Model</h2>
+            <h2>[navigation]</h2>
             <p class="py-8">
-                <code>&lt;fuse-navigation&gt;&lt;/fuse-navigation&gt;</code> uses a service and a model file to populate
+                <code>&lt;fuse-navigation&gt;&lt;/fuse-navigation&gt;</code> uses a json file to populate
-                the entire navigation. It supports three different navigation items; <b>Subheader</b>,
+                the entire navigation. It supports three different navigation items; <b>Group</b>,
                 <b>Collapsable</b> and <b>Item</b>. These items can be mixed and matched to create unique and complex
                 navigation layouts.
             </p>
             <p class="py-8">
-                Navigation model can be found in <code>src/app/navigation</code> folder along with its translation
+                Navigation data can be found in <code>src/app/navigation</code> folder along with its translation
-                files. Navigation model and its translation files are set in <b>app.component.ts</b> file. Check that
+                files. Navigation data and its translation files are set in <b>app.component.ts</b> file. Check that
                 file for more detailed usage example.
             </p>
         </div>
 
+        <div class="my-48">
+            <h2>[layout]</h2>
+            <p class="py-8">
+                There are two different layout options for the component; <code>vertical</code> and
+                <code>horizontal</code>. You can set the layout using the <code>[layout]</code> input.
+            </p>
+        </div>
+
+        <div class="my-48">
+            <h2>Updating the navigation</h2>
+            <p class="py-8">
+                Direct modifications on the navigation data will be reflected to the component. So you can modify the
+                json data, or even create it from scratch using your backend and the changes will reflected to the
+                component immediately.
+            </p>
+        </div>
+
         <div class="my-48">
             <h3>Grouping</h3>
             <p class="py-8">
@@ -118,7 +135,7 @@
             </p>
             <p>
                 Edit the <code>main.component.html</code> file and look for the <code>[folded]</code> attribute on
-                <code>fuse-navbar-vertical</code> components.
+                <code>fuse-sidebar</code> components.
             </p>
             <p>
                 Assigning <code>true</code> to that attribute will make the vertical navigation folded by default.
@@ -130,6 +147,34 @@
 
             <h2>Examples</h2>
 
+            <h4>Show / Hide certain navigation items</h4>
+
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
+                        hidden = false;
+
+                        showHideCalendarMenuItem()
+                        {
+                            // Get the calendar item from the navigation
+                            const calendarNavItem = this.navigation[0].children[1];
+
+                            // Toggle the visibility
+                            this.hidden = !this.hidden;
+                            calendarNavItem.hidden = this.hidden;
+                        }
+                    </textarea>
+                </fuse-highlight>
+            </p>
+
+            <div class="mt-24 mb-64">
+
+                <button mat-button mat-raised-button color="accent" (click)="showHideCalendarMenuItem()">
+                    Show / Hide calendar menu item
+                </button>
+
+            </div>
+
             <h4>Update navigation item on-the-fly</h4>
 
             <p class="py-8">
@@ -138,7 +183,7 @@
                         updateMailBadge()
                         {
                             // Get the mail nav item
-                            const mailNavItem = this.navigationService.getNavigationItem('applications.mail');
+                            const mailNavItem = this.navigation[0].children[4];
 
                             // Update the badge title
                             mailNavItem.badge.title = 35;
@@ -170,8 +215,17 @@
                                 url : '/apps/calendar'
                             };
 
-                            // Add the new nav item
+                            // Get the calendar item from the navigation
-                            this.navigationService.addNavigationItem('applications.calendar', newNavItem);
+                            const calendarNavItem = this.navigation[0].children[1];
+
+                            // Make the calendar navigation item collapsable
+                            calendarNavItem.type = 'collapse';
+
+                            // Create an empty children array
+                            calendarNavItem.children = [];
+
+                            // Push the new children
+                            calendarNavItem.children.push(newNavItem);
                         }
                     </textarea>
                 </fuse-highlight>
@@ -203,7 +257,7 @@
                             };
 
                             // Get the applications nav item
-                            const applicationsNavItem = this.navigationService.getNavigationItem('applications');
+                            const applicationsNavItem = this.navigation[0];
 
                             // Add the new nav item at the beginning of the applications
                             applicationsNavItem.children.unshift(newNavItem);

src/app/main/content/components/navigation/navigation.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+import { navigation } from 'app/navigation/navigation';
 
 @Component({
     selector   : 'fuse-navigation-docs',
@@ -9,15 +9,28 @@ import { FuseNavigationService } from '@fuse/components/navigation/navigation.se
 })
 export class FuseNavigationDocsComponent
 {
-    constructor(private navigationService: FuseNavigationService)
+    navigation: any;
-    {
+    hidden = false;
 
+    constructor()
+    {
+        this.navigation = navigation;
+    }
+
+    showHideCalendarMenuItem()
+    {
+        // Get the calendar item from the navigation
+        const calendarNavItem = this.navigation[0].children[1];
+
+        // Toggle the visibility
+        this.hidden = !this.hidden;
+        calendarNavItem.hidden = this.hidden;
     }
 
     updateMailBadge()
     {
         // Get the mail nav item
-        const mailNavItem = this.navigationService.getNavigationItem('applications.mail');
+        const mailNavItem = this.navigation[0].children[4];
 
         // Update the badge title
         mailNavItem.badge.title = 35;
@@ -33,8 +46,17 @@ export class FuseNavigationDocsComponent
             url  : '/apps/calendar'
         };
 
-        // Add the new nav item
+        // Get the calendar item from the navigation
-        this.navigationService.addNavigationItem('applications.calendar', newNavItem);
+        const calendarNavItem = this.navigation[0].children[1];
+
+        // Make the calendar navigation item collapsable
+        calendarNavItem.type = 'collapse';
+
+        // Create an empty children array
+        calendarNavItem.children = [];
+
+        // Push the new children
+        calendarNavItem.children.push(newNavItem);
     }
 
     addNavItemWithCustomFunction()
@@ -50,7 +72,7 @@ export class FuseNavigationDocsComponent
         };
 
         // Get the applications nav item
-        const applicationsNavItem = this.navigationService.getNavigationItem('applications');
+        const applicationsNavItem = this.navigation[0];
 
         // Add the new nav item at the beginning of the applications
         applicationsNavItem.children.unshift(newNavItem);

src/app/main/navbar/navbar.component.html

@@ -24,7 +24,7 @@
         </div>
 
         <div class="navbar-content" fusePerfectScrollbar>
-            <fuse-navigation layout="vertical"></fuse-navigation>
+            <fuse-navigation [navigation]="navigation" layout="vertical"></fuse-navigation>
         </div>
 
     </div>
@@ -34,7 +34,7 @@
 <ng-container *ngIf="layout == 'horizontal'">
 
     <div class="navbar-horizontal">
-        <fuse-navigation layout="horizontal"></fuse-navigation>
+        <fuse-navigation [navigation]="navigation" layout="horizontal"></fuse-navigation>
     </div>
 
 </ng-container>

src/app/main/navbar/navbar.component.scss

@@ -44,15 +44,22 @@ fuse-sidebar {
     }
 }
 
+fuse-navbar {
+    height: 100%;
+
     .navbar-vertical {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        height: 100%;
 
         .navbar-header {
-        padding: 0 16px 0 24px;
             display: flex;
             align-items: center;
+            justify-content: space-between;
             height: 64px;
             min-height: 64px;
-        justify-content: space-between;
+            padding: 0 16px 0 24px;
             transition: padding 200ms ease;
             background-color: rgba(255, 255, 255, .05);
             @include mat-elevation(1);
@@ -79,6 +86,7 @@ fuse-sidebar {
             flex: 1;
         }
     }
+}
 
 .top-navbar + #wrapper {
 

src/app/main/navbar/navbar.component.ts

@@ -1,21 +1,49 @@
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
+import { Subscription } from 'rxjs/Subscription';
 
+import { FusePerfectScrollbarDirective } from '@fuse/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseSidebarService } from '@fuse/components/sidebar/sidebar.service';
 
+import { navigation } from 'app/navigation/navigation';
+import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
+
 @Component({
     selector     : 'fuse-navbar',
     templateUrl  : './navbar.component.html',
     styleUrls    : ['./navbar.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
-export class FuseNavbarComponent
+export class FuseNavbarComponent implements OnDestroy
 {
+    @ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;
     @Input() layout;
+    navigation: any;
+    navigationServiceWatcher: Subscription;
+    fusePerfectScrollbarUpdateTimeout;
 
-    constructor(private sidebarService: FuseSidebarService)
+    constructor(
+        private sidebarService: FuseSidebarService,
+        private navigationService: FuseNavigationService
+    )
     {
+        // Navigation data
+        this.navigation = navigation;
+
         // Default layout
         this.layout = 'vertical';
+
+        this.navigationServiceWatcher =
+            this.navigationService.onItemCollapseToggled.subscribe(() => {
+                this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
+                    this.fusePerfectScrollbarDirective.update();
+                }, 310);
+            });
+    }
+
+    ngOnDestroy()
+    {
+        clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
+        this.navigationServiceWatcher.unsubscribe();
     }
 
     toggleSidebarOpened(key)

src/app/navigation/navigation.model.ts

@@ -1,913 +0,0 @@
-import { FuseNavigationModelInterface } from '@fuse/components/navigation/navigation.model';
-
-export class FuseNavigationModel implements FuseNavigationModelInterface
-{
-    public model: any[];
-
-    constructor()
-    {
-        this.model = [
-            {
-                'id'       : 'applications',
-                'title'    : 'Applications',
-                'translate': 'NAV.APPLICATIONS',
-                'type'     : 'group',
-                'icon'     : 'apps',
-                'children' : [
-                    {
-                        'id'       : 'dashboards',
-                        'title'    : 'Dashboards',
-                        'translate': 'NAV.DASHBOARDS',
-                        'type'     : 'collapse',
-                        'icon'     : 'dashboard',
-                        'children' : [
-                            {
-                                'id'   : 'analytics',
-                                'title': 'Analytics',
-                                'type' : 'item',
-                                'url'  : '/apps/dashboards/analytics'
-                            },
-                            {
-                                'id'   : 'project',
-                                'title': 'Project',
-                                'type' : 'item',
-                                'url'  : '/apps/dashboards/project'
-                            },
-                        ]
-                    },
-                    {
-                        'id'       : 'calendar',
-                        'title'    : 'Calendar',
-                        'translate': 'NAV.CALENDAR',
-                        'type'     : 'item',
-                        'icon'     : 'today',
-                        'url'      : '/apps/calendar'
-                    },
-                    {
-                        'id'       : 'e-commerce',
-                        'title'    : 'E-Commerce',
-                        'translate': 'NAV.ECOMMERCE',
-                        'type'     : 'collapse',
-                        'icon'     : 'shopping_cart',
-                        'children' : [
-                            {
-                                'id'   : 'dashboard',
-                                'title': 'Dashboard',
-                                'type' : 'item',
-                                'url'  : '/apps/e-commerce/dashboard'
-                            },
-                            {
-                                'id'        : 'products',
-                                'title'     : 'Products',
-                                'type'      : 'item',
-                                'url'       : '/apps/e-commerce/products',
-                                'exactMatch': true
-                            },
-                            {
-                                'id'        : 'productDetail',
-                                'title'     : 'Product Detail',
-                                'type'      : 'item',
-                                'url'       : '/apps/e-commerce/products/1/printed-dress',
-                                'exactMatch': true
-                            },
-                            {
-                                'id'        : 'orders',
-                                'title'     : 'Orders',
-                                'type'      : 'item',
-                                'url'       : '/apps/e-commerce/orders',
-                                'exactMatch': true
-                            },
-                            {
-                                'id'        : 'orderDetail',
-                                'title'     : 'Order Detail',
-                                'type'      : 'item',
-                                'url'       : '/apps/e-commerce/orders/1',
-                                'exactMatch': true
-                            }
-                        ]
-                    },
-                    {
-                        'id'       : 'academy',
-                        'title'    : 'Academy',
-                        'translate': 'NAV.ACADEMY',
-                        'type'     : 'item',
-                        'icon'     : 'school',
-                        'url'      : '/apps/academy'
-                    },
-                    {
-                        'id'       : 'mail',
-                        'title'    : 'Mail',
-                        'translate': 'NAV.MAIL.TITLE',
-                        'type'     : 'item',
-                        'icon'     : 'email',
-                        'url'      : '/apps/mail',
-                        'badge'    : {
-                            'title'    : 25,
-                            'translate': 'NAV.MAIL.BADGE',
-                            'bg'       : '#F44336',
-                            'fg'       : '#FFFFFF'
-                        }
-                    },
-                    {
-                        'id'       : 'mail-ngrx',
-                        'title'    : 'Mail Ngrx',
-                        'translate': 'NAV.MAIL_NGRX.TITLE',
-                        'type'     : 'item',
-                        'icon'     : 'email',
-                        'url'      : '/apps/mail-ngrx',
-                        'badge'    : {
-                            'title'    : 13,
-                            'translate': 'NAV.MAIL_NGRX.BADGE',
-                            'bg'       : '#EC0C8E',
-                            'fg'       : '#FFFFFF'
-                        }
-                    },
-                    {
-                        'id'       : 'chat',
-                        'title'    : 'Chat',
-                        'translate': 'NAV.CHAT',
-                        'type'     : 'item',
-                        'icon'     : 'chat',
-                        'url'      : '/apps/chat',
-                        'badge'    : {
-                            'title': 13,
-                            'bg'   : '#09d261',
-                            'fg'   : '#FFFFFF'
-                        }
-                    },
-                    {
-                        'id'       : 'file-manager',
-                        'title'    : 'File Manager',
-                        'translate': 'NAV.FILE_MANAGER',
-                        'type'     : 'item',
-                        'icon'     : 'folder',
-                        'url'      : '/apps/file-manager'
-                    },
-                    {
-                        'id'       : 'contacts',
-                        'title'    : 'Contacts',
-                        'translate': 'NAV.CONTACTS',
-                        'type'     : 'item',
-                        'icon'     : 'account_box',
-                        'url'      : '/apps/contacts'
-                    },
-                    {
-                        'id'       : 'to-do',
-                        'title'    : 'To-Do',
-                        'translate': 'NAV.TODO',
-                        'type'     : 'item',
-                        'icon'     : 'check_box',
-                        'url'      : '/apps/todo',
-                        'badge'    : {
-                            'title': 3,
-                            'bg'   : '#FF6F00',
-                            'fg'   : '#FFFFFF'
-                        }
-                    },
-                    {
-                        'id'       : 'scrumboard',
-                        'title'    : 'Scrumboard',
-                        'translate': 'NAV.SCRUMBOARD',
-                        'type'     : 'item',
-                        'icon'     : 'assessment',
-                        'url'      : '/apps/scrumboard'
-                    }
-                ]
-            },
-            {
-                'id'      : 'pages',
-                'title'   : 'Pages',
-                'type'    : 'group',
-                'icon'    : 'pages',
-                'children': [
-                    {
-                        'id'      : 'authentication',
-                        'title'   : 'Authentication',
-                        'type'    : 'collapse',
-                        'icon'    : 'lock',
-                        'badge'   : {
-                            'title': 10,
-                            'bg'   : '#525e8a',
-                            'fg'   : '#FFFFFF'
-                        },
-                        'children': [
-                            {
-                                'id'   : 'login',
-                                'title': 'Login',
-                                'type' : 'item',
-                                'url'  : '/pages/auth/login'
-                            },
-                            {
-                                'id'   : 'login-v2',
-                                'title': 'Login v2',
-                                'type' : 'item',
-                                'url'  : '/pages/auth/login-2'
-                            },
-                            {
-                                'id'   : 'register',
-                                'title': 'Register',
-                                'type' : 'item',
-                                'url'  : '/pages/auth/register'
-                            },
-                            {
-                                'id'   : 'register-v2',
-                                'title': 'Register v2',
-                                'type' : 'item',
-                                'url'  : '/pages/auth/register-2'
-                            },
-                            {
-                                'id'   : 'forgot-password',
-                                'title': 'Forgot Password',
-                                'type' : 'item',
-                                'url'  : '/pages/auth/forgot-password'
-                            },
-                            {
-                                'id'   : 'forgot-password-v2',
-                                'title': 'Forgot Password v2',
-                                'type' : 'item',
-                                'url'  : '/pages/auth/forgot-password-2'
-                            },
-                            {
-                                'id'   : 'reset-password',
-                                'title': 'Reset Password',
-                                'type' : 'item',
-                                'url'  : '/pages/auth/reset-password'
-                            },
-                            {
-                                'id'   : 'reset-password-v2',
-                                'title': 'Reset Password v2',
-                                'type' : 'item',
-                                'url'  : '/pages/auth/reset-password-2'
-                            },
-                            {
-                                'id'   : 'lock-screen',
-                                'title': 'Lock Screen',
-                                'type' : 'item',
-                                'url'  : '/pages/auth/lock'
-                            },
-                            {
-                                'id'   : 'mail-confirmation',
-                                'title': 'Mail Confirmation',
-                                'type' : 'item',
-                                'url'  : '/pages/auth/mail-confirm'
-                            }
-                        ]
-                    },
-                    {
-                        'id'   : 'coming-soon',
-                        'title': 'Coming Soon',
-                        'type' : 'item',
-                        'icon' : 'alarm',
-                        'url'  : '/pages/coming-soon'
-                    },
-                    {
-                        'id'      : 'errors',
-                        'title'   : 'Errors',
-                        'type'    : 'collapse',
-                        'icon'    : 'error',
-                        'children': [
-                            {
-                                'id'   : '404',
-                                'title': '404',
-                                'type' : 'item',
-                                'url'  : '/pages/errors/error-404'
-                            },
-                            {
-                                'id'   : '500',
-                                'title': '500',
-                                'type' : 'item',
-                                'url'  : '/pages/errors/error-500'
-                            }
-                        ]
-                    },
-                    {
-                        'id'      : 'invoice',
-                        'title'   : 'Invoice',
-                        'type'    : 'collapse',
-                        'icon'    : 'receipt',
-                        'children': [
-                            {
-                                'id'   : 'modern',
-                                'title': 'Modern',
-                                'type' : 'item',
-                                'url'  : '/pages/invoices/modern'
-                            },
-                            {
-                                'id'   : 'compact',
-                                'title': 'Compact',
-                                'type' : 'item',
-                                'url'  : '/pages/invoices/compact'
-                            }
-                        ]
-                    },
-                    {
-                        'id'   : 'maintenance',
-                        'title': 'Maintenance',
-                        'type' : 'item',
-                        'icon' : 'build',
-                        'url'  : '/pages/maintenance'
-                    },
-                    {
-                        'id'      : 'pricing',
-                        'title'   : 'Pricing',
-                        'type'    : 'collapse',
-                        'icon'    : 'attach_money',
-                        'children': [
-                            {
-                                'id'   : 'style-1',
-                                'title': 'Style 1',
-                                'type' : 'item',
-                                'url'  : '/pages/pricing/style-1'
-                            },
-                            {
-                                'id'   : 'style-2',
-                                'title': 'Style 2',
-                                'type' : 'item',
-                                'url'  : '/pages/pricing/style-2'
-                            },
-                            {
-                                'id'   : 'style-3',
-                                'title': 'Style 3',
-                                'type' : 'item',
-                                'url'  : '/pages/pricing/style-3'
-                            }
-                        ]
-                    },
-                    {
-                        'id'   : 'profile',
-                        'title': 'Profile',
-                        'type' : 'item',
-                        'icon' : 'person',
-                        'url'  : '/pages/profile'
-                    },
-                    {
-                        'id'   : 'search',
-                        'title': 'Search',
-                        'type' : 'item',
-                        'icon' : 'search',
-                        'url'  : '/pages/search'
-                    },
-                    {
-                        'title': 'Faq',
-                        'type' : 'item',
-                        'icon' : 'help',
-                        'url'  : '/pages/faq'
-                    },
-                    {
-                        'title': 'Knowledge Base',
-                        'type' : 'item',
-                        'icon' : 'import_contacts',
-                        'url'  : '/pages/knowledge-base'
-                    }
-                ]
-            },
-            {
-                'id'      : 'user-interface',
-                'title'   : 'User Interface',
-                'type'    : 'group',
-                'icon'    : 'web',
-                'children': [
-                    {
-                        'id'   : 'forms',
-                        'title': 'Forms',
-                        'type' : 'item',
-                        'icon' : 'web_asset',
-                        'url'  : '/ui/forms'
-                    },
-                    {
-                        'id'   : 'icons',
-                        'title': 'Icons',
-                        'type' : 'item',
-                        'icon' : 'photo',
-                        'url'  : '/ui/icons'
-                    },
-                    {
-                        'id'   : 'typography',
-                        'title': 'Typography',
-                        'type' : 'item',
-                        'icon' : 'text_fields',
-                        'url'  : '/ui/typography'
-                    },
-                    {
-                        'id'   : 'helper-classes',
-                        'title': 'Helper Classes',
-                        'type' : 'item',
-                        'icon' : 'help',
-                        'url'  : '/ui/helper-classes'
-                    },
-                    {
-                        'id'      : 'page-layouts',
-                        'title'   : 'Page Layouts',
-                        'type'    : 'collapse',
-                        'icon'    : 'view_quilt',
-                        'children': [
-                            {
-                                'id'      : 'carded',
-                                'title'   : 'Carded',
-                                'type'    : 'collapse',
-                                'badge'   : {
-                                    'title': 10,
-                                    'bg'   : '#525e8a',
-                                    'fg'   : '#FFFFFF'
-                                },
-                                'children': [
-                                    {
-                                        'id'   : 'full-width',
-                                        'title': 'Full Width',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/carded/full-width'
-                                    },
-                                    {
-                                        'id'   : 'full-width-2',
-                                        'title': 'Full Width 2',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/carded/full-width-2'
-                                    },
-                                    {
-                                        'id'   : 'left-sidenav',
-                                        'title': 'Left Sidenav',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/carded/left-sidenav'
-                                    },
-                                    {
-                                        'id'   : 'left-sidenav-tabbed',
-                                        'title': 'Left Sidenav Tabbed',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/carded/left-sidenav-tabbed'
-                                    },
-                                    {
-                                        'id'   : 'left-sidenav-2',
-                                        'title': 'Left Sidenav 2',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/carded/left-sidenav-2'
-                                    },
-                                    {
-                                        'id'   : 'left-sidenav-2-tabbed',
-                                        'title': 'Left Sidenav 2 Tabbed',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/carded/left-sidenav-2-tabbed'
-                                    },
-                                    {
-                                        'id'   : 'right-sidenav',
-                                        'title': 'Right Sidenav',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/carded/right-sidenav'
-                                    },
-                                    {
-                                        'id'   : 'right-sidenav-tabbed',
-                                        'title': 'Right Sidenav Tabbed',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/carded/right-sidenav-tabbed'
-                                    },
-                                    {
-                                        'id'   : 'right-sidenav-2',
-                                        'title': 'Right Sidenav 2',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/carded/right-sidenav-2'
-                                    },
-                                    {
-                                        'id'   : 'right-sidenav-2-tabbed',
-                                        'title': 'Right Sidenav 2 Tabbed',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/carded/right-sidenav-2-tabbed'
-                                    }
-                                ]
-                            },
-                            {
-                                'id'      : 'simple',
-                                'title'   : 'Simple',
-                                'type'    : 'collapse',
-                                'badge'   : {
-                                    'title': 8,
-                                    'bg'   : '#525e8a',
-                                    'fg'   : '#FFFFFF'
-                                },
-                                'children': [
-                                    {
-                                        'id'   : 'full-width',
-                                        'title': 'Full Width',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/simple/full-width'
-                                    },
-                                    {
-                                        'id'   : 'left-sidenav',
-                                        'title': 'Left Sidenav',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/simple/left-sidenav'
-                                    },
-                                    {
-                                        'id'   : 'left-sidenav-2',
-                                        'title': 'Left Sidenav 2',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/simple/left-sidenav-2'
-                                    },
-                                    {
-                                        'id'   : 'left-sidenav-3',
-                                        'title': 'Left Sidenav 3',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/simple/left-sidenav-3'
-                                    },
-                                    {
-                                        'id'   : 'right-sidenav',
-                                        'title': 'Right Sidenav',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/simple/right-sidenav'
-                                    },
-                                    {
-                                        'id'   : 'right-sidenav-2',
-                                        'title': 'Right Sidenav 2',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/simple/right-sidenav-2'
-                                    },
-                                    {
-                                        'id'   : 'right-sidenav-3',
-                                        'title': 'Right Sidenav 3',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/simple/right-sidenav-3'
-                                    },
-                                    {
-                                        'id'   : 'tabbed',
-                                        'title': 'Tabbed',
-                                        'type' : 'item',
-                                        'url'  : '/ui/page-layouts/simple/tabbed'
-                                    }
-                                ]
-                            },
-                            {
-                                'id'   : 'blank',
-                                'title': 'Blank',
-                                'type' : 'item',
-                                'url'  : '/ui/page-layouts/blank'
-                            }
-                        ]
-                    },
-                    {
-                        'id'   : 'colors',
-                        'title': 'Colors',
-                        'type' : 'item',
-                        'icon' : 'color_lens',
-                        'url'  : '/ui/colors'
-                    }
-                ]
-            },
-            {
-                'id'      : 'services',
-                'title'   : 'Services',
-                'type'    : 'group',
-                'icon'    : 'settings',
-                'children': [
-                    {
-                        'id'   : 'config',
-                        'title': 'Config',
-                        'type' : 'item',
-                        'icon' : 'settings',
-                        'url'  : '/services/config'
-                    },
-                    {
-                        'id'   : 'splash-screen',
-                        'title': 'Splash Screen',
-                        'type' : 'item',
-                        'icon' : 'settings',
-                        'url'  : '/services/splash-screen'
-                    }
-                ]
-            },
-            {
-                'id'      : 'components',
-                'title'   : 'Components',
-                'type'    : 'group',
-                'icon'    : 'settings_input_component',
-                'children': [
-                    {
-                        'id'      : 'angular-material-elements',
-                        'title'   : 'Angular Material Elements',
-                        'type'    : 'collapse',
-                        'icon'    : 'layers',
-                        'children': [
-                            {
-                                'id'      : 'form-controls',
-                                'title'   : 'Form Controls',
-                                'type'    : 'group',
-                                'children': [
-                                    {
-                                        'id'   : 'autocomplete',
-                                        'title': 'Autocomplete',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/autocomplete'
-                                    },
-                                    {
-                                        'id'   : 'checkbox',
-                                        'title': 'Checkbox',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/checkbox'
-                                    },
-                                    {
-                                        'id'   : 'datepicker',
-                                        'title': 'Datepicker',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/datepicker'
-                                    },
-                                    {
-                                        'id'   : 'form-field',
-                                        'title': 'Form field',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/form-field'
-                                    },
-                                    {
-                                        'id'   : 'input',
-                                        'title': 'Input',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/input'
-                                    },
-                                    {
-                                        'id'   : 'radio-button',
-                                        'title': 'Radio button',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/radio-button'
-                                    },
-                                    {
-                                        'id'   : 'select',
-                                        'title': 'Select',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/select'
-                                    },
-                                    {
-                                        'id'   : 'slider',
-                                        'title': 'Slider',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/slider'
-                                    },
-                                    {
-                                        'id'   : 'slide-toggle',
-                                        'title': 'Slide toggle',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/slide-toggle'
-                                    }
-                                ]
-                            },
-                            {
-                                'id'      : 'navigation',
-                                'title'   : 'Navigation',
-                                'type'    : 'group',
-                                'children': [
-                                    {
-                                        'id'   : 'menu',
-                                        'title': 'Menu',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/menu'
-                                    },
-                                    {
-                                        'id'   : 'sidenav',
-                                        'title': 'Sidenav',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/sidenav'
-                                    },
-                                    {
-                                        'id'   : 'toolbar',
-                                        'title': 'Toolbar',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/toolbar'
-                                    }
-                                ]
-                            },
-                            {
-                                'id'      : 'layout',
-                                'title'   : 'Layout',
-                                'type'    : 'group',
-                                'children': [
-                                    {
-                                        'id'   : 'list',
-                                        'title': 'List',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/list'
-                                    },
-                                    {
-                                        'id'   : 'grid-list',
-                                        'title': 'Grid list',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/grid-list'
-                                    },
-                                    {
-                                        'id'   : 'card',
-                                        'title': 'Card',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/card'
-                                    },
-                                    {
-                                        'id'   : 'stepper',
-                                        'title': 'Stepper',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/stepper'
-                                    },
-                                    {
-                                        'id'   : 'tabs',
-                                        'title': 'Tabs',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/tabs'
-                                    },
-                                    {
-                                        'id'   : 'elevation',
-                                        'title': 'Elevation',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/elevation'
-                                    },
-                                    {
-                                        'id'   : 'expansion-panel',
-                                        'title': 'Expansion Panel',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/expansion-panel'
-                                    }
-                                ]
-                            },
-                            {
-                                'id'      : 'buttons-indicators',
-                                'title'   : 'Buttons & Indicators',
-                                'type'    : 'group',
-                                'children': [
-                                    {
-                                        'id'   : 'button',
-                                        'title': 'Button',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/button'
-                                    },
-                                    {
-                                        'id'   : 'button-toggle',
-                                        'title': 'Button toggle',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/button-toggle'
-                                    },
-                                    {
-                                        'id'   : 'chips',
-                                        'title': 'Chips',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/chips'
-                                    },
-                                    {
-                                        'id'   : 'icon',
-                                        'title': 'Icon',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/icon'
-                                    },
-                                    {
-                                        'id'   : 'progress-spinner',
-                                        'title': 'Progress spinner',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/progress-spinner'
-                                    },
-                                    {
-                                        'id'   : 'progress-bar',
-                                        'title': 'Progress bar',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/progress-bar'
-                                    }
-                                ]
-                            },
-                            {
-                                'id'      : 'popups-modals',
-                                'title'   : 'Popups & Modals',
-                                'type'    : 'group',
-                                'children': [
-                                    {
-                                        'id'   : 'dialog',
-                                        'title': 'Dialog',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/dialog'
-                                    },
-                                    {
-                                        'id'   : 'tooltip',
-                                        'title': 'Tooltip',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/tooltip'
-                                    },
-                                    {
-                                        'id'   : 'snackbar',
-                                        'title': 'Snackbar',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/snackbar'
-                                    }
-                                ]
-                            },
-                            {
-                                'id'      : 'data-table',
-                                'title'   : 'Data table',
-                                'type'    : 'group',
-                                'children': [
-                                    {
-                                        'id'   : 'table',
-                                        'title': 'Table',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/data-table'
-                                    },
-                                    {
-                                        'id'   : 'sort-header',
-                                        'title': 'Sort header',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/sort-header'
-                                    },
-                                    {
-                                        'id'   : 'paginator',
-                                        'title': 'Paginator',
-                                        'type' : 'item',
-                                        'url'  : '/components/angular-material/paginator'
-                                    }
-                                ]
-                            }
-                        ]
-                    },
-                    {
-                        'id'   : 'cards',
-                        'title': 'Cards',
-                        'type' : 'item',
-                        'icon' : 'settings_input_component',
-                        'url'  : '/components/cards'
-                    },
-                    {
-                        'id'   : 'countdown',
-                        'title': 'Countdown',
-                        'type' : 'item',
-                        'icon' : 'settings_input_component',
-                        'url'  : '/components/countdown'
-                    },
-                    {
-                        'id'   : 'highlight',
-                        'title': 'Highlight',
-                        'type' : 'item',
-                        'icon' : 'settings_input_component',
-                        'url'  : '/components/highlight'
-                    },
-                    {
-                        'id'   : 'material-color-picker',
-                        'title': 'Material Color Picker',
-                        'type' : 'item',
-                        'icon' : 'settings_input_component',
-                        'url'  : '/components/material-color-picker'
-                    },
-                    {
-                        'id'   : 'multi-language',
-                        'title': 'Multi Language',
-                        'type' : 'item',
-                        'icon' : 'settings_input_component',
-                        'url'  : '/components/multi-language'
-                    },
-                    {
-                        'id'   : 'navigation',
-                        'title': 'Navigation',
-                        'type' : 'item',
-                        'icon' : 'settings_input_component',
-                        'url'  : '/components/navigation'
-                    },
-                    {
-                        'id'   : 'search-bar',
-                        'title': 'Search Bar',
-                        'type' : 'item',
-                        'icon' : 'settings_input_component',
-                        'url'  : '/components/search-bar'
-                    },
-                    {
-                        'id'   : 'shortcuts',
-                        'title': 'Shortcuts',
-                        'type' : 'item',
-                        'icon' : 'settings_input_component',
-                        'url'  : '/components/shortcuts'
-                    },
-                    {
-                        'id'   : 'widget',
-                        'title': 'Widget',
-                        'type' : 'item',
-                        'icon' : 'settings_input_component',
-                        'url'  : '/components/widget'
-                    }
-                ]
-            },
-            {
-                'id'      : '3rd-party-components',
-                'title'   : '3rd Party components',
-                'type'    : 'group',
-                'icon'    : 'settings_input_component',
-                'children': [
-                    {
-                        'id'      : 'datatables',
-                        'title'   : 'Datatables',
-                        'type'    : 'collapse',
-                        'icon'    : 'border_all',
-                        'children': [
-                            {
-                                'id'   : 'ngxdatatable',
-                                'title': 'ngx-datatable',
-                                'type' : 'item',
-                                'url'  : '/components-third-party/datatables/ngx-datatable'
-                            }
-                        ]
-                    },
-                    {
-                        'id'   : 'google-maps',
-                        'title': 'Google Maps',
-                        'type' : 'item',
-                        'icon' : 'place',
-                        'url'  : '/components-third-party/google-maps'
-                    }
-                ]
-            }
-        ];
-    }
-}

src/app/navigation/navigation.ts

@@ -0,0 +1,903 @@
+export const navigation = [
+    {
+        'id'       : 'applications',
+        'title'    : 'Applications',
+        'translate': 'NAV.APPLICATIONS',
+        'type'     : 'group',
+        'icon'     : 'apps',
+        'children' : [
+            {
+                'id'       : 'dashboards',
+                'title'    : 'Dashboards',
+                'translate': 'NAV.DASHBOARDS',
+                'type'     : 'collapse',
+                'icon'     : 'dashboard',
+                'children' : [
+                    {
+                        'id'   : 'analytics',
+                        'title': 'Analytics',
+                        'type' : 'item',
+                        'url'  : '/apps/dashboards/analytics'
+                    },
+                    {
+                        'id'   : 'project',
+                        'title': 'Project',
+                        'type' : 'item',
+                        'url'  : '/apps/dashboards/project'
+                    }
+                ]
+            },
+            {
+                'id'       : 'calendar',
+                'title'    : 'Calendar',
+                'translate': 'NAV.CALENDAR',
+                'type'     : 'item',
+                'icon'     : 'today',
+                'url'      : '/apps/calendar'
+            },
+            {
+                'id'       : 'e-commerce',
+                'title'    : 'E-Commerce',
+                'translate': 'NAV.ECOMMERCE',
+                'type'     : 'collapse',
+                'icon'     : 'shopping_cart',
+                'children' : [
+                    {
+                        'id'   : 'dashboard',
+                        'title': 'Dashboard',
+                        'type' : 'item',
+                        'url'  : '/apps/e-commerce/dashboard'
+                    },
+                    {
+                        'id'        : 'products',
+                        'title'     : 'Products',
+                        'type'      : 'item',
+                        'url'       : '/apps/e-commerce/products',
+                        'exactMatch': true
+                    },
+                    {
+                        'id'        : 'productDetail',
+                        'title'     : 'Product Detail',
+                        'type'      : 'item',
+                        'url'       : '/apps/e-commerce/products/1/printed-dress',
+                        'exactMatch': true
+                    },
+                    {
+                        'id'        : 'orders',
+                        'title'     : 'Orders',
+                        'type'      : 'item',
+                        'url'       : '/apps/e-commerce/orders',
+                        'exactMatch': true
+                    },
+                    {
+                        'id'        : 'orderDetail',
+                        'title'     : 'Order Detail',
+                        'type'      : 'item',
+                        'url'       : '/apps/e-commerce/orders/1',
+                        'exactMatch': true
+                    }
+                ]
+            },
+            {
+                'id'       : 'academy',
+                'title'    : 'Academy',
+                'translate': 'NAV.ACADEMY',
+                'type'     : 'item',
+                'icon'     : 'school',
+                'url'      : '/apps/academy'
+            },
+            {
+                'id'       : 'mail',
+                'title'    : 'Mail',
+                'translate': 'NAV.MAIL.TITLE',
+                'type'     : 'item',
+                'icon'     : 'email',
+                'url'      : '/apps/mail',
+                'badge'    : {
+                    'title'    : 25,
+                    'translate': 'NAV.MAIL.BADGE',
+                    'bg'       : '#F44336',
+                    'fg'       : '#FFFFFF'
+                }
+            },
+            {
+                'id'       : 'mail-ngrx',
+                'title'    : 'Mail Ngrx',
+                'translate': 'NAV.MAIL_NGRX.TITLE',
+                'type'     : 'item',
+                'icon'     : 'email',
+                'url'      : '/apps/mail-ngrx',
+                'badge'    : {
+                    'title'    : 13,
+                    'translate': 'NAV.MAIL_NGRX.BADGE',
+                    'bg'       : '#EC0C8E',
+                    'fg'       : '#FFFFFF'
+                }
+            },
+            {
+                'id'       : 'chat',
+                'title'    : 'Chat',
+                'translate': 'NAV.CHAT',
+                'type'     : 'item',
+                'icon'     : 'chat',
+                'url'      : '/apps/chat',
+                'badge'    : {
+                    'title': 13,
+                    'bg'   : '#09d261',
+                    'fg'   : '#FFFFFF'
+                }
+            },
+            {
+                'id'       : 'file-manager',
+                'title'    : 'File Manager',
+                'translate': 'NAV.FILE_MANAGER',
+                'type'     : 'item',
+                'icon'     : 'folder',
+                'url'      : '/apps/file-manager'
+            },
+            {
+                'id'       : 'contacts',
+                'title'    : 'Contacts',
+                'translate': 'NAV.CONTACTS',
+                'type'     : 'item',
+                'icon'     : 'account_box',
+                'url'      : '/apps/contacts'
+            },
+            {
+                'id'       : 'to-do',
+                'title'    : 'To-Do',
+                'translate': 'NAV.TODO',
+                'type'     : 'item',
+                'icon'     : 'check_box',
+                'url'      : '/apps/todo',
+                'badge'    : {
+                    'title': 3,
+                    'bg'   : '#FF6F00',
+                    'fg'   : '#FFFFFF'
+                }
+            },
+            {
+                'id'       : 'scrumboard',
+                'title'    : 'Scrumboard',
+                'translate': 'NAV.SCRUMBOARD',
+                'type'     : 'item',
+                'icon'     : 'assessment',
+                'url'      : '/apps/scrumboard'
+            }
+        ]
+    },
+    {
+        'id'      : 'pages',
+        'title'   : 'Pages',
+        'type'    : 'group',
+        'icon'    : 'pages',
+        'children': [
+            {
+                'id'      : 'authentication',
+                'title'   : 'Authentication',
+                'type'    : 'collapse',
+                'icon'    : 'lock',
+                'badge'   : {
+                    'title': 10,
+                    'bg'   : '#525e8a',
+                    'fg'   : '#FFFFFF'
+                },
+                'children': [
+                    {
+                        'id'   : 'login',
+                        'title': 'Login',
+                        'type' : 'item',
+                        'url'  : '/pages/auth/login'
+                    },
+                    {
+                        'id'   : 'login-v2',
+                        'title': 'Login v2',
+                        'type' : 'item',
+                        'url'  : '/pages/auth/login-2'
+                    },
+                    {
+                        'id'   : 'register',
+                        'title': 'Register',
+                        'type' : 'item',
+                        'url'  : '/pages/auth/register'
+                    },
+                    {
+                        'id'   : 'register-v2',
+                        'title': 'Register v2',
+                        'type' : 'item',
+                        'url'  : '/pages/auth/register-2'
+                    },
+                    {
+                        'id'   : 'forgot-password',
+                        'title': 'Forgot Password',
+                        'type' : 'item',
+                        'url'  : '/pages/auth/forgot-password'
+                    },
+                    {
+                        'id'   : 'forgot-password-v2',
+                        'title': 'Forgot Password v2',
+                        'type' : 'item',
+                        'url'  : '/pages/auth/forgot-password-2'
+                    },
+                    {
+                        'id'   : 'reset-password',
+                        'title': 'Reset Password',
+                        'type' : 'item',
+                        'url'  : '/pages/auth/reset-password'
+                    },
+                    {
+                        'id'   : 'reset-password-v2',
+                        'title': 'Reset Password v2',
+                        'type' : 'item',
+                        'url'  : '/pages/auth/reset-password-2'
+                    },
+                    {
+                        'id'   : 'lock-screen',
+                        'title': 'Lock Screen',
+                        'type' : 'item',
+                        'url'  : '/pages/auth/lock'
+                    },
+                    {
+                        'id'   : 'mail-confirmation',
+                        'title': 'Mail Confirmation',
+                        'type' : 'item',
+                        'url'  : '/pages/auth/mail-confirm'
+                    }
+                ]
+            },
+            {
+                'id'   : 'coming-soon',
+                'title': 'Coming Soon',
+                'type' : 'item',
+                'icon' : 'alarm',
+                'url'  : '/pages/coming-soon'
+            },
+            {
+                'id'      : 'errors',
+                'title'   : 'Errors',
+                'type'    : 'collapse',
+                'icon'    : 'error',
+                'children': [
+                    {
+                        'id'   : '404',
+                        'title': '404',
+                        'type' : 'item',
+                        'url'  : '/pages/errors/error-404'
+                    },
+                    {
+                        'id'   : '500',
+                        'title': '500',
+                        'type' : 'item',
+                        'url'  : '/pages/errors/error-500'
+                    }
+                ]
+            },
+            {
+                'id'      : 'invoice',
+                'title'   : 'Invoice',
+                'type'    : 'collapse',
+                'icon'    : 'receipt',
+                'children': [
+                    {
+                        'id'   : 'modern',
+                        'title': 'Modern',
+                        'type' : 'item',
+                        'url'  : '/pages/invoices/modern'
+                    },
+                    {
+                        'id'   : 'compact',
+                        'title': 'Compact',
+                        'type' : 'item',
+                        'url'  : '/pages/invoices/compact'
+                    }
+                ]
+            },
+            {
+                'id'   : 'maintenance',
+                'title': 'Maintenance',
+                'type' : 'item',
+                'icon' : 'build',
+                'url'  : '/pages/maintenance'
+            },
+            {
+                'id'      : 'pricing',
+                'title'   : 'Pricing',
+                'type'    : 'collapse',
+                'icon'    : 'attach_money',
+                'children': [
+                    {
+                        'id'   : 'style-1',
+                        'title': 'Style 1',
+                        'type' : 'item',
+                        'url'  : '/pages/pricing/style-1'
+                    },
+                    {
+                        'id'   : 'style-2',
+                        'title': 'Style 2',
+                        'type' : 'item',
+                        'url'  : '/pages/pricing/style-2'
+                    },
+                    {
+                        'id'   : 'style-3',
+                        'title': 'Style 3',
+                        'type' : 'item',
+                        'url'  : '/pages/pricing/style-3'
+                    }
+                ]
+            },
+            {
+                'id'   : 'profile',
+                'title': 'Profile',
+                'type' : 'item',
+                'icon' : 'person',
+                'url'  : '/pages/profile'
+            },
+            {
+                'id'   : 'search',
+                'title': 'Search',
+                'type' : 'item',
+                'icon' : 'search',
+                'url'  : '/pages/search'
+            },
+            {
+                'title': 'Faq',
+                'type' : 'item',
+                'icon' : 'help',
+                'url'  : '/pages/faq'
+            },
+            {
+                'title': 'Knowledge Base',
+                'type' : 'item',
+                'icon' : 'import_contacts',
+                'url'  : '/pages/knowledge-base'
+            }
+        ]
+    },
+    {
+        'id'      : 'user-interface',
+        'title'   : 'User Interface',
+        'type'    : 'group',
+        'icon'    : 'web',
+        'children': [
+            {
+                'id'   : 'forms',
+                'title': 'Forms',
+                'type' : 'item',
+                'icon' : 'web_asset',
+                'url'  : '/ui/forms'
+            },
+            {
+                'id'   : 'icons',
+                'title': 'Icons',
+                'type' : 'item',
+                'icon' : 'photo',
+                'url'  : '/ui/icons'
+            },
+            {
+                'id'   : 'typography',
+                'title': 'Typography',
+                'type' : 'item',
+                'icon' : 'text_fields',
+                'url'  : '/ui/typography'
+            },
+            {
+                'id'   : 'helper-classes',
+                'title': 'Helper Classes',
+                'type' : 'item',
+                'icon' : 'help',
+                'url'  : '/ui/helper-classes'
+            },
+            {
+                'id'      : 'page-layouts',
+                'title'   : 'Page Layouts',
+                'type'    : 'collapse',
+                'icon'    : 'view_quilt',
+                'children': [
+                    {
+                        'id'      : 'carded',
+                        'title'   : 'Carded',
+                        'type'    : 'collapse',
+                        'badge'   : {
+                            'title': 10,
+                            'bg'   : '#525e8a',
+                            'fg'   : '#FFFFFF'
+                        },
+                        'children': [
+                            {
+                                'id'   : 'full-width',
+                                'title': 'Full Width',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/carded/full-width'
+                            },
+                            {
+                                'id'   : 'full-width-2',
+                                'title': 'Full Width 2',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/carded/full-width-2'
+                            },
+                            {
+                                'id'   : 'left-sidenav',
+                                'title': 'Left Sidenav',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/carded/left-sidenav'
+                            },
+                            {
+                                'id'   : 'left-sidenav-tabbed',
+                                'title': 'Left Sidenav Tabbed',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/carded/left-sidenav-tabbed'
+                            },
+                            {
+                                'id'   : 'left-sidenav-2',
+                                'title': 'Left Sidenav 2',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/carded/left-sidenav-2'
+                            },
+                            {
+                                'id'   : 'left-sidenav-2-tabbed',
+                                'title': 'Left Sidenav 2 Tabbed',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/carded/left-sidenav-2-tabbed'
+                            },
+                            {
+                                'id'   : 'right-sidenav',
+                                'title': 'Right Sidenav',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/carded/right-sidenav'
+                            },
+                            {
+                                'id'   : 'right-sidenav-tabbed',
+                                'title': 'Right Sidenav Tabbed',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/carded/right-sidenav-tabbed'
+                            },
+                            {
+                                'id'   : 'right-sidenav-2',
+                                'title': 'Right Sidenav 2',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/carded/right-sidenav-2'
+                            },
+                            {
+                                'id'   : 'right-sidenav-2-tabbed',
+                                'title': 'Right Sidenav 2 Tabbed',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/carded/right-sidenav-2-tabbed'
+                            }
+                        ]
+                    },
+                    {
+                        'id'      : 'simple',
+                        'title'   : 'Simple',
+                        'type'    : 'collapse',
+                        'badge'   : {
+                            'title': 8,
+                            'bg'   : '#525e8a',
+                            'fg'   : '#FFFFFF'
+                        },
+                        'children': [
+                            {
+                                'id'   : 'full-width',
+                                'title': 'Full Width',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/simple/full-width'
+                            },
+                            {
+                                'id'   : 'left-sidenav',
+                                'title': 'Left Sidenav',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/simple/left-sidenav'
+                            },
+                            {
+                                'id'   : 'left-sidenav-2',
+                                'title': 'Left Sidenav 2',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/simple/left-sidenav-2'
+                            },
+                            {
+                                'id'   : 'left-sidenav-3',
+                                'title': 'Left Sidenav 3',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/simple/left-sidenav-3'
+                            },
+                            {
+                                'id'   : 'right-sidenav',
+                                'title': 'Right Sidenav',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/simple/right-sidenav'
+                            },
+                            {
+                                'id'   : 'right-sidenav-2',
+                                'title': 'Right Sidenav 2',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/simple/right-sidenav-2'
+                            },
+                            {
+                                'id'   : 'right-sidenav-3',
+                                'title': 'Right Sidenav 3',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/simple/right-sidenav-3'
+                            },
+                            {
+                                'id'   : 'tabbed',
+                                'title': 'Tabbed',
+                                'type' : 'item',
+                                'url'  : '/ui/page-layouts/simple/tabbed'
+                            }
+                        ]
+                    },
+                    {
+                        'id'   : 'blank',
+                        'title': 'Blank',
+                        'type' : 'item',
+                        'url'  : '/ui/page-layouts/blank'
+                    }
+                ]
+            },
+            {
+                'id'   : 'colors',
+                'title': 'Colors',
+                'type' : 'item',
+                'icon' : 'color_lens',
+                'url'  : '/ui/colors'
+            }
+        ]
+    },
+    {
+        'id'      : 'services',
+        'title'   : 'Services',
+        'type'    : 'group',
+        'icon'    : 'settings',
+        'children': [
+            {
+                'id'   : 'config',
+                'title': 'Config',
+                'type' : 'item',
+                'icon' : 'settings',
+                'url'  : '/services/config'
+            },
+            {
+                'id'   : 'splash-screen',
+                'title': 'Splash Screen',
+                'type' : 'item',
+                'icon' : 'settings',
+                'url'  : '/services/splash-screen'
+            }
+        ]
+    },
+    {
+        'id'      : 'components',
+        'title'   : 'Components',
+        'type'    : 'group',
+        'icon'    : 'settings_input_component',
+        'children': [
+            {
+                'id'      : 'angular-material-elements',
+                'title'   : 'Angular Material Elements',
+                'type'    : 'collapse',
+                'icon'    : 'layers',
+                'children': [
+                    {
+                        'id'      : 'form-controls',
+                        'title'   : 'Form Controls',
+                        'type'    : 'group',
+                        'children': [
+                            {
+                                'id'   : 'autocomplete',
+                                'title': 'Autocomplete',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/autocomplete'
+                            },
+                            {
+                                'id'   : 'checkbox',
+                                'title': 'Checkbox',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/checkbox'
+                            },
+                            {
+                                'id'   : 'datepicker',
+                                'title': 'Datepicker',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/datepicker'
+                            },
+                            {
+                                'id'   : 'form-field',
+                                'title': 'Form field',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/form-field'
+                            },
+                            {
+                                'id'   : 'input',
+                                'title': 'Input',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/input'
+                            },
+                            {
+                                'id'   : 'radio-button',
+                                'title': 'Radio button',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/radio-button'
+                            },
+                            {
+                                'id'   : 'select',
+                                'title': 'Select',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/select'
+                            },
+                            {
+                                'id'   : 'slider',
+                                'title': 'Slider',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/slider'
+                            },
+                            {
+                                'id'   : 'slide-toggle',
+                                'title': 'Slide toggle',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/slide-toggle'
+                            }
+                        ]
+                    },
+                    {
+                        'id'      : 'navigation',
+                        'title'   : 'Navigation',
+                        'type'    : 'group',
+                        'children': [
+                            {
+                                'id'   : 'menu',
+                                'title': 'Menu',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/menu'
+                            },
+                            {
+                                'id'   : 'sidenav',
+                                'title': 'Sidenav',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/sidenav'
+                            },
+                            {
+                                'id'   : 'toolbar',
+                                'title': 'Toolbar',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/toolbar'
+                            }
+                        ]
+                    },
+                    {
+                        'id'      : 'layout',
+                        'title'   : 'Layout',
+                        'type'    : 'group',
+                        'children': [
+                            {
+                                'id'   : 'list',
+                                'title': 'List',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/list'
+                            },
+                            {
+                                'id'   : 'grid-list',
+                                'title': 'Grid list',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/grid-list'
+                            },
+                            {
+                                'id'   : 'card',
+                                'title': 'Card',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/card'
+                            },
+                            {
+                                'id'   : 'stepper',
+                                'title': 'Stepper',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/stepper'
+                            },
+                            {
+                                'id'   : 'tabs',
+                                'title': 'Tabs',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/tabs'
+                            },
+                            {
+                                'id'   : 'elevation',
+                                'title': 'Elevation',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/elevation'
+                            },
+                            {
+                                'id'   : 'expansion-panel',
+                                'title': 'Expansion Panel',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/expansion-panel'
+                            }
+                        ]
+                    },
+                    {
+                        'id'      : 'buttons-indicators',
+                        'title'   : 'Buttons & Indicators',
+                        'type'    : 'group',
+                        'children': [
+                            {
+                                'id'   : 'button',
+                                'title': 'Button',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/button'
+                            },
+                            {
+                                'id'   : 'button-toggle',
+                                'title': 'Button toggle',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/button-toggle'
+                            },
+                            {
+                                'id'   : 'chips',
+                                'title': 'Chips',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/chips'
+                            },
+                            {
+                                'id'   : 'icon',
+                                'title': 'Icon',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/icon'
+                            },
+                            {
+                                'id'   : 'progress-spinner',
+                                'title': 'Progress spinner',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/progress-spinner'
+                            },
+                            {
+                                'id'   : 'progress-bar',
+                                'title': 'Progress bar',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/progress-bar'
+                            }
+                        ]
+                    },
+                    {
+                        'id'      : 'popups-modals',
+                        'title'   : 'Popups & Modals',
+                        'type'    : 'group',
+                        'children': [
+                            {
+                                'id'   : 'dialog',
+                                'title': 'Dialog',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/dialog'
+                            },
+                            {
+                                'id'   : 'tooltip',
+                                'title': 'Tooltip',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/tooltip'
+                            },
+                            {
+                                'id'   : 'snackbar',
+                                'title': 'Snackbar',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/snackbar'
+                            }
+                        ]
+                    },
+                    {
+                        'id'      : 'data-table',
+                        'title'   : 'Data table',
+                        'type'    : 'group',
+                        'children': [
+                            {
+                                'id'   : 'table',
+                                'title': 'Table',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/data-table'
+                            },
+                            {
+                                'id'   : 'sort-header',
+                                'title': 'Sort header',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/sort-header'
+                            },
+                            {
+                                'id'   : 'paginator',
+                                'title': 'Paginator',
+                                'type' : 'item',
+                                'url'  : '/components/angular-material/paginator'
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                'id'   : 'cards',
+                'title': 'Cards',
+                'type' : 'item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/cards'
+            },
+            {
+                'id'   : 'countdown',
+                'title': 'Countdown',
+                'type' : 'item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/countdown'
+            },
+            {
+                'id'   : 'highlight',
+                'title': 'Highlight',
+                'type' : 'item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/highlight'
+            },
+            {
+                'id'   : 'material-color-picker',
+                'title': 'Material Color Picker',
+                'type' : 'item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/material-color-picker'
+            },
+            {
+                'id'   : 'multi-language',
+                'title': 'Multi Language',
+                'type' : 'item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/multi-language'
+            },
+            {
+                'id'   : 'navigation',
+                'title': 'Navigation',
+                'type' : 'item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/navigation'
+            },
+            {
+                'id'   : 'search-bar',
+                'title': 'Search Bar',
+                'type' : 'item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/search-bar'
+            },
+            {
+                'id'   : 'shortcuts',
+                'title': 'Shortcuts',
+                'type' : 'item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/shortcuts'
+            },
+            {
+                'id'   : 'widget',
+                'title': 'Widget',
+                'type' : 'item',
+                'icon' : 'settings_input_component',
+                'url'  : '/components/widget'
+            }
+        ]
+    },
+    {
+        'id'      : '3rd-party-components',
+        'title'   : '3rd Party components',
+        'type'    : 'group',
+        'icon'    : 'settings_input_component',
+        'children': [
+            {
+                'id'      : 'datatables',
+                'title'   : 'Datatables',
+                'type'    : 'collapse',
+                'icon'    : 'border_all',
+                'children': [
+                    {
+                        'id'   : 'ngxdatatable',
+                        'title': 'ngx-datatable',
+                        'type' : 'item',
+                        'url'  : '/components-third-party/datatables/ngx-datatable'
+                    }
+                ]
+            },
+            {
+                'id'   : 'google-maps',
+                'title': 'Google Maps',
+                'type' : 'item',
+                'icon' : 'place',
+                'url'  : '/components-third-party/google-maps'
+            }
+        ]
+    }
+];