Added a way of accessing and updating nav items

+ Added an ability to add custom functions to the nav items

src/app/core/components/navigation/horizontal/nav-item/nav-horizontal-item.component.html

@@ -1,6 +1,17 @@
-<a class="nav-link" matRipple
+<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
-   [routerLink]="[item.url]" routerLinkActive="active">
     <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
     <span class="nav-link-title">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
-</a>
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</a>
+
+<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+    <span class="nav-link-title">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</span>

src/app/core/components/navigation/navigation.service.ts

@@ -19,6 +19,7 @@ export class FuseNavigationService
 
     /**
      * Get navigation model
+     *
      * @returns {any[]}
      */
     getNavigationModel()
@@ -28,15 +29,125 @@ export class FuseNavigationService
 
     /**
      * 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

src/app/core/components/navigation/vertical/nav-item/nav-vertical-item.component.html

@@ -1,6 +1,17 @@
-<a class="nav-link" matRipple
+<a class="nav-link" *ngIf="item.url" [routerLink]="[item.url]" routerLinkActive="active" matRipple>
-   [routerLink]="[item.url]" routerLinkActive="active">
     <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
     <span class="nav-link-title">{{item.title}}</span>
-    <span class="nav-link-badge" *ngIf="item.badge" [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">{{item.badge.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
 </a>
+
+<span class="nav-link" *ngIf="item.function" (click)="item.function()" matRipple>
+    <mat-icon class="nav-link-icon" *ngIf="item.icon">{{item.icon}}</mat-icon>
+    <span class="nav-link-title">{{item.title}}</span>
+    <span class="nav-link-badge" *ngIf="item.badge"
+          [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
+        {{item.badge.title}}
+    </span>
+</span>

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

@@ -21,13 +21,6 @@
             navigation.
         </p>
 
-        <!--<div class="my-48">
-            <h2>Sample</h2>
-            <p fxLayout="row" fxLayoutAlign="start start">
-                <fuse-navigation></fuse-navigation>
-            </p>
-        </div>-->
-
         <div class="my-48">
             <h2>Usage</h2>
             <p class="mat-grey-200-bg py-8">
@@ -55,15 +48,15 @@
                 <fuse-hljs lang="json" class="source-code">
                     <textarea #source hidden="hidden">
                         {
-                            'title': 'COMPONENTS',
+                        'title': 'COMPONENTS',
-                            'type' : 'group',
+                        'type' : 'group',
-                            'children': [
+                        'children': [
-                                {
+                        {
-                                    'title': 'ngx-datatable',
+                        'title': 'ngx-datatable',
-                                    'type' : 'item',
+                        'type' : 'item',
-                                    'url'  : '/components/datatables/ngx-datatable'
+                        'url' : '/components/datatables/ngx-datatable'
-                                }
+                        }
-                            ]
+                        ]
                         },
                     </textarea>
                 </fuse-hljs>
@@ -76,16 +69,16 @@
                 <fuse-hljs lang="json" class="source-code">
                     <textarea #source hidden="hidden">
                         {
-                            'title'   : 'Datatables',
+                        'title' : 'Datatables',
-                            'type'    : 'collapse',
+                        'type' : 'collapse',
-                            'icon'    : 'border_all',
+                        'icon' : 'border_all',
-                            'children': [
+                        'children': [
-                                {
+                        {
-                                    'title': 'ngx-datatable',
+                        'title': 'ngx-datatable',
-                                    'type' : 'nav-item',
+                        'type' : 'nav-item',
-                                    'url'  : '/components/datatables/ngx-datatable'
+                        'url' : '/components/datatables/ngx-datatable'
-                                }
+                        }
-                            ]
+                        ]
                         },
                     </textarea>
                 </fuse-hljs>
@@ -98,16 +91,113 @@
                 <fuse-hljs lang="json" class="source-code">
                     <textarea #source hidden="hidden">
                         {
-                            'title': 'Countdown',
+                        'title': 'Countdown',
-                            'type' : 'item',
+                        'type' : 'item',
-                            'icon' : 'settings_input_component',
+                        'icon' : 'settings_input_component',
-                            'url'  : '/components/countdown'
+                        'url' : '/components/countdown'
                         },
                     </textarea>
                 </fuse-hljs>
             </p>
         </div>
 
+        <div class="my-48">
+
+            <h2>Examples</h2>
+
+            <h4>Update navigation item on-the-fly</h4>
+
+            <p class="mat-grey-200-bg py-8">
+                <fuse-hljs lang="ts" class="source-code">
+                    <textarea #source hidden="hidden">
+                        updateMailBadge()
+                        {
+                            // Get the mail nav item
+                            const mailNavItem = this.navigationService.getNavigationItem('applications.mail');
+
+                            // Update the badge title
+                            mailNavItem.badge.title = 35;
+                        }
+                    </textarea>
+                </fuse-hljs>
+            </p>
+
+            <div class="mt-24 mb-64">
+
+                <button mat-button mat-raised-button color="accent" (click)="updateMailBadge()">
+                    Update Mail app badge
+                </button>
+
+            </div>
+
+            <h4>Add a subitem to the Calendar nav item</h4>
+
+            <p class="mat-grey-200-bg py-8">
+                <fuse-hljs lang="ts" class="source-code">
+                    <textarea #source hidden="hidden">
+                        addSubitemToCalendar()
+                        {
+                            // Prepare the new nav item
+                            const newNavItem = {
+                                id   : 'sub-item',
+                                title: 'Sub Item',
+                                type : 'item',
+                                url  : '/apps/calendar'
+                            };
+
+                            // Add the new nav item
+                            this.navigationService.addNavigationItem('applications.calendar', newNavItem);
+                        }
+                    </textarea>
+                </fuse-hljs>
+            </p>
+
+            <div class="mt-24 mb-64">
+
+                <button mat-button mat-raised-button color="accent" (click)="addSubitemToCalendar()">
+                    Add a subitem to the Calendar nav item
+                </button>
+
+            </div>
+
+            <h4>Add a nav item with custom function</h4>
+
+            <p class="mat-grey-200-bg py-8">
+                <fuse-hljs lang="ts" class="source-code">
+                    <textarea #source hidden="hidden">
+                        addNavItemWithCustomFunction()
+                        {
+                            // Prepare the new nav item
+                            const newNavItem = {
+                                id      : 'custom-item',
+                                title   : 'Custom Item',
+                                type    : 'item',
+                                function: () => {
+                                    alert('Custom function!');
+                                }
+                            };
+
+                            // Get the applications nav item
+                            const applicationsNavItem = this.navigationService.getNavigationItem('applications');
+
+                            // Add the new nav item at the beginning of the applications
+                            applicationsNavItem.children.unshift(newNavItem);
+                        }
+                    </textarea>
+                </fuse-hljs>
+            </p>
+
+            <div class="mt-24">
+
+                <button mat-button mat-raised-button color="accent" (click)="addNavItemWithCustomFunction()">
+                    Add a nav item with custom function
+                </button>
+
+            </div>
+
+        </div>
+
+
     </div>
 
 </div>

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

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { FuseNavigationService } from '../../../../core/components/navigation/navigation.service';
 
 @Component({
     selector   : 'fuse-navigation-docs',
@@ -7,8 +8,50 @@ import { Component } from '@angular/core';
 })
 export class FuseNavigationDocsComponent
 {
-    constructor()
+    constructor(private navigationService: FuseNavigationService)
     {
 
     }
+
+    updateMailBadge()
+    {
+        // Get the mail nav item
+        const mailNavItem = this.navigationService.getNavigationItem('applications.mail');
+
+        // Update the badge title
+        mailNavItem.badge.title = 35;
+    }
+
+    addSubitemToCalendar()
+    {
+        // Prepare the new nav item
+        const newNavItem = {
+            id   : 'sub-item',
+            title: 'Sub Item',
+            type : 'item',
+            url  : '/apps/calendar'
+        };
+
+        // Add the new nav item
+        this.navigationService.addNavigationItem('applications.calendar', newNavItem);
+    }
+
+    addNavItemWithCustomFunction()
+    {
+        // Prepare the new nav item
+        const newNavItem = {
+            id      : 'custom-item',
+            title   : 'Custom Item',
+            type    : 'item',
+            function: () => {
+                alert('Custom function!');
+            }
+        };
+
+        // Get the applications nav item
+        const applicationsNavItem = this.navigationService.getNavigationItem('applications');
+
+        // Add the new nav item at the beginning of the applications
+        applicationsNavItem.children.unshift(newNavItem);
+    }
 }

src/app/navigation.model.ts

@@ -6,29 +6,34 @@ export class NavigationModel
     {
         this.model = [
             {
+                'id'      : 'applications',
                 'title'   : 'Applications',
                 'type'    : 'group',
                 'icon'    : 'apps',
                 'children': [
                     {
+                        'id'      : 'dashboards',
                         'title'   : 'Dashboards',
                         'type'    : 'collapse',
                         'icon'    : 'dashboard',
                         'children': [
                             {
-                                'type' : 'item',
+                                'id'   : 'project',
                                 'title': 'Project',
+                                'type' : 'item',
                                 'url'  : '/apps/dashboards/project'
                             }
                         ]
                     },
                     {
+                        'id'   : 'calendar',
                         'title': 'Calendar',
                         'type' : 'item',
                         'icon' : 'today',
                         'url'  : '/apps/calendar'
                     },
                     {
+                        'id'   : 'mail',
                         'title': 'Mail',
                         'type' : 'item',
                         'icon' : 'email',
@@ -40,6 +45,7 @@ export class NavigationModel
                         }
                     },
                     {
+                        'id'   : 'chat',
                         'title': 'Chat',
                         'type' : 'item',
                         'icon' : 'chat',
@@ -51,18 +57,21 @@ export class NavigationModel
                         }
                     },
                     {
+                        'id'   : 'file-manager',
                         'title': 'File Manager',
                         'type' : 'item',
                         'icon' : 'folder',
                         'url'  : '/apps/file-manager'
                     },
                     {
+                        'id'   : 'contacts',
                         'title': 'Contacts',
                         'type' : 'item',
                         'icon' : 'account_box',
                         'url'  : '/apps/contacts'
                     },
                     {
+                        'id'   : 'to-do',
                         'title': 'To-Do',
                         'type' : 'item',
                         'icon' : 'check_box',
@@ -74,6 +83,7 @@ export class NavigationModel
                         }
                     },
                     {
+                        'id'   : 'scrumboard',
                         'title': 'Scrumboard',
                         'type' : 'item',
                         'icon' : 'assessment',
@@ -82,61 +92,73 @@ export class NavigationModel
                 ]
             },
             {
+                'id'      : 'pages',
                 'title'   : 'Pages',
                 'type'    : 'group',
                 'icon'    : 'pages',
                 'children': [
                     {
+                        'id'      : 'authentication',
                         'title'   : 'Authentication',
                         'type'    : 'collapse',
                         'icon'    : 'lock',
                         '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'
@@ -144,22 +166,26 @@ export class NavigationModel
                         ]
                     },
                     {
+                        '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'
@@ -167,16 +193,19 @@ export class NavigationModel
                         ]
                     },
                     {
+                        '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'
@@ -184,27 +213,32 @@ export class NavigationModel
                         ]
                     },
                     {
+                        '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'
@@ -212,12 +246,14 @@ export class NavigationModel
                         ]
                     },
                     {
+                        'id'   : 'profile',
                         'title': 'Profile',
                         'type' : 'item',
                         'icon' : 'person',
                         'url'  : '/pages/profile'
                     },
                     {
+                        'id'   : 'search',
                         'title': 'Search',
                         'type' : 'item',
                         'icon' : 'search',
@@ -226,69 +262,82 @@ export class NavigationModel
                 ]
             },
             {
+                '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',
                                 '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-2',
                                         'title': 'Left Sidenav 2',
                                         'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/left-sidenav-2'
                                     },
                                     {
+                                        'id'   : 'right-sidenav',
                                         'title': 'Right Sidenav',
                                         'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/right-sidenav'
                                     },
                                     {
+                                        'id'   : 'right-sidenav-2',
                                         'title': 'Right Sidenav 2',
                                         'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/right-sidenav-2'
@@ -296,45 +345,54 @@ export class NavigationModel
                                 ]
                             },
                             {
+                                'id'      : 'simple',
                                 'title'   : 'Simple',
                                 'type'    : 'collapse',
                                 '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'
@@ -342,6 +400,7 @@ export class NavigationModel
                                 ]
                             },
                             {
+                                'id'   : 'blank',
                                 'title': 'Blank',
                                 'type' : 'item',
                                 'url'  : '/ui/page-layouts/blank'
@@ -349,6 +408,7 @@ export class NavigationModel
                         ]
                     },
                     {
+                        'id'   : 'colors',
                         'title': 'Colors',
                         'type' : 'item',
                         'icon' : 'color_lens',
@@ -357,17 +417,20 @@ export class NavigationModel
                 ]
             },
             {
+                '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',
@@ -376,60 +439,72 @@ export class NavigationModel
                 ]
             },
             {
+                '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'
@@ -437,20 +512,24 @@ export class NavigationModel
                                 ]
                             },
                             {
+                                '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'
@@ -458,35 +537,42 @@ export class NavigationModel
                                 ]
                             },
                             {
+                                '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'   : 'expansion-panel',
                                         'title': 'Expansion Panel',
                                         'type' : 'item',
                                         'url'  : '/components/angular-material/expansion-panel'
@@ -494,35 +580,42 @@ export class NavigationModel
                                 ]
                             },
                             {
+                                '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'
@@ -530,20 +623,24 @@ export class NavigationModel
                                 ]
                             },
                             {
+                                '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'
@@ -551,20 +648,24 @@ export class NavigationModel
                                 ]
                             },
                             {
+                                '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'
@@ -574,42 +675,49 @@ export class NavigationModel
                         ]
                     },
                     {
+                        'id'   : 'countdown',
                         'title': 'Countdown',
                         'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/countdown'
                     },
                     {
+                        'id'   : 'highlightjs',
                         'title': 'Highlight.js',
                         'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/highlightjs'
                     },
                     {
+                        'id'   : 'material-color-picker',
                         'title': 'Material Color Picker',
                         'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/material-color-picker'
                     },
                     {
+                        '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',
@@ -618,16 +726,19 @@ export class NavigationModel
                 ]
             },
             {
+                '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'
@@ -635,6 +746,7 @@ export class NavigationModel
                         ]
                     },
                     {
+                        'id'   : 'google-maps',
                         'title': 'Google Maps',
                         'type' : 'item',
                         'icon' : 'place',