From b9198e3717f74e01cb6f6ab78e5482c643179003 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Thu, 21 Sep 2017 12:08:52 +0300
Subject: [PATCH] Entirely changed the navigation model structure (sorry!) +
 Fixed: Horizontal and Vertical navigation must be able to use the same model
 structure + Fixed: Collapsable nav item that has the active menu shouldn't be
 collapsed when other collapsables toggles

---
 .../nav-horizontal-collapse.component.html    |   5 +-
 .../navigation/navigation.component.html      |  21 +-
 .../navigation/navigation.component.ts        |   6 +-
 .../navigation/navigation.module.ts           |   4 +-
 .../navigation/navigation.service.ts          |  14 +-
 .../nav-vertical-collapse.component.html      |   4 +-
 .../nav-vertical-collapse.component.ts        |  12 +-
 .../nav-vertical-group.component.html         |  10 +
 .../nav-vertical-group.component.scss         |  23 +
 .../nav-group/nav-vertical-group.component.ts |  21 +
 .../nav-vertical-subheader.component.html     |   1 -
 .../nav-vertical-subheader.component.scss     |  20 -
 .../nav-vertical-subheader.component.ts       |  21 -
 src/app/core/scss/partials/_navigation.scss   |  40 ++
 src/app/navigation.model.ts                   | 557 +++---------------
 15 files changed, 215 insertions(+), 544 deletions(-)
 create mode 100644 src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html
 create mode 100644 src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss
 create mode 100644 src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
 delete mode 100644 src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.html
 delete mode 100644 src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.scss
 delete mode 100644 src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.ts

diff --git a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
index 045e077d..4f061e79 100644
--- a/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
+++ b/src/app/core/components/navigation/horizontal/nav-collapse/nav-horizontal-collapse.component.html
@@ -9,9 +9,8 @@
     <div class="{{fuseSettings.colorClasses.navbar}}">
 
         <ng-container *ngFor="let item of item.children">
-            <fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
-            <fuse-nav-horizontal-collapse *ngIf="item.type=='nav-collapse'"
-                                          [item]="item"></fuse-nav-horizontal-collapse>
+            <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
+            <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
         </ng-container>
 
     </div>
diff --git a/src/app/core/components/navigation/navigation.component.html b/src/app/core/components/navigation/navigation.component.html
index 12b31aff..d2cb94b2 100644
--- a/src/app/core/components/navigation/navigation.component.html
+++ b/src/app/core/components/navigation/navigation.component.html
@@ -1,27 +1,32 @@
-<div id="main-navigation" class="nav" [ngClass]="{'horizontal':layout === 'horizontal'}">
+<div id="main-navigation" class="nav"
+     [ngClass]="{'horizontal':layout === 'horizontal', 'vertical':layout === 'vertical'}">
 
+    <!-- Vertical Navigation Layout -->
     <ng-container *ngIf="layout === 'vertical'">
 
-        <ng-container *ngFor="let item of verticalNavigation">
+        <ng-container *ngFor="let item of navigationModel">
 
-            <fuse-nav-vertical-subheader *ngIf="item.type=='subheader'" [item]="item"></fuse-nav-vertical-subheader>
-            <fuse-nav-vertical-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-vertical-item>
-            <fuse-nav-vertical-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-vertical-collapse>
+            <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>
+            <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
 
         </ng-container>
 
     </ng-container>
+    <!-- / Vertical Navigation Layout -->
 
+    <!-- Horizontal Navigation Layout -->
     <ng-container *ngIf="layout === 'horizontal'">
 
-        <ng-container *ngFor="let item of horizontalNavigation">
+        <ng-container *ngFor="let item of navigationModel">
 
+            <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>
             <fuse-nav-horizontal-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-horizontal-item>
-            <fuse-nav-horizontal-collapse *ngIf="item.type=='nav-collapse'"
-                                          [item]="item"></fuse-nav-horizontal-collapse>
 
         </ng-container>
 
     </ng-container>
+    <!-- / Horizontal Navigation Layout -->
 
 </div>
diff --git a/src/app/core/components/navigation/navigation.component.ts b/src/app/core/components/navigation/navigation.component.ts
index 02da575c..20f71ab7 100644
--- a/src/app/core/components/navigation/navigation.component.ts
+++ b/src/app/core/components/navigation/navigation.component.ts
@@ -9,15 +9,13 @@ import { FuseNavigationService } from './navigation.service';
 })
 export class FuseNavigationComponent
 {
-    verticalNavigation: any[];
-    horizontalNavigation: any[];
+    navigationModel: any[];
 
     @Input('layout') layout = 'vertical';
 
     constructor(private navigationService: FuseNavigationService)
     {
-        this.verticalNavigation = navigationService.getNavigation('verticalNavItems');
-        this.horizontalNavigation = navigationService.getNavigation('horizontalNavItems');
+        this.navigationModel = navigationService.getNavigationModel();
     }
 
 }
diff --git a/src/app/core/components/navigation/navigation.module.ts b/src/app/core/components/navigation/navigation.module.ts
index 9f0bd0bf..42e680cd 100644
--- a/src/app/core/components/navigation/navigation.module.ts
+++ b/src/app/core/components/navigation/navigation.module.ts
@@ -4,7 +4,7 @@ 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';
-import { FuseNavVerticalSubheaderComponent } from './vertical/nav-subheader/nav-vertical-subheader.component';
+import { FuseNavVerticalGroupComponent } from './vertical/nav-group/nav-vertical-group.component';
 import { FuseNavHorizontalItemComponent } from './horizontal/nav-item/nav-horizontal-item.component';
 import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/nav-horizontal-collapse.component';
 
@@ -18,7 +18,7 @@ import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/na
     ],
     declarations: [
         FuseNavigationComponent,
-        FuseNavVerticalSubheaderComponent,
+        FuseNavVerticalGroupComponent,
         FuseNavVerticalItemComponent,
         FuseNavVerticalCollapseComponent,
         FuseNavHorizontalItemComponent,
diff --git a/src/app/core/components/navigation/navigation.service.ts b/src/app/core/components/navigation/navigation.service.ts
index 8e71d2e0..4f9b6cc7 100644
--- a/src/app/core/components/navigation/navigation.service.ts
+++ b/src/app/core/components/navigation/navigation.service.ts
@@ -1,25 +1,25 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import { FuseNavigation } from '../../../navigation.model';
+import { NavigationModel } from '../../../navigation.model';
 
 @Injectable()
 export class FuseNavigationService
 {
     onNavCollapseToggled = new EventEmitter<any>();
-    navigation: FuseNavigation;
+    navigationModel: NavigationModel;
     flatNavigation: any[] = [];
 
     constructor()
     {
-        this.navigation = new FuseNavigation();
+        this.navigationModel = new NavigationModel();
     }
 
     /**
-     * Get navigation array
+     * Get navigation model
      * @returns {any[]}
      */
-    getNavigation(item)
+    getNavigationModel()
     {
-        return this.navigation[item];
+        return this.navigationModel.model;
     }
 
     /**
@@ -31,7 +31,7 @@ export class FuseNavigationService
     {
         if ( !navigationItems )
         {
-            navigationItems = this.navigation;
+            navigationItems = this.navigationModel;
         }
 
         for ( const navItem of navigationItems )
diff --git a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
index ce5449a3..2c3e9647 100644
--- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
+++ b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.html
@@ -5,7 +5,7 @@
 </a>
 <div class="children" [@slideInOut]="isOpen">
     <ng-container *ngFor="let item of item.children">
-        <fuse-nav-vertical-item *ngIf="item.type=='nav-item'" [item]="item"></fuse-nav-vertical-item>
-        <fuse-nav-vertical-collapse *ngIf="item.type=='nav-collapse'" [item]="item"></fuse-nav-vertical-collapse>
+        <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
+        <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
     </ng-container>
 </div>
diff --git a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
index a32e0c9a..6abcc630 100644
--- a/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
+++ b/src/app/core/components/navigation/vertical/nav-collapse/nav-vertical-collapse.component.ts
@@ -15,7 +15,10 @@ export class FuseNavVerticalCollapseComponent implements OnInit
     @HostBinding('class') classes = 'nav-collapse nav-item';
     @HostBinding('class.open') public isOpen = false;
 
-    constructor(private navigationService: FuseNavigationService, private router: Router)
+    constructor(
+        private navigationService: FuseNavigationService,
+        private router: Router
+    )
     {
         // Listen for route changes
         router.events.subscribe(
@@ -49,6 +52,13 @@ export class FuseNavVerticalCollapseComponent implements OnInit
                             return;
                         }
 
+                        // Check if the url can be found in
+                        // one of the children of this item
+                        if ( this.isUrlInChildren(this.item, this.router.url) )
+                        {
+                            return;
+                        }
+
                         // If the clicked item is not this item, collapse...
                         if ( this.item !== clickedItem )
                         {
diff --git a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html
new file mode 100644
index 00000000..3fd40abf
--- /dev/null
+++ b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.html
@@ -0,0 +1,10 @@
+<div class="group-title">
+    <span class="hint-text">{{ item.title }}</span>
+</div>
+<div class="group-items">
+    <ng-container *ngFor="let item of item.children">
+        <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>
+        <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
+    </ng-container>
+</div>
\ No newline at end of file
diff --git a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss
new file mode 100644
index 00000000..7021a70f
--- /dev/null
+++ b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.scss
@@ -0,0 +1,23 @@
+:host {
+
+    .folded:not(.folded-open) & {
+
+        > .group-title {
+            align-items: center;
+
+            > span {
+                opacity: 0;
+                transition: opacity 200ms ease;
+            }
+
+            &:before {
+                content: '';
+                display: block;
+                position: absolute;
+                min-width: 1.6rem;
+                border-top: 2px solid;
+                opacity: 0.2;
+            }
+        }
+    }
+}
diff --git a/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
new file mode 100644
index 00000000..f429b5d1
--- /dev/null
+++ b/src/app/core/components/navigation/vertical/nav-group/nav-vertical-group.component.ts
@@ -0,0 +1,21 @@
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
+
+@Component({
+    selector   : 'fuse-nav-vertical-group',
+    templateUrl: './nav-vertical-group.component.html',
+    styleUrls  : ['./nav-vertical-group.component.scss']
+})
+export class FuseNavVerticalGroupComponent implements OnInit
+{
+    @HostBinding('class') classes = 'nav-group';
+    @Input() item: any;
+
+    constructor()
+    {
+    }
+
+    ngOnInit()
+    {
+    }
+
+}
diff --git a/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.html b/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.html
deleted file mode 100644
index 208267c6..00000000
--- a/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<span class="hint-text">{{ item.title }}</span>
diff --git a/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.scss b/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.scss
deleted file mode 100644
index 53ab5b7f..00000000
--- a/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-
-:host {
-
-    .folded:not(.folded-open) & {
-
-        &:before {
-            content: '';
-            display: block;
-            position: absolute;
-            min-width: 1.6rem;
-            border-top: 2px solid;
-            opacity: 0.2;
-        }
-
-        > span {
-            opacity: 0;
-            transition: opacity 200ms ease;
-        }
-    }
-}
diff --git a/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.ts b/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.ts
deleted file mode 100644
index 72a00643..00000000
--- a/src/app/core/components/navigation/vertical/nav-subheader/nav-vertical-subheader.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component, HostBinding, Input, OnInit } from '@angular/core';
-
-@Component({
-    selector   : 'fuse-nav-vertical-subheader',
-    templateUrl: './nav-vertical-subheader.component.html',
-    styleUrls  : ['./nav-vertical-subheader.component.scss']
-})
-export class FuseNavVerticalSubheaderComponent implements OnInit
-{
-    @HostBinding('class') classes = 'nav-subheader';
-    @Input() item: any;
-
-    constructor()
-    {
-    }
-
-    ngOnInit()
-    {
-    }
-
-}
diff --git a/src/app/core/scss/partials/_navigation.scss b/src/app/core/scss/partials/_navigation.scss
index f003e88e..0c8e8607 100644
--- a/src/app/core/scss/partials/_navigation.scss
+++ b/src/app/core/scss/partials/_navigation.scss
@@ -11,6 +11,21 @@
         white-space: nowrap;
     }
 
+    .nav-group {
+
+        > .group-title {
+            position: relative;
+            display: flex;
+            align-items: center;
+            height: 48px;
+            font-weight: 500;
+            padding-left: 24px;
+            margin-top: 8px;
+            font-size: 12px;
+            white-space: nowrap;
+        }
+    }
+
     .nav-item {
 
         .nav-link {
@@ -119,6 +134,31 @@
         }
     }
 
+    > .nav-group {
+
+        > .group-items {
+
+            > .nav-collapse {
+                background: transparent;
+                transition: background 200ms ease-in-out;
+
+                &.open {
+                    background: rgba(0, 0, 0, 0.12);
+                }
+            }
+        }
+    }
+
+    &.vertical {
+
+        .nav-group {
+
+            .group-title {
+                text-transform: uppercase;
+            }
+        }
+    }
+
     &.horizontal {
         display: flex;
         flex-direction: row;
diff --git a/src/app/navigation.model.ts b/src/app/navigation.model.ts
index 25a1920e..260f00e9 100644
--- a/src/app/navigation.model.ts
+++ b/src/app/navigation.model.ts
@@ -1,415 +1,22 @@
-export class FuseNavigation
+export class NavigationModel
 {
-    public verticalNavItems: any[];
-    public horizontalNavItems: any[];
+    model: any[];
 
     constructor()
     {
-        this.verticalNavItems = [
-            {
-                'title': 'APPS',
-                'type' : 'subheader'
-            },
-            {
-                'title'   : 'Dashboards',
-                'type'    : 'nav-collapse',
-                'icon'    : 'dashboard',
-                'children': [
-                    {
-                        'type' : 'nav-item',
-                        'title': 'Project',
-                        'url'  : '/apps/dashboards/project'
-                    }
-                ]
-            },
-            {
-                'title': 'Calendar',
-                'type' : 'nav-item',
-                'icon' : 'today',
-                'url'  : '/apps/calendar'
-            },
-            {
-                'title': 'Mail',
-                'type' : 'nav-item',
-                'icon' : 'email',
-                'url'  : '/apps/mail',
-                'badge': {
-                    'title': 25,
-                    'bg'   : '#F44336',
-                    'fg'   : '#FFFFFF'
-                }
-            },
-            {
-                'title': 'Chat',
-                'type' : 'nav-item',
-                'icon' : 'chat',
-                'url'  : '/apps/chat',
-                'badge': {
-                    'title': 13,
-                    'bg'   : '#09d261',
-                    'fg'   : '#FFFFFF'
-                }
-            },
-            {
-                'title': 'File Manager',
-                'type' : 'nav-item',
-                'icon' : 'folder',
-                'url'  : '/apps/file-manager'
-            },
-            {
-                'title': 'Contacts',
-                'type' : 'nav-item',
-                'icon' : 'account_box',
-                'url'  : '/apps/contacts'
-            },
-            {
-                'title': 'To-Do',
-                'type' : 'nav-item',
-                'icon' : 'check_box',
-                'url'  : '/apps/todo',
-                'badge': {
-                    'title': 3,
-                    'bg'   : '#FF6F00',
-                    'fg'   : '#FFFFFF'
-                }
-            },
-            {
-                'title': 'Scrumboard',
-                'type' : 'nav-item',
-                'icon' : 'assessment',
-                'url'  : '/apps/scrumboard'
-            },
-            {
-                'title': 'PAGES',
-                'type' : 'subheader'
-            },
-            {
-                'title'   : 'Authentication',
-                'type'    : 'nav-collapse',
-                'icon'    : 'lock',
-                'children': [
-                    {
-                        'title': 'Login',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/auth/login'
-                    },
-                    {
-                        'title': 'Login v2',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/auth/login-2'
-                    },
-                    {
-                        'title': 'Register',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/auth/register'
-                    },
-                    {
-                        'title': 'Register v2',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/auth/register-2'
-                    },
-                    {
-                        'title': 'Forgot Password',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/auth/forgot-password'
-                    },
-                    {
-                        'title': 'Reset Password',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/auth/reset-password'
-                    },
-                    {
-                        'title': 'Lock Screen',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/auth/lock'
-                    }
-                ]
-            },
-            {
-                'title': 'Coming Soon',
-                'type' : 'nav-item',
-                'icon' : 'alarm',
-                'url'  : '/pages/coming-soon'
-            },
-            {
-                'title'   : 'Errors',
-                'type'    : 'nav-collapse',
-                'icon'    : 'error',
-                'children': [
-                    {
-                        'title': '404',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/errors/error-404'
-                    },
-                    {
-                        'title': '500',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/errors/error-500'
-                    }
-                ]
-            },
-            {
-                'title'   : 'Invoice',
-                'type'    : 'nav-collapse',
-                'icon'    : 'receipt',
-                'children': [
-                    {
-                        'title': 'Modern',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/invoices/modern'
-                    },
-                    {
-                        'title': 'Compact',
-                        'type' : 'nav-item',
-                        'url'  : '/pages/invoices/compact'
-                    }
-                ]
-            },
-            {
-                'title': 'Maintenance',
-                'type' : 'nav-item',
-                'icon' : 'build',
-                'url'  : '/pages/maintenance'
-            },
-            {
-                'title': 'Profile',
-                'type' : 'nav-item',
-                'icon' : 'person',
-                'url'  : '/pages/profile'
-            },
-            {
-                'title': 'Search',
-                'type' : 'nav-item',
-                'icon' : 'search',
-                'url'  : '/pages/search'
-            },
-            {
-                'title': 'USER INTERFACE',
-                'type' : 'subheader'
-            },
-            {
-                'title': 'Forms',
-                'type' : 'nav-item',
-                'icon' : 'web_asset',
-                'url'  : '/ui/forms'
-            },
-            {
-                'title': 'Icons',
-                'type' : 'nav-item',
-                'icon' : 'photo',
-                'url'  : '/ui/icons'
-            },
-            {
-                'title': 'Typography',
-                'type' : 'nav-item',
-                'icon' : 'text_fields',
-                'url'  : '/ui/typography'
-            },
-            {
-                'title': 'Helper Classes',
-                'type' : 'nav-item',
-                'icon' : 'help',
-                'url'  : '/ui/helper-classes'
-            },
-            {
-                'title'   : 'Page Layouts',
-                'type'    : 'nav-collapse',
-                'icon'    : 'view_quilt',
-                'children': [
-                    {
-                        'title'   : 'Carded',
-                        'type'    : 'nav-collapse',
-                        'children': [
-                            {
-                                'title': 'Full Width',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/carded/full-width'
-                            },
-                            {
-                                'title': 'Full Width 2',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/carded/full-width-2'
-                            },
-                            {
-                                'title': 'Left Sidenav',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/carded/left-sidenav'
-                            },
-                            {
-                                'title': 'Left Sidenav 2',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/carded/left-sidenav-2'
-                            },
-                            {
-                                'title': 'Right Sidenav',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/carded/right-sidenav'
-                            },
-                            {
-                                'title': 'Right Sidenav 2',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/carded/right-sidenav-2'
-                            }
-                        ]
-                    },
-                    {
-                        'title'   : 'Simple',
-                        'type'    : 'nav-collapse',
-                        'children': [
-                            {
-                                'title': 'Full Width',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/full-width'
-                            },
-                            {
-                                'title': 'Left Sidenav',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/left-sidenav'
-                            },
-                            {
-                                'title': 'Left Sidenav 2',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/left-sidenav-2'
-                            },
-                            {
-                                'title': 'Left Sidenav 3',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/left-sidenav-3'
-                            },
-                            {
-                                'title': 'Right Sidenav',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/right-sidenav'
-                            },
-                            {
-                                'title': 'Right Sidenav 2',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/right-sidenav-2'
-                            },
-                            {
-                                'title': 'Right Sidenav 3',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/right-sidenav-3'
-                            },
-                            {
-                                'title': 'Tabbed',
-                                'type' : 'nav-item',
-                                'url'  : '/ui/page-layouts/simple/tabbed'
-                            }
-                        ]
-                    },
-                    {
-                        'title': 'Blank',
-                        'type' : 'nav-item',
-                        'url'  : '/ui/page-layouts/blank'
-                    }
-                ]
-            },
-            {
-                'title': 'Colors',
-                'type' : 'nav-item',
-                'icon' : 'color_lens',
-                'url'  : '/ui/colors'
-            },
-            {
-                'title': 'SERVICES',
-                'type' : 'subheader'
-            },
-            {
-                'title': 'Config',
-                'type' : 'nav-item',
-                'icon' : 'settings',
-                'url'  : '/services/config'
-            },
-            {
-                'title': 'Splash Screen',
-                'type' : 'nav-item',
-                'icon' : 'settings',
-                'url'  : '/services/splash-screen'
-            },
-            {
-                'title': 'COMPONENTS',
-                'type' : 'subheader'
-            },
-            {
-                'title': 'Countdown',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/countdown'
-            },
-            {
-                'title': 'Highlight.js',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/highlightjs'
-            },
-            {
-                'title': 'Material Color Picker',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/material-color-picker'
-            },
-            {
-                'title': 'Navigation',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/navigation'
-            },
-            {
-                'title': 'Price Tables',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/price-tables'
-            },
-            {
-                'title': 'Search Bar',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/search-bar'
-            },
-            {
-                'title': 'Shortcuts',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/shortcuts'
-            },
-            {
-                'title': 'Widget',
-                'type' : 'nav-item',
-                'icon' : 'settings_input_component',
-                'url'  : '/components/widget'
-            },
-            {
-                'title': '3RD PARTY COMPONENTS',
-                'type' : 'subheader'
-            },
-            {
-                'title'   : 'Datatables',
-                'type'    : 'nav-collapse',
-                'icon'    : 'border_all',
-                'children': [
-                    {
-                        'title': 'ngx-datatable',
-                        'type' : 'nav-item',
-                        'url'  : '/components-third-party/datatables/ngx-datatable'
-                    }
-                ]
-            }
-        ];
-
-        this.horizontalNavItems = [
+        this.model = [
             {
                 'title'   : 'Applications',
+                'type'    : 'group',
                 'icon'    : 'apps',
-                'type'    : 'nav-collapse',
                 'children': [
                     {
                         'title'   : 'Dashboards',
-                        'type'    : 'nav-collapse',
+                        'type'    : 'collapse',
                         'icon'    : 'dashboard',
                         'children': [
                             {
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'title': 'Project',
                                 'url'  : '/apps/dashboards/project'
                             }
@@ -417,13 +24,13 @@ export class FuseNavigation
                     },
                     {
                         'title': 'Calendar',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'today',
                         'url'  : '/apps/calendar'
                     },
                     {
                         'title': 'Mail',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'email',
                         'url'  : '/apps/mail',
                         'badge': {
@@ -434,7 +41,7 @@ export class FuseNavigation
                     },
                     {
                         'title': 'Chat',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'chat',
                         'url'  : '/apps/chat',
                         'badge': {
@@ -445,19 +52,19 @@ export class FuseNavigation
                     },
                     {
                         'title': 'File Manager',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'folder',
                         'url'  : '/apps/file-manager'
                     },
                     {
                         'title': 'Contacts',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'account_box',
                         'url'  : '/apps/contacts'
                     },
                     {
                         'title': 'To-Do',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'check_box',
                         'url'  : '/apps/todo',
                         'badge': {
@@ -468,7 +75,7 @@ export class FuseNavigation
                     },
                     {
                         'title': 'Scrumboard',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'assessment',
                         'url'  : '/apps/scrumboard'
                     }
@@ -476,106 +83,106 @@ export class FuseNavigation
             },
             {
                 'title'   : 'Pages',
+                'type'    : 'group',
                 'icon'    : 'pages',
-                'type'    : 'nav-collapse',
                 'children': [
                     {
                         'title'   : 'Authentication',
-                        'type'    : 'nav-collapse',
+                        'type'    : 'collapse',
                         'icon'    : 'lock',
                         'children': [
                             {
                                 'title': 'Login',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/auth/login'
                             },
                             {
                                 'title': 'Login v2',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/auth/login-2'
                             },
                             {
                                 'title': 'Register',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/auth/register'
                             },
                             {
                                 'title': 'Register v2',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/auth/register-2'
                             },
                             {
                                 'title': 'Forgot Password',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/auth/forgot-password'
                             },
                             {
                                 'title': 'Reset Password',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/auth/reset-password'
                             },
                             {
                                 'title': 'Lock Screen',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/auth/lock'
                             }
                         ]
                     },
                     {
                         'title': 'Coming Soon',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'alarm',
                         'url'  : '/pages/coming-soon'
                     },
                     {
                         'title'   : 'Errors',
-                        'type'    : 'nav-collapse',
+                        'type'    : 'collapse',
                         'icon'    : 'error',
                         'children': [
                             {
                                 'title': '404',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/errors/error-404'
                             },
                             {
                                 'title': '500',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/errors/error-500'
                             }
                         ]
                     },
                     {
                         'title'   : 'Invoice',
-                        'type'    : 'nav-collapse',
+                        'type'    : 'collapse',
                         'icon'    : 'receipt',
                         'children': [
                             {
                                 'title': 'Modern',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/invoices/modern'
                             },
                             {
                                 'title': 'Compact',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/pages/invoices/compact'
                             }
                         ]
                     },
                     {
                         'title': 'Maintenance',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'build',
                         'url'  : '/pages/maintenance'
                     },
                     {
                         'title': 'Profile',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'person',
                         'url'  : '/pages/profile'
                     },
                     {
                         'title': 'Search',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'search',
                         'url'  : '/pages/search'
                     }
@@ -583,130 +190,130 @@ export class FuseNavigation
             },
             {
                 'title'   : 'User Interface',
+                'type'    : 'group',
                 'icon'    : 'web',
-                'type'    : 'nav-collapse',
                 'children': [
                     {
                         'title': 'Forms',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'web_asset',
                         'url'  : '/ui/forms'
                     },
                     {
                         'title': 'Icons',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'photo',
                         'url'  : '/ui/icons'
                     },
                     {
                         'title': 'Typography',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'text_fields',
                         'url'  : '/ui/typography'
                     },
                     {
                         'title': 'Helper Classes',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'help',
                         'url'  : '/ui/helper-classes'
                     },
                     {
                         'title'   : 'Page Layouts',
-                        'type'    : 'nav-collapse',
+                        'type'    : 'collapse',
                         'icon'    : 'view_quilt',
                         'children': [
                             {
                                 'title'   : 'Carded',
-                                'type'    : 'nav-collapse',
+                                'type'    : 'collapse',
                                 'children': [
                                     {
                                         'title': 'Full Width',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/full-width'
                                     },
                                     {
                                         'title': 'Full Width 2',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/full-width-2'
                                     },
                                     {
                                         'title': 'Left Sidenav',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/left-sidenav'
                                     },
                                     {
                                         'title': 'Left Sidenav 2',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/left-sidenav-2'
                                     },
                                     {
                                         'title': 'Right Sidenav',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/right-sidenav'
                                     },
                                     {
                                         'title': 'Right Sidenav 2',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/carded/right-sidenav-2'
                                     }
                                 ]
                             },
                             {
                                 'title'   : 'Simple',
-                                'type'    : 'nav-collapse',
+                                'type'    : 'collapse',
                                 'children': [
                                     {
                                         'title': 'Full Width',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/full-width'
                                     },
                                     {
                                         'title': 'Left Sidenav',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/left-sidenav'
                                     },
                                     {
                                         'title': 'Left Sidenav 2',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/left-sidenav-2'
                                     },
                                     {
                                         'title': 'Left Sidenav 3',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/left-sidenav-3'
                                     },
                                     {
                                         'title': 'Right Sidenav',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/right-sidenav'
                                     },
                                     {
                                         'title': 'Right Sidenav 2',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/right-sidenav-2'
                                     },
                                     {
                                         'title': 'Right Sidenav 3',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/right-sidenav-3'
                                     },
                                     {
                                         'title': 'Tabbed',
-                                        'type' : 'nav-item',
+                                        'type' : 'item',
                                         'url'  : '/ui/page-layouts/simple/tabbed'
                                     }
                                 ]
                             },
                             {
                                 'title': 'Blank',
-                                'type' : 'nav-item',
+                                'type' : 'item',
                                 'url'  : '/ui/page-layouts/blank'
                             }
                         ]
                     },
                     {
                         'title': 'Colors',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'color_lens',
                         'url'  : '/ui/colors'
                     }
@@ -714,18 +321,18 @@ export class FuseNavigation
             },
             {
                 'title'   : 'Services',
+                'type'    : 'group',
                 'icon'    : 'settings',
-                'type'    : 'nav-collapse',
                 'children': [
                     {
                         'title': 'Config',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings',
                         'url'  : '/services/config'
                     },
                     {
                         'title': 'Splash Screen',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings',
                         'url'  : '/services/splash-screen'
                     }
@@ -733,73 +340,73 @@ export class FuseNavigation
             },
             {
                 'title'   : 'Components',
+                'type'    : 'group',
                 'icon'    : 'settings_input_component',
-                'type'    : 'nav-collapse',
                 'children': [
                     {
                         'title': 'Countdown',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/countdown'
                     },
                     {
                         'title': 'Highlight.js',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/highlightjs'
                     },
                     {
                         'title': 'Material Color Picker',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/material-color-picker'
                     },
                     {
                         'title': 'Navigation',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/navigation'
                     },
                     {
                         'title': 'Price Tables',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/price-tables'
                     },
                     {
                         'title': 'Search Bar',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/search-bar'
                     },
                     {
                         'title': 'Shortcuts',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/shortcuts'
                     },
                     {
                         'title': 'Widget',
-                        'type' : 'nav-item',
+                        'type' : 'item',
                         'icon' : 'settings_input_component',
                         'url'  : '/components/widget'
-                    },
+                    }
+                ]
+            },
+            {
+                'title'   : '3rd Party components',
+                'type'    : 'group',
+                'icon'    : 'settings_input_component',
+                'children': [
                     {
-                        'title'   : '3rd Party components',
-                        'icon'    : 'settings_input_component',
-                        'type'    : 'nav-collapse',
+                        'title'   : 'Datatables',
+                        'type'    : 'collapse',
+                        'icon'    : 'border_all',
                         'children': [
                             {
-                                'title'   : 'Datatables',
-                                'type'    : 'nav-collapse',
-                                'icon'    : 'border_all',
-                                'children': [
-                                    {
-                                        'title': 'ngx-datatable',
-                                        'type' : 'nav-item',
-                                        'url'  : '/components-third-party/datatables/ngx-datatable'
-                                    }
-                                ]
+                                'title': 'ngx-datatable',
+                                'type' : 'item',
+                                'url'  : '/components-third-party/datatables/ngx-datatable'
                             }
                         ]
                     }