Renamed 'collapse' to 'collapsable' in navigation types

Renamed navigation component files
Small fix in shortcuts ('nav-item' to 'item')

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

@@ -31,18 +31,19 @@
               [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
             {{item.badge.title}}
         </span>
-        <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
+        <mat-icon class="collapsable-arrow">keyboard_arrow_right</mat-icon>
     </ng-template>
 
     <div class="children" [ngClass]="{'open': isOpen}">
 
-        <div class="{{fuseSettings.colorClasses.navbar}}">
+        <div class="{{fuseConfig.layout.navbar.background}}">
 
             <ng-container *ngFor="let item of item.children">
                 <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
-                <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'"
+                <fuse-nav-horizontal-collapsable *ngIf="item.type=='collapsable'"
-                                              [item]="item"></fuse-nav-horizontal-collapse>
+                                                 [item]="item"></fuse-nav-horizontal-collapsable>
-                <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
+                <fuse-nav-horizontal-collapsable *ngIf="item.type=='group'"
+                                                 [item]="item"></fuse-nav-horizontal-collapsable>
             </ng-container>
 
         </div>

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

@@ -6,18 +6,18 @@ import { fuseAnimations } from '@fuse/animations';
 import { FuseConfigService } from '@fuse/services/config.service';
 
 @Component({
-    selector   : 'fuse-nav-horizontal-collapse',
+    selector   : 'fuse-nav-horizontal-collapsable',
-    templateUrl: './nav-horizontal-collapse.component.html',
+    templateUrl: './collapsable.component.html',
-    styleUrls  : ['./nav-horizontal-collapse.component.scss'],
+    styleUrls  : ['./collapsable.component.scss'],
     animations : fuseAnimations
 })
-export class FuseNavHorizontalCollapseComponent implements OnInit, OnDestroy
+export class FuseNavHorizontalCollapsableComponent implements OnInit, OnDestroy
 {
     fuseConfig: any;
     isOpen = false;
 
     @HostBinding('class')
-    classes = 'nav-item nav-collapse';
+    classes = 'nav-collapsable nav-item';
 
     @Input()
     item: any;

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

@@ -2,8 +2,8 @@ import { Component, HostBinding, Input } from '@angular/core';
 
 @Component({
     selector   : 'fuse-nav-horizontal-item',
-    templateUrl: './nav-horizontal-item.component.html',
+    templateUrl: './item.component.html',
-    styleUrls  : ['./nav-horizontal-item.component.scss']
+    styleUrls  : ['./item.component.scss']
 })
 export class FuseNavHorizontalItemComponent
 {

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

@@ -7,7 +7,7 @@
         <ng-container *ngFor="let item of navigation">
 
             <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
-            <fuse-nav-vertical-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapse>
+            <fuse-nav-vertical-collapsable *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-vertical-collapsable>
             <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
 
         </ng-container>
@@ -20,8 +20,8 @@
 
         <ng-container *ngFor="let item of navigation">
 
-            <fuse-nav-horizontal-collapse *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapse>
+            <fuse-nav-horizontal-collapsable *ngIf="item.type=='group'" [item]="item"></fuse-nav-horizontal-collapsable>
-            <fuse-nav-horizontal-collapse *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapse>
+            <fuse-nav-horizontal-collapsable *ngIf="item.type=='collapse'" [item]="item"></fuse-nav-horizontal-collapsable>
             <fuse-nav-horizontal-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-horizontal-item>
 
         </ng-container>

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

@@ -6,11 +6,11 @@ import { MatIconModule, MatRippleModule } from '@angular/material';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { FuseNavigationComponent } from './navigation.component';
-import { FuseNavVerticalItemComponent } from './vertical/nav-item/nav-vertical-item.component';
+import { FuseNavVerticalItemComponent } from './vertical/item/item.component';
-import { FuseNavVerticalCollapseComponent } from './vertical/nav-collapse/nav-vertical-collapse.component';
+import { FuseNavVerticalCollapsableComponent } from './vertical/collapsable/collapsable.component';
-import { FuseNavVerticalGroupComponent } from './vertical/nav-group/nav-vertical-group.component';
+import { FuseNavVerticalGroupComponent } from './vertical/group/group.component';
-import { FuseNavHorizontalItemComponent } from './horizontal/nav-item/nav-horizontal-item.component';
+import { FuseNavHorizontalItemComponent } from './horizontal/item/item.component';
-import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/nav-horizontal-collapse.component';
+import { FuseNavHorizontalCollapsableComponent } from './horizontal/collapsable/collapsable.component';
 
 @NgModule({
     imports     : [
@@ -29,9 +29,9 @@ import { FuseNavHorizontalCollapseComponent } from './horizontal/nav-collapse/na
         FuseNavigationComponent,
         FuseNavVerticalGroupComponent,
         FuseNavVerticalItemComponent,
-        FuseNavVerticalCollapseComponent,
+        FuseNavVerticalCollapsableComponent,
         FuseNavHorizontalItemComponent,
-        FuseNavHorizontalCollapseComponent
+        FuseNavHorizontalCollapsableComponent
     ]
 })
 export class FuseNavigationModule

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

@@ -47,13 +47,14 @@
               [ngStyle]="{'background-color': item.badge.bg,'color': item.badge.fg}">
             {{item.badge.title}}
         </span>
-        <mat-icon class="collapse-arrow">keyboard_arrow_right</mat-icon>
+        <mat-icon class="collapsable-arrow">keyboard_arrow_right</mat-icon>
     </ng-template>
 
     <div class="children" [@slideInOut]="isOpen">
         <ng-container *ngFor="let item of item.children">
             <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>
+            <fuse-nav-vertical-collapsable *ngIf="item.type=='collapsable'"
+                                           [item]="item"></fuse-nav-vertical-collapsable>
             <fuse-nav-vertical-group *ngIf="item.type=='group'" [item]="item"></fuse-nav-vertical-group>
         </ng-container>
     </div>

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

@@ -8,18 +8,18 @@ import { fuseAnimations } from '@fuse/animations';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 
 @Component({
-    selector   : 'fuse-nav-vertical-collapse',
+    selector   : 'fuse-nav-vertical-collapsable',
-    templateUrl: './nav-vertical-collapse.component.html',
+    templateUrl: './collapsable.component.html',
-    styleUrls  : ['./nav-vertical-collapse.component.scss'],
+    styleUrls  : ['./collapsable.component.scss'],
     animations : fuseAnimations
 })
-export class FuseNavVerticalCollapseComponent implements OnInit, OnDestroy
+export class FuseNavVerticalCollapsableComponent implements OnInit, OnDestroy
 {
     @Input()
     item: FuseNavigationItem;
 
     @HostBinding('class')
-    classes = 'nav-collapse nav-item';
+    classes = 'nav-collapsable nav-item';
 
     @HostBinding('class.open')
     public isOpen = false;

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

@@ -7,7 +7,8 @@
     <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-collapsable *ngIf="item.type=='collapsable'"
+                                           [item]="item"></fuse-nav-vertical-collapsable>
             <fuse-nav-vertical-item *ngIf="item.type=='item'" [item]="item"></fuse-nav-vertical-item>
         </ng-container>
     </div>

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

@@ -4,8 +4,8 @@ import { FuseNavigationItem } from '@fuse/types';
 
 @Component({
     selector   : 'fuse-nav-vertical-group',
-    templateUrl: './nav-vertical-group.component.html',
+    templateUrl: './group.component.html',
-    styleUrls  : ['./nav-vertical-group.component.scss']
+    styleUrls  : ['./group.component.scss']
 })
 export class FuseNavVerticalGroupComponent
 {

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

@@ -4,8 +4,8 @@ import { FuseNavigationItem } from '@fuse/types';
 
 @Component({
     selector   : 'fuse-nav-vertical-item',
-    templateUrl: './nav-vertical-item.component.html',
+    templateUrl: './item.component.html',
-    styleUrls  : ['./nav-vertical-item.component.scss']
+    styleUrls  : ['./item.component.scss']
 })
 export class FuseNavVerticalItemComponent
 {

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

@@ -95,25 +95,25 @@ export class FuseShortcutsComponent implements OnInit, OnDestroy
             this.shortcutItems = [
                 {
                     'title': 'Calendar',
-                    'type' : 'nav-item',
+                    'type' : 'item',
                     'icon' : 'today',
                     'url'  : '/apps/calendar'
                 },
                 {
                     'title': 'Mail',
-                    'type' : 'nav-item',
+                    'type' : 'item',
                     'icon' : 'email',
                     'url'  : '/apps/mail'
                 },
                 {
                     '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'
                 }

src/@fuse/scss/partials/_navigation.scss

@@ -58,7 +58,7 @@
                 transition: opacity 0.2s ease-in-out 0.1s;
                 margin-left: 8px;
 
-                + .collapse-arrow {
+                + .collapsable-arrow {
                     margin-left: 8px;
                 }
             }
@@ -93,7 +93,7 @@
             }
 
             .nav-link-icon,
-            .collapse-arrow {
+            .collapsable-arrow {
                 font-size: 16px;
                 width: 16px;
                 height: 16px;
@@ -103,7 +103,7 @@
             }
         }
 
-        &.nav-collapse {
+        &.nav-collapsable {
             display: block;
 
             > .children {
@@ -135,7 +135,7 @@
 
     > .nav-item {
 
-        &.nav-collapse {
+        &.nav-collapsable {
             background: transparent;
             transition: background 200ms ease-in-out;
 
@@ -149,7 +149,7 @@
 
         > .group-items {
 
-            > .nav-collapse {
+            > .nav-collapsable {
                 background: transparent;
                 transition: background 200ms ease-in-out;
 
@@ -176,7 +176,7 @@
 
         .nav-item {
 
-            &.nav-collapse {
+            &.nav-collapsable {
                 position: relative;
 
                 .children {
@@ -205,13 +205,13 @@
                 height: 56px;
             }
 
-            &.nav-collapse {
+            &.nav-collapsable {
                 position: relative;
 
                 > .nav-link {
                     height: 56px;
 
-                    .collapse-arrow {
+                    .collapsable-arrow {
                         display: none;
                     }
                 }

src/@fuse/types/fuse-navigation.ts

@@ -2,7 +2,7 @@ export interface FuseNavigationItem
 {
     id: string;
     title: string;
-    type: 'item' | 'group' | 'collapse';
+    type: 'item' | 'group' | 'collapsable';
     translate?: string;
     icon?: string;
     hidden?: boolean;

src/app/navigation/navigation.ts

@@ -12,7 +12,7 @@ export const navigation: FuseNavigation[] = [
                 id       : 'dashboards',
                 title    : 'Dashboards',
                 translate: 'NAV.DASHBOARDS',
-                type     : 'collapse',
+                type     : 'collapsable',
                 icon     : 'dashboard',
                 children : [
                     {
@@ -41,7 +41,7 @@ export const navigation: FuseNavigation[] = [
                 id       : 'e-commerce',
                 title    : 'E-Commerce',
                 translate: 'NAV.ECOMMERCE',
-                type     : 'collapse',
+                type     : 'collapsable',
                 icon     : 'shopping_cart',
                 children : [
                     {
@@ -177,7 +177,7 @@ export const navigation: FuseNavigation[] = [
             {
                 id      : 'authentication',
                 title   : 'Authentication',
-                type    : 'collapse',
+                type    : 'collapsable',
                 icon    : 'lock',
                 badge   : {
                     title: '10',
@@ -257,7 +257,7 @@ export const navigation: FuseNavigation[] = [
             {
                 id      : 'errors',
                 title   : 'Errors',
-                type    : 'collapse',
+                type    : 'collapsable',
                 icon    : 'error',
                 children: [
                     {
@@ -277,7 +277,7 @@ export const navigation: FuseNavigation[] = [
             {
                 id      : 'invoice',
                 title   : 'Invoice',
-                type    : 'collapse',
+                type    : 'collapsable',
                 icon    : 'receipt',
                 children: [
                     {
@@ -304,7 +304,7 @@ export const navigation: FuseNavigation[] = [
             {
                 id      : 'pricing',
                 title   : 'Pricing',
-                type    : 'collapse',
+                type    : 'collapsable',
                 icon    : 'attach_money',
                 children: [
                     {
@@ -394,13 +394,13 @@ export const navigation: FuseNavigation[] = [
             {
                 id      : 'page-layouts',
                 title   : 'Page Layouts',
-                type    : 'collapse',
+                type    : 'collapsable',
                 icon    : 'view_quilt',
                 children: [
                     {
                         id      : 'carded',
                         title   : 'Carded',
-                        type    : 'collapse',
+                        type    : 'collapsable',
                         badge   : {
                             title: '12',
                             bg   : '#525e8a',
@@ -484,7 +484,7 @@ export const navigation: FuseNavigation[] = [
                     {
                         id      : 'simple',
                         title   : 'Simple',
-                        type    : 'collapse',
+                        type    : 'collapsable',
                         badge   : {
                             title: '8',
                             bg   : '#525e8a',
@@ -589,7 +589,7 @@ export const navigation: FuseNavigation[] = [
             {
                 id      : 'angular-material-elements',
                 title   : 'Angular Material Elements',
-                type    : 'collapse',
+                type    : 'collapsable',
                 icon    : 'layers',
                 children: [
                     {
@@ -927,7 +927,7 @@ export const navigation: FuseNavigation[] = [
             {
                 id      : 'datatables',
                 title   : 'Datatables',
-                type    : 'collapse',
+                type    : 'collapsable',
                 icon    : 'border_all',
                 children: [
                     {