Moved Angular Material Elements examples

Prepared the navigation for the documentation update

angular.json

@@ -25,7 +25,7 @@
                         "assets": [
                             "src/favicon.ico",
                             "src/assets",
-                            "src/app/main/components/angular-material"
+                            "src/app/main/angular-material-elements"
                         ],
                         "styles": [
                             "src/styles.scss"

src/app/app.module.ts

@@ -34,16 +34,12 @@ const appRoutes: Routes = [
         loadChildren: './main/ui/ui.module#UIModule'
     },
     {
-        path        : 'services',
+        path        : 'documentation',
-        loadChildren: './main/services/services.module#ServicesModule'
+        loadChildren: './main/documentation/documentation.module#DocumentationModule'
     },
     {
-        path        : 'components',
+        path        : 'angular-material-elements',
-        loadChildren: './main/components/components.module#ComponentsModule'
+        loadChildren: './main/angular-material-elements/angular-material-elements.module#AngularMaterialElementsModule'
-    },
-    {
-        path        : 'components-third-party',
-        loadChildren: './main/components-third-party/components-third-party.module#ComponentsThirdPartyModule'
     },
     {
         path      : '**',

src/app/main/angular-material-elements/angular-material-elements.component.html

@@ -1,7 +1,8 @@
-<div class="page-layout simple fullwidth angular-material-element" fusePerfectScrollbar>
+<div class="page-layout simple fullwidth angular-material-elements">
 
     <!-- HEADER -->
-    <div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
+    <div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
+         fxLayoutAlign.gt-xs="space-between center">
 
         <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
@@ -14,7 +15,8 @@
             <div class="h2 mt-16">{{title}}</div>
         </div>
 
-        <a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0" href="https://material.angular.io/" target="_blank">
+        <a mat-raised-button class="reference-button mat-white-bg mt-16 mt-sm-0" href="https://material.angular.io/"
+           target="_blank">
             <mat-icon class="mr-8">link</mat-icon>
             <span>Reference</span>
         </a>

src/app/main/angular-material-elements/angular-material-elements.component.scss

@@ -1,6 +1,6 @@
 :host {
 
-    .angular-material-element {
+    .angular-material-elements {
 
         > .content {
             max-width: 960px;

src/app/main/angular-material-elements/angular-material-elements.component.ts

@@ -3,14 +3,14 @@ import { ActivatedRoute } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-import { COMPONENT_MAP } from 'app/main/components/angular-material/example-components';
+import { COMPONENT_MAP } from 'app/main/angular-material-elements/example-components';
 
 @Component({
     selector   : 'angular-material',
-    templateUrl: './angular-material-examples.component.html',
+    templateUrl: './angular-material-elements.component.html',
-    styleUrls  : ['./angular-material-examples.component.scss']
+    styleUrls  : ['./angular-material-elements.component.scss']
 })
-export class AngularMaterialExamplesComponent implements OnInit, OnDestroy
+export class AngularMaterialElementsComponent implements OnInit, OnDestroy
 {
     id: string;
     title: string;

src/app/main/angular-material-elements/angular-material-elements.module.ts

@@ -2,21 +2,21 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { FuseSharedModule } from '@fuse/shared.module';
-import { FuseHighlightModule } from '@fuse/components';
+import { FuseHighlightModule } from '@fuse/components/index';
 import { FuseWidgetModule } from '@fuse/components/widget/widget.module';
 
-import { MaterialModule } from 'app/main/components/angular-material/material.module';
+import { MaterialModule } from 'app/main/angular-material-elements/material.module';
-import { EXAMPLE_LIST } from 'app/main/components/angular-material/example-components';
+import { EXAMPLE_LIST } from 'app/main/angular-material-elements/example-components';
-import { AngularMaterialExamplesComponent } from 'app/main/components/angular-material/angular-material-examples.component';
+import { AngularMaterialElementsComponent } from 'app/main/angular-material-elements/angular-material-elements.component';
-import { ExampleViewerComponent } from 'app/main/components/angular-material/example-viewer/example-viewer';
+import { ExampleViewerComponent } from 'app/main/angular-material-elements/example-viewer/example-viewer';
 
 const routes: Routes = [
     {
-        path    : 'angular-material',
+        path    : '',
         children: [
             {
                 path     : ':id',
-                component: AngularMaterialExamplesComponent
+                component: AngularMaterialElementsComponent
             }
         ]
     }
@@ -25,7 +25,7 @@ const routes: Routes = [
 @NgModule({
     declarations   : [
         [...EXAMPLE_LIST],
-        AngularMaterialExamplesComponent,
+        AngularMaterialElementsComponent,
         ExampleViewerComponent
     ],
     imports        : [
@@ -39,7 +39,7 @@ const routes: Routes = [
     ],
     entryComponents: EXAMPLE_LIST,
 })
-export class AngularMaterialExamplesModule
+export class AngularMaterialElementsModule
 {
 }
 

src/app/main/angular-material-elements/example-viewer/example-viewer.scss

@@ -1,4 +1,4 @@
-@import "src/@fuse/scss/fuse";
+@import "../../../../@fuse/scss/fuse";
 
 example-viewer {
     display: block;

src/app/main/angular-material-elements/example-viewer/example-viewer.ts

@@ -3,10 +3,10 @@ import { MatSnackBar } from '@angular/material';
 import 'prismjs/components/prism-scss';
 import 'prismjs/components/prism-typescript';
 
-import { fuseAnimations } from '@fuse/animations';
+import { fuseAnimations } from '@fuse/animations/index';
 import { FuseCopierService } from '@fuse/services/copier.service';
 
-import { EXAMPLE_COMPONENTS } from 'app/main/components/angular-material/example-components';
+import { EXAMPLE_COMPONENTS } from 'app/main/angular-material-elements/example-components';
 
 export interface LiveExample
 {

src/app/main/documentation/components-third-party/components-third-party.module.ts

@@ -5,8 +5,8 @@ import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 
-import { GoogleMapsModule } from 'app/main/components-third-party/google-maps/google-maps.module';
+import { GoogleMapsModule } from 'app/main/documentation/components-third-party/google-maps/google-maps.module';
-import { NgxDatatableDocsComponent } from 'app/main/components-third-party/datatable/ngx-datatable.component';
+import { NgxDatatableDocsComponent } from 'app/main/documentation/components-third-party/datatable/ngx-datatable.component';
 
 const routes = [
     {

src/app/main/documentation/components-third-party/datatable/ngx-datatable.component.html

@@ -1,7 +1,8 @@
-<div id="ngx-datatable" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="ngx-datatable" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
-    <div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
+    <div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
+         fxLayoutAlign.gt-xs="space-between center">
         <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
                 <mat-icon class="secondary-text s-16">home</mat-icon>

src/app/main/documentation/components-third-party/google-maps/google-maps.component.html

@@ -1,7 +1,8 @@
-<div id="countdown" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="countdown" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
-    <div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
+    <div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
+         fxLayoutAlign.gt-xs="space-between center">
         <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
                 <mat-icon class="secondary-text s-16">home</mat-icon>

src/app/main/documentation/components-third-party/google-maps/google-maps.module.ts

@@ -6,7 +6,7 @@ import { MatButtonModule, MatIconModule } from '@angular/material';
 import { AgmCoreModule } from '@agm/core';
 
 import { FuseSharedModule } from '@fuse/shared.module';
-import { FuseHighlightModule } from '@fuse/components';
+import { FuseHighlightModule } from '@fuse/components/index';
 
 import { GoogleMapsDocsComponent } from './google-maps.component';
 

src/app/main/documentation/components/cards/cards.component.html

@@ -1,4 +1,4 @@
-<div id="cards" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="cards" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center">

src/app/main/documentation/components/cards/cards.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import * as shape from 'd3-shape';
 
-import { fuseAnimations } from '@fuse/animations';
+import { fuseAnimations } from '@fuse/animations/index';
 
 @Component({
     selector   : 'cards-docs',

src/app/main/documentation/components/components.module.ts

@@ -5,19 +5,17 @@ import { NgxChartsModule } from '@swimlane/ngx-charts';
 
 import { FuseSharedModule } from '@fuse/shared.module';
 
-import { AngularMaterialExamplesModule } from 'app/main/components/angular-material/angular-material-examples.module';
+import { FuseCountdownModule, FuseHighlightModule, FuseMaterialColorPickerModule, FuseWidgetModule } from '@fuse/components/index';
-
+import { CardsDocsComponent } from 'app/main/documentation/components/cards/cards.component';
-import { FuseCountdownModule, FuseHighlightModule, FuseMaterialColorPickerModule, FuseWidgetModule } from '@fuse/components';
+import { CountdownDocsComponent } from 'app/main/documentation/components/countdown/countdown.component';
-import { CardsDocsComponent } from 'app/main/components/cards/cards.component';
+import { HighlightDocsComponent } from 'app/main/documentation/components/highlight/highlight.component';
-import { CountdownDocsComponent } from 'app/main/components/countdown/countdown.component';
+import { MaterialColorPickerDocsComponent } from 'app/main/documentation/components/material-color-picker/material-color-picker.component';
-import { HighlightDocsComponent } from 'app/main/components/highlight/highlight.component';
+import { MultiLanguageDocsComponent } from 'app/main/documentation/components/multi-language/multi-language.component';
-import { MaterialColorPickerDocsComponent } from 'app/main/components/material-color-picker/material-color-picker.component';
+import { NavigationDocsComponent } from 'app/main/documentation/components/navigation/navigation.component';
-import { MultiLanguageDocsComponent } from 'app/main/components/multi-language/multi-language.component';
+import { SearchBarDocsComponent } from 'app/main/documentation/components/search-bar/search-bar.component';
-import { NavigationDocsComponent } from 'app/main/components/navigation/navigation.component';
+import { SidebarDocsComponent } from 'app/main/documentation/components/sidebar/sidebar.component';
-import { SearchBarDocsComponent } from 'app/main/components/search-bar/search-bar.component';
+import { ShortcutsDocsComponent } from 'app/main/documentation/components/shortcuts/shortcuts.component';
-import { SidebarDocsComponent } from 'app/main/components/sidebar/sidebar.component';
+import { WidgetDocsComponent } from 'app/main/documentation/components/widget/widget.component';
-import { ShortcutsDocsComponent } from 'app/main/components/shortcuts/shortcuts.component';
-import { WidgetDocsComponent } from 'app/main/components/widget/widget.component';
 
 const routes = [
     {
@@ -95,9 +93,7 @@ const routes = [
         FuseCountdownModule,
         FuseHighlightModule,
         FuseMaterialColorPickerModule,
-        FuseWidgetModule,
+        FuseWidgetModule
-
-        AngularMaterialExamplesModule
     ]
 })
 export class ComponentsModule

src/app/main/documentation/components/countdown/countdown.component.html

@@ -1,4 +1,4 @@
-<div id="countdown" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="countdown" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/documentation/components/highlight/highlight.component.html

@@ -1,4 +1,4 @@
-<div id="highlight" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="highlight" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/documentation/components/material-color-picker/material-color-picker.component.html

@@ -1,4 +1,4 @@
-<div id="material-color-picker" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="material-color-picker" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/documentation/components/multi-language/multi-language.component.html

@@ -1,4 +1,4 @@
-<div id="multi-language" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="multi-language" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

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

@@ -1,4 +1,4 @@
-<div id="navigation" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="navigation" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/documentation/components/search-bar/search-bar.component.html

@@ -1,4 +1,4 @@
-<div id="search-bar" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="search-bar" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/documentation/components/shortcuts/shortcuts.component.html

@@ -1,4 +1,4 @@
-<div id="shortcuts" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="shortcuts" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/documentation/components/sidebar/sidebar.component.html

@@ -1,4 +1,4 @@
-<div id="sidebar" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="sidebar" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/documentation/components/widget/widget.component.html

@@ -1,4 +1,4 @@
-<div id="widget" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="widget" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/documentation/documentation.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+    {
+        path        : 'components',
+        loadChildren: './components/components.module#ComponentsModule'
+    },
+    {
+        path        : 'components-third-party',
+        loadChildren: './components-third-party/components-third-party.module#ComponentsThirdPartyModule'
+    },
+    {
+        path        : 'services',
+        loadChildren: './services/services.module#ServicesModule'
+    }
+];
+
+@NgModule({
+    imports: [
+        RouterModule.forChild(routes)
+    ]
+})
+export class DocumentationModule
+{
+}

src/app/main/documentation/services/config/config.component.html

@@ -1,4 +1,4 @@
-<div id="config" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="config" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/documentation/services/services.module.ts

@@ -3,10 +3,10 @@ import { RouterModule } from '@angular/router';
 import { MatIconModule } from '@angular/material';
 
 import { FuseSharedModule } from '@fuse/shared.module';
-import { FuseHighlightModule } from '@fuse/components';
+import { FuseHighlightModule } from '@fuse/components/index';
 
-import { ConfigServiceDocsComponent } from 'app/main/services/config/config.component';
+import { ConfigServiceDocsComponent } from 'app/main/documentation/services/config/config.component';
-import { SplashScreenServiceDocsComponent } from 'app/main/services/splash-screen/splash-screen.component';
+import { SplashScreenServiceDocsComponent } from 'app/main/documentation/services/splash-screen/splash-screen.component';
 
 const routes = [
     {

src/app/main/documentation/services/splash-screen/splash-screen.component.html

@@ -1,4 +1,4 @@
-<div id="splash-screen" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="splash-screen" class="page-layout simple fullwidth">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/ui/colors/colors.component.html

@@ -1,7 +1,8 @@
-<div id="material-colors" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
+<div id="material-colors" class="page-layout simple tabbed" fxLayout="column">
 
     <!-- HEADER -->
-    <div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
+    <div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
+         fxLayoutAlign.gt-xs="space-between center">
 
         <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
             <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
@@ -76,7 +77,8 @@
                 </div>
             </div>
 
-            <div class="color" fxLayout="column" fxFlex="1 0 auto" *ngIf="selectedColor != 'black' && selectedColor != 'white'">
+            <div class="color" fxLayout="column" fxFlex="1 0 auto"
+                 *ngIf="selectedColor != 'black' && selectedColor != 'white'">
 
                 <div class="colored-bg p-8"
                      *ngFor="let hue of ['50','100','200','300','400','500','600','700','800','900','A100','A200','A400','A700']"

src/app/main/ui/colors/colors.component.scss

@@ -2,14 +2,6 @@
 
     .content {
 
-        .color-tabs {
-
-            .mat-tab-body {
-
-            }
-
-        }
-
         .color-tabs-content {
 
             .color {

src/app/main/ui/forms/forms.component.html

@@ -1,4 +1,4 @@
-<div id="forms" class="page-layout simple fullwidth" fxLayout="column" fusePerfectScrollbar>
+<div id="forms" class="page-layout simple fullwidth" fxLayout="column">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/ui/helper-classes/helper-classes.component.html

@@ -1,4 +1,4 @@
-<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
+<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/main/ui/icons/icons.component.html

@@ -1,4 +1,4 @@
-<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
+<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"

src/app/main/ui/typography/typography.component.html

@@ -1,4 +1,4 @@
-<div id="typography" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
+<div id="typography" class="page-layout simple tabbed" fxLayout="column">
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">

src/app/navigation/navigation.ts

@@ -571,7 +571,7 @@ export const navigation: FuseNavigation[] = [
         ]
     },
     {
-        id      : 'angular-material-elements',
+        id      : 'angular-material-elements-elements',
         title   : 'Angular Material Elements',
         type    : 'group',
         children: [
@@ -585,55 +585,55 @@ export const navigation: FuseNavigation[] = [
                         id   : 'autocomplete',
                         title: 'Autocomplete',
                         type : 'item',
-                        url  : '/components/angular-material/autocomplete'
+                        url  : '/angular-material-elements/autocomplete'
                     },
                     {
                         id   : 'checkbox',
                         title: 'Checkbox',
                         type : 'item',
-                        url  : '/components/angular-material/checkbox'
+                        url  : '/angular-material-elements/checkbox'
                     },
                     {
                         id   : 'datepicker',
                         title: 'Datepicker',
                         type : 'item',
-                        url  : '/components/angular-material/datepicker'
+                        url  : '/angular-material-elements/datepicker'
                     },
                     {
                         id   : 'form-field',
                         title: 'Form field',
                         type : 'item',
-                        url  : '/components/angular-material/form-field'
+                        url  : '/angular-material-elements/form-field'
                     },
                     {
                         id   : 'input',
                         title: 'Input',
                         type : 'item',
-                        url  : '/components/angular-material/input'
+                        url  : '/angular-material-elements/input'
                     },
                     {
                         id   : 'radio-button',
                         title: 'Radio button',
                         type : 'item',
-                        url  : '/components/angular-material/radio-button'
+                        url  : '/angular-material-elements/radio-button'
                     },
                     {
                         id   : 'select',
                         title: 'Select',
                         type : 'item',
-                        url  : '/components/angular-material/select'
+                        url  : '/angular-material-elements/select'
                     },
                     {
                         id   : 'slider',
                         title: 'Slider',
                         type : 'item',
-                        url  : '/components/angular-material/slider'
+                        url  : '/angular-material-elements/slider'
                     },
                     {
                         id   : 'slide-toggle',
                         title: 'Slide toggle',
                         type : 'item',
-                        url  : '/components/angular-material/slide-toggle'
+                        url  : '/angular-material-elements/slide-toggle'
                     }
                 ]
             },
@@ -647,19 +647,19 @@ export const navigation: FuseNavigation[] = [
                         id   : 'menu',
                         title: 'Menu',
                         type : 'item',
-                        url  : '/components/angular-material/menu'
+                        url  : '/angular-material-elements/menu'
                     },
                     {
                         id   : 'sidenav',
                         title: 'Sidebar',
                         type : 'item',
-                        url  : '/components/angular-material/sidenav'
+                        url  : '/angular-material-elements/sidenav'
                     },
                     {
                         id   : 'toolbar',
                         title: 'Toolbar',
                         type : 'item',
-                        url  : '/components/angular-material/toolbar'
+                        url  : '/angular-material-elements/toolbar'
                     }
                 ]
             },
@@ -673,67 +673,67 @@ export const navigation: FuseNavigation[] = [
                         id   : 'badge',
                         title: 'Badge',
                         type : 'item',
-                        url  : '/components/angular-material/badge'
+                        url  : '/angular-material-elements/badge'
                     },
                     {
                         id   : 'bottom-sheet',
                         title: 'Bottom Sheet',
                         type : 'item',
-                        url  : '/components/angular-material/bottom-sheet'
+                        url  : '/angular-material-elements/bottom-sheet'
                     },
                     {
                         id   : 'card',
                         title: 'Card',
                         type : 'item',
-                        url  : '/components/angular-material/card'
+                        url  : '/angular-material-elements/card'
                     },
                     {
                         id   : 'divider',
                         title: 'Divider',
                         type : 'item',
-                        url  : '/components/angular-material/divider'
+                        url  : '/angular-material-elements/divider'
                     },
                     {
                         id   : 'elevation',
                         title: 'Elevation',
                         type : 'item',
-                        url  : '/components/angular-material/elevation'
+                        url  : '/angular-material-elements/elevation'
                     },
                     {
                         id   : 'expansion-panel',
                         title: 'Expansion Panel',
                         type : 'item',
-                        url  : '/components/angular-material/expansion-panel'
+                        url  : '/angular-material-elements/expansion-panel'
                     },
                     {
                         id   : 'grid-list',
                         title: 'Grid list',
                         type : 'item',
-                        url  : '/components/angular-material/grid-list'
+                        url  : '/angular-material-elements/grid-list'
                     },
                     {
                         id   : 'list',
                         title: 'List',
                         type : 'item',
-                        url  : '/components/angular-material/list'
+                        url  : '/angular-material-elements/list'
                     },
                     {
                         id   : 'stepper',
                         title: 'Stepper',
                         type : 'item',
-                        url  : '/components/angular-material/stepper'
+                        url  : '/angular-material-elements/stepper'
                     },
                     {
                         id   : 'tabs',
                         title: 'Tabs',
                         type : 'item',
-                        url  : '/components/angular-material/tabs'
+                        url  : '/angular-material-elements/tabs'
                     },
                     {
                         id   : 'tree',
                         title: 'Tree',
                         type : 'item',
-                        url  : '/components/angular-material/tree'
+                        url  : '/angular-material-elements/tree'
                     }
                 ]
             },
@@ -747,37 +747,37 @@ export const navigation: FuseNavigation[] = [
                         id   : 'button',
                         title: 'Button',
                         type : 'item',
-                        url  : '/components/angular-material/button'
+                        url  : '/angular-material-elements/button'
                     },
                     {
                         id   : 'button-toggle',
                         title: 'Button toggle',
                         type : 'item',
-                        url  : '/components/angular-material/button-toggle'
+                        url  : '/angular-material-elements/button-toggle'
                     },
                     {
                         id   : 'chips',
                         title: 'Chips',
                         type : 'item',
-                        url  : '/components/angular-material/chips'
+                        url  : '/angular-material-elements/chips'
                     },
                     {
                         id   : 'icon',
                         title: 'icon',
                         type : 'item',
-                        url  : '/components/angular-material/icon'
+                        url  : '/angular-material-elements/icon'
                     },
                     {
                         id   : 'progress-spinner',
                         title: 'Progress spinner',
                         type : 'item',
-                        url  : '/components/angular-material/progress-spinner'
+                        url  : '/angular-material-elements/progress-spinner'
                     },
                     {
                         id   : 'progress-bar',
                         title: 'Progress bar',
                         type : 'item',
-                        url  : '/components/angular-material/progress-bar'
+                        url  : '/angular-material-elements/progress-bar'
                     }
                 ]
             },
@@ -791,19 +791,19 @@ export const navigation: FuseNavigation[] = [
                         id   : 'dialog',
                         title: 'Dialog',
                         type : 'item',
-                        url  : '/components/angular-material/dialog'
+                        url  : '/angular-material-elements/dialog'
                     },
                     {
                         id   : 'snackbar',
                         title: 'Snackbar',
                         type : 'item',
-                        url  : '/components/angular-material/snackbar'
+                        url  : '/angular-material-elements/snackbar'
                     },
                     {
                         id   : 'tooltip',
                         title: 'Tooltip',
                         type : 'item',
-                        url  : '/components/angular-material/tooltip'
+                        url  : '/angular-material-elements/tooltip'
                     }
                 ]
             },
@@ -817,119 +817,189 @@ export const navigation: FuseNavigation[] = [
                         id   : 'paginator',
                         title: 'Paginator',
                         type : 'item',
-                        url  : '/components/angular-material/paginator'
+                        url  : '/angular-material-elements/paginator'
                     },
                     {
                         id   : 'sort-header',
                         title: 'Sort header',
                         type : 'item',
-                        url  : '/components/angular-material/sort-header'
+                        url  : '/angular-material-elements/sort-header'
                     },
                     {
                         id   : 'table',
                         title: 'Table',
                         type : 'item',
-                        url  : '/components/angular-material/table'
+                        url  : '/angular-material-elements/table'
                     }
                 ]
             }
         ]
     },
+    {
+        id      : 'documentation',
+        title   : 'Documentation',
+        type    : 'group',
+        children: [
+            {
+                id   : 'changelog',
+                title: 'Changelog',
+                type : 'item',
+                icon : 'update',
+                url  : '/documentation/changelog',
+                badge    : {
+                    title    : '6.1.0',
+                    bg       : '#EC0C8E',
+                    fg       : '#FFFFFF'
+                }
+            },
+            {
+                id      : 'getting-started',
+                title   : 'Getting Started',
+                type    : 'collapsable',
+                icon    : 'import_contacts',
+                children: [
+                    {
+                        id   : 'introduction',
+                        title: 'Introduction',
+                        type : 'item',
+                        url  : '/documentation/getting-started/introduction'
+                    },
+                    {
+                        id   : 'installation',
+                        title: 'Installation',
+                        type : 'item',
+                        url  : '/documentation/getting-started/installation'
+                    }
+                ]
+            },
+            {
+                id      : 'working-with-fuse',
+                title   : 'Working with Fuse',
+                type    : 'collapsable',
+                icon    : 'import_contacts',
+                children: [
+                    {
+                        id   : 'server',
+                        title: 'Server',
+                        type : 'item',
+                        url  : '/documentation/working-with-fuse/server'
+                    },
+                    {
+                        id   : 'production',
+                        title: 'Production',
+                        type : 'item',
+                        url  : '/documentation/working-with-fuse/production'
+                    },
+                    {
+                        id   : 'directory-structure',
+                        title: 'Directory structure',
+                        type : 'item',
+                        url  : '/documentation/working-with-fuse/directory-structure'
+                    },
+                    {
+                        id   : 'updating-fuse',
+                        title: 'Updating Fuse',
+                        type : 'item',
+                        url  : '/documentation/working-with-fuse/directory-structure'
+                    },
+                    {
+                        id   : 'template-layouts',
+                        title: 'Template Layouts',
+                        type : 'item',
+                        url  : '/documentation/working-with-fuse/template-layouts'
+                    },
+                    {
+                        id   : 'page-layouts',
+                        title: 'Page Layouts',
+                        type : 'item',
+                        url  : '/documentation/working-with-fuse/page-layouts'
+                    }
+                ]
+            },
             {
                 id      : 'components',
                 title   : 'Components',
-        type    : 'group',
+                type    : 'collapsable',
-        icon    : 'settings_input_component',
+                icon    : 'import_contacts',
                 children: [
                     {
                         id   : 'cards',
                         title: 'Cards',
                         type : 'item',
-                icon : 'settings_input_component',
+                        url  : '/documentation/components/cards'
-                url  : '/components/cards'
                     },
                     {
                         id   : 'countdown',
                         title: 'Countdown',
                         type : 'item',
-                icon : 'settings_input_component',
+                        url  : '/documentation/components/countdown'
-                url  : '/components/countdown'
                     },
                     {
                         id   : 'highlight',
                         title: 'Highlight',
                         type : 'item',
-                icon : 'settings_input_component',
+                        url  : '/documentation/components/highlight'
-                url  : '/components/highlight'
                     },
                     {
                         id   : 'material-color-picker',
                         title: 'Material Color Picker',
                         type : 'item',
-                icon : 'settings_input_component',
+                        url  : '/documentation/components/material-color-picker'
-                url  : '/components/material-color-picker'
                     },
                     {
                         id   : 'multi-language',
                         title: 'Multi Language',
                         type : 'item',
-                icon : 'settings_input_component',
+                        url  : '/documentation/components/multi-language'
-                url  : '/components/multi-language'
                     },
                     {
                         id   : 'navigation',
                         title: 'Navigation',
                         type : 'item',
-                icon : 'settings_input_component',
+                        url  : '/documentation/components/navigation'
-                url  : '/components/navigation'
                     },
                     {
                         id   : 'search-bar',
                         title: 'Search Bar',
                         type : 'item',
-                icon : 'settings_input_component',
+                        url  : '/documentation/components/search-bar'
-                url  : '/components/search-bar'
                     },
                     {
                         id   : 'sidebar',
                         title: 'Sidebar',
                         type : 'item',
-                icon : 'settings_input_component',
+                        url  : '/documentation/components/sidebar'
-                url  : '/components/sidebar'
                     },
                     {
                         id   : 'shortcuts',
                         title: 'Shortcuts',
                         type : 'item',
-                icon : 'settings_input_component',
+                        url  : '/documentation/components/shortcuts'
-                url  : '/components/shortcuts'
                     },
                     {
                         id   : 'widget',
                         title: 'Widget',
                         type : 'item',
-                icon : 'settings_input_component',
+                        url  : '/documentation/components/widget'
-                url  : '/components/widget'
                     }
                 ]
             },
             {
                 id      : '3rd-party-components',
                 title   : '3rd Party components',
-        type    : 'group',
+                type    : 'collapsable',
-        icon    : 'settings_input_component',
+                icon    : 'import_contacts',
                 children: [
                     {
                         id      : 'datatables',
                         title   : 'Datatables',
                         type    : 'collapsable',
-                icon    : 'border_all',
                         children: [
                             {
                                 id   : 'ngxdatatable',
                                 title: 'ngx-datatable',
                                 type : 'item',
-                        url  : '/components-third-party/datatables/ngx-datatable'
+                                url  : '/documentation/components-third-party/datatables/ngx-datatable'
                             }
                         ]
                     },
@@ -937,31 +1007,63 @@ export const navigation: FuseNavigation[] = [
                         id   : 'google-maps',
                         title: 'Google Maps',
                         type : 'item',
-                icon : 'place',
+                        url  : '/documentation/components-third-party/google-maps'
-                url  : '/components-third-party/google-maps'
+                    }
+                ]
+            },
+            {
+                id      : 'directives',
+                title   : 'Directives',
+                type    : 'collapsable',
+                icon    : 'import_contacts',
+                children: [
+                    {
+                        id   : 'fuse-if-on-dom',
+                        title: 'fuseIfOnDom',
+                        type : 'item',
+                        url  : '/documentation/directives/fuse-if-on-dom'
+                    },
+                    {
+                        id   : 'fuse-inner-scroll',
+                        title: 'fuseInnerScroll',
+                        type : 'item',
+                        url  : '/documentation/directives/fuse-inner-scroll'
+                    },
+                    {
+                        id   : 'fuse-mat-sidenav',
+                        title: 'fuseMatSidenav',
+                        type : 'item',
+                        url  : '/documentation/directives/fuse-mat-sidenav'
+                    },
+                    {
+                        id   : 'fuse-perfect-scrollbar',
+                        title: 'fusePerfectScrollbar',
+                        type : 'item',
+                        url  : '/documentation/directives/fuse-perfect-scrollbar'
                     }
                 ]
             },
             {
                 id      : 'services',
                 title   : 'Services',
-        type    : 'group',
+                type    : 'collapsable',
-        icon    : 'settings',
+                icon    : 'import_contacts',
                 children: [
                     {
                         id   : 'config',
                         title: 'Config',
                         type : 'item',
-                icon : 'settings',
+                        url  : '/documentation/services/config'
-                url  : '/services/config'
                     },
                     {
                         id   : 'splash-screen',
                         title: 'Splash Screen',
                         type : 'item',
-                icon : 'settings',
+                        url  : '/documentation/services/splash-screen'
-                url  : '/services/splash-screen'
                     }
                 ]
             }
+        ]
+    }
+
 ];