Merge remote-tracking branch 'origin/demo' into starter

# Conflicts:
#	src/app/app.routing.ts
#	src/app/mock-api/common/navigation/data.ts
#	src/app/modules/admin/apps/academy/academy.service.ts
#	src/app/modules/admin/apps/academy/details/details.component.html
#	src/app/modules/admin/apps/academy/list/list.component.html
#	src/app/modules/admin/apps/mailbox/list/list.component.ts
#	src/app/modules/admin/docs/changelog/changelog.ts
#	src/app/modules/admin/pages/pricing/modern/modern.component.html
#	src/app/modules/admin/pages/pricing/simple/simple.component.html
#	src/app/modules/admin/pages/pricing/single/single.component.html
#	src/app/modules/admin/pages/pricing/table/table.component.html

.eslintrc.json

@@ -16,7 +16,8 @@
             ],
             "parserOptions": {
                 "project": [
-                    "tsconfig.json"
+                    "tsconfig.json",
+                    "e2e/tsconfig.json"
                 ],
                 "createDefaultProgram": true
             },
@@ -43,7 +44,6 @@
                     }
                 ],
                 "@typescript-eslint/dot-notation": "off",
-                "@typescript-eslint/explicit-function-return-type": "error",
                 "@typescript-eslint/explicit-member-accessibility": [
                     "off",
                     {

CREDITS

@@ -2,9 +2,6 @@
 // @ 3rd party credits
 // -----------------------------------------------------------------------------------------------------
 
-// Flags
-https://github.com/Yummygum/flagpack-core
-
 // Icons
 Material - https://material.io/tools/icons
 Feather - https://feathericons.com/

angular.json

@@ -120,7 +120,7 @@
                             "src/assets"
                         ],
                         "styles": [
-                            "src/styles/styles.scss"
+                            "src/styles.scss"
                         ],
                         "scripts": []
                     }
@@ -133,6 +133,18 @@
                             "src/**/*.html"
                         ]
                     }
+                },
+                "e2e": {
+                    "builder": "@angular-devkit/build-angular:protractor",
+                    "options": {
+                        "protractorConfig": "e2e/protractor.conf.js",
+                        "devServerTarget": "fuse:serve"
+                    },
+                    "configurations": {
+                        "production": {
+                            "devServerTarget": "fuse:serve:production"
+                        }
+                    }
                 }
             }
         }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fuse/demo",
-    "version": "13.1.0",
+    "version": "13.0.0",
     "license": "https://themeforest.net/licenses/standard",
     "private": true,
     "scripts": {
@@ -12,17 +12,17 @@
         "e2e": "ng e2e"
     },
     "dependencies": {
-        "@angular/animations": "12.0.4",
-        "@angular/cdk": "12.0.4",
-        "@angular/common": "12.0.4",
-        "@angular/compiler": "12.0.4",
-        "@angular/core": "12.0.4",
-        "@angular/forms": "12.0.4",
-        "@angular/material": "12.0.4",
-        "@angular/material-moment-adapter": "12.0.4",
-        "@angular/platform-browser": "12.0.4",
-        "@angular/platform-browser-dynamic": "12.0.4",
-        "@angular/router": "12.0.4",
+        "@angular/animations": "12.0.0",
+        "@angular/cdk": "12.0.0",
+        "@angular/common": "12.0.0",
+        "@angular/compiler": "12.0.0",
+        "@angular/core": "12.0.0",
+        "@angular/forms": "12.0.0",
+        "@angular/material": "12.0.0",
+        "@angular/material-moment-adapter": "12.0.0",
+        "@angular/platform-browser": "12.0.0",
+        "@angular/platform-browser-dynamic": "12.0.0",
+        "@angular/router": "12.0.0",
         "@fullcalendar/angular": "4.4.5-beta",
         "@fullcalendar/core": "4.4.2",
         "@fullcalendar/daygrid": "4.4.2",
@@ -31,60 +31,61 @@
         "@fullcalendar/moment": "4.4.2",
         "@fullcalendar/rrule": "4.4.2",
         "@fullcalendar/timegrid": "4.4.2",
-        "@ngneat/transloco": "2.21.0",
-        "apexcharts": "3.27.1",
+        "apexcharts": "3.26.2",
         "crypto-js": "3.3.0",
-        "highlight.js": "11.0.1",
+        "highlight.js": "10.7.2",
         "lodash-es": "4.17.21",
         "moment": "2.29.1",
-        "ng-apexcharts": "1.5.12",
-        "ngx-markdown": "12.0.1",
+        "ng-apexcharts": "1.5.9",
+        "ngx-markdown": "11.1.3",
         "ngx-quill": "14.0.0",
         "perfect-scrollbar": "1.5.1",
         "quill": "1.3.7",
         "rrule": "2.6.8",
         "rxjs": "6.6.7",
-        "tslib": "2.3.0",
+        "tslib": "2.2.0",
         "web-animations-js": "2.3.2",
         "zone.js": "0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "12.0.4",
-        "@angular-eslint/builder": "12.1.0",
-        "@angular-eslint/eslint-plugin": "12.1.0",
-        "@angular-eslint/eslint-plugin-template": "12.1.0",
-        "@angular-eslint/schematics": "12.1.0",
-        "@angular-eslint/template-parser": "12.1.0",
-        "@angular/cli": "12.0.4",
-        "@angular/compiler-cli": "12.0.4",
-        "@angular/language-service": "12.0.4",
-        "@tailwindcss/aspect-ratio": "0.2.1",
-        "@tailwindcss/line-clamp": "0.2.1",
-        "@tailwindcss/typography": "0.4.1",
+        "@angular-devkit/build-angular": "12.0.0",
+        "@angular-eslint/builder": "12.0.0",
+        "@angular-eslint/eslint-plugin": "12.0.0",
+        "@angular-eslint/eslint-plugin-template": "12.0.0",
+        "@angular-eslint/schematics": "12.0.0",
+        "@angular-eslint/template-parser": "12.0.0",
+        "@angular/cli": "12.0.0",
+        "@angular/compiler-cli": "12.0.0",
+        "@angular/language-service": "12.0.0",
+        "@tailwindcss/aspect-ratio": "0.2.0",
+        "@tailwindcss/line-clamp": "0.2.0",
+        "@tailwindcss/typography": "0.4.0",
         "@types/chroma-js": "2.1.3",
         "@types/crypto-js": "3.1.47",
         "@types/highlight.js": "10.1.0",
         "@types/jasmine": "3.6.11",
-        "@types/lodash": "4.14.170",
+        "@types/lodash": "4.14.169",
         "@types/lodash-es": "4.17.4",
-        "@types/node": "12.20.15",
-        "@typescript-eslint/eslint-plugin": "4.26.1",
-        "@typescript-eslint/parser": "4.26.1",
-        "autoprefixer": "10.2.6",
-        "chroma-js": "2.1.2",
-        "eslint": "7.28.0",
-        "eslint-plugin-import": "2.23.4",
-        "eslint-plugin-jsdoc": "35.2.0",
+        "@types/node": "12.20.13",
+        "@typescript-eslint/eslint-plugin": "4.23.0",
+        "@typescript-eslint/parser": "4.23.0",
+        "autoprefixer": "10.2.5",
+        "chroma-js": "2.1.1",
+        "eslint": "7.26.0",
+        "eslint-plugin-import": "2.23.0",
+        "eslint-plugin-jsdoc": "34.2.2",
         "eslint-plugin-prefer-arrow": "1.2.3",
         "jasmine-core": "3.7.1",
-        "karma": "6.3.4",
+        "jasmine-spec-reporter": "5.0.2",
+        "karma": "6.3.2",
         "karma-chrome-launcher": "3.1.0",
         "karma-coverage": "2.0.3",
         "karma-jasmine": "4.0.1",
         "karma-jasmine-html-reporter": "1.6.0",
         "lodash": "4.17.21",
-        "postcss": "8.3.3",
-        "tailwindcss": "2.1.4",
+        "postcss": "8.2.15",
+        "protractor": "7.0.0",
+        "tailwindcss": "2.1.2",
         "typescript": "4.2.4"
     }
 }

src/@fuse/animations/index.ts

@@ -1 +1 @@
-export * from '@fuse/animations/public-api';
+export * from './public-api';

src/@fuse/animations/public-api.ts

@@ -1,8 +1,8 @@
-import { expandCollapse } from '@fuse/animations/expand-collapse';
-import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from '@fuse/animations/fade';
-import { shake } from '@fuse/animations/shake';
-import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from '@fuse/animations/slide';
-import { zoomIn, zoomOut } from '@fuse/animations/zoom';
+import { expandCollapse } from './expand-collapse';
+import { fadeIn, fadeInBottom, fadeInLeft, fadeInRight, fadeInTop, fadeOut, fadeOutBottom, fadeOutLeft, fadeOutRight, fadeOutTop } from './fade';
+import { shake } from './shake';
+import { slideInBottom, slideInLeft, slideInRight, slideInTop, slideOutBottom, slideOutLeft, slideOutRight, slideOutTop } from './slide';
+import { zoomIn, zoomOut } from './zoom';
 
 export const fuseAnimations = [
     expandCollapse,

src/@fuse/components/date-range/date-range.component.ts

@@ -61,9 +61,9 @@ export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnD
         private _viewContainerRef: ViewContainerRef
     )
     {
-        this._onChange = (): void => {
+        this._onChange = () => {
         };
-        this._onTouched = (): void => {
+        this._onTouched = () => {
         };
         this.dateFormat = 'DD/MM/YYYY';
         this.timeFormat = '12';
@@ -361,7 +361,7 @@ export class FuseDateRangeComponent implements ControlValueAccessor, OnInit, OnD
         this._unsubscribeAll.complete();
 
         // @ TODO: Workaround until "angular/issues/20007" resolved
-        this.writeValue = (): void => {
+        this.writeValue = () => {
         };
     }
 

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

@@ -1,12 +1,7 @@
 <!-- Button -->
 <button
     mat-icon-button
-    [matTooltip]="tooltip || 'Toggle Fullscreen'"
+    [matTooltip]="'Toggle Fullscreen'"
     (click)="toggleFullscreen()">
-    <ng-container [ngTemplateOutlet]="iconTpl || defaultIconTpl"></ng-container>
-</button>
-
-<!-- Default icon -->
-<ng-template #defaultIconTpl>
     <mat-icon [svgIcon]="'heroicons_outline:arrows-expand'"></mat-icon>
-</ng-template>
+</button>

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject, Input, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
 import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fullscreen.types';
 
@@ -11,8 +11,6 @@ import { FSDocument, FSDocumentElement } from '@fuse/components/fullscreen/fulls
 })
 export class FuseFullscreenComponent implements OnInit
 {
-    @Input() iconTpl: TemplateRef<any>;
-    @Input() tooltip: string;
     private _fsDoc: FSDocument;
     private _fsDocEl: FSDocumentElement;
     private _isFullscreen: boolean = false;

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

@@ -3,17 +3,15 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { FuseFullscreenComponent } from '@fuse/components/fullscreen/fullscreen.component';
-import { CommonModule } from '@angular/common';
 
 @NgModule({
     declarations: [
         FuseFullscreenComponent
     ],
-    imports: [
+    imports     : [
         MatButtonModule,
         MatIconModule,
-        MatTooltipModule,
-        CommonModule
+        MatTooltipModule
     ],
     exports     : [
         FuseFullscreenComponent

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

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import hljs from 'highlight.js';
+import * as hljs from 'highlight.js';
 
 @Injectable({
     providedIn: 'root'

src/@fuse/components/masonry/index.ts

@@ -1 +1 @@
-export * from '@fuse/components/masonry/public-api';
+export * from '@fuse/components/card/public-api';

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

@@ -11,7 +11,7 @@
         [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
-        [routerLinkActiveOptions]="isActiveMatchOptions">
+        [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </div>
 
@@ -19,8 +19,7 @@
     <a
         class="fuse-horizontal-navigation-item"
         *ngIf="item.link && item.externalLink && !item.function && !item.disabled"
-        [href]="item.link"
-        [target]="item.target || '_self'">
+        [href]="item.link">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>
 
@@ -40,7 +39,7 @@
         [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
-        [routerLinkActiveOptions]="isActiveMatchOptions"
+        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
         (click)="item.function(item)">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </div>
@@ -50,7 +49,6 @@
         class="fuse-horizontal-navigation-item"
         *ngIf="item.link && item.externalLink && item.function && !item.disabled"
         [href]="item.link"
-        [target]="item.target || '_self'"
         (click)="item.function(item)"
         mat-menu-item>
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>

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

@@ -1,11 +1,9 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { IsActiveMatchOptions } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseHorizontalNavigationComponent } from '@fuse/components/navigation/horizontal/horizontal.component';
 import { FuseNavigationService } from '@fuse/components/navigation/navigation.service';
 import { FuseNavigationItem } from '@fuse/components/navigation/navigation.types';
-import { FuseUtilsService } from '@fuse/services/utils/utils.service';
 
 @Component({
     selector       : 'fuse-horizontal-navigation-basic-item',
@@ -18,7 +16,6 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
     @Input() item: FuseNavigationItem;
     @Input() name: string;
 
-    isActiveMatchOptions: IsActiveMatchOptions;
     private _fuseHorizontalNavigationComponent: FuseHorizontalNavigationComponent;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -27,15 +24,9 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
      */
     constructor(
         private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService,
-        private _fuseUtilsService: FuseUtilsService
+        private _fuseNavigationService: FuseNavigationService
     )
     {
-        // Set the equivalent of {exact: false} as default for active match options.
-        // We are not assigning the item.isActiveMatchOptions directly to the
-        // [routerLinkActiveOptions] because if it's "undefined" initially, the router
-        // will throw an error and stop working.
-        this.isActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions;
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -47,20 +38,9 @@ export class FuseHorizontalNavigationBasicItemComponent implements OnInit, OnDes
      */
     ngOnInit(): void
     {
-        // Set the "isActiveMatchOptions" either from item's
-        // "isActiveMatchOptions" or the equivalent form of
-        // item's "exactMatch" option
-        this.isActiveMatchOptions =
-            this.item.isActiveMatchOptions ?? this.item.exactMatch
-                ? this._fuseUtilsService.exactMatchOptions
-                : this._fuseUtilsService.subsetMatchOptions;
-
         // Get the parent navigation component
         this._fuseHorizontalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
 
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-
         // Subscribe to onRefreshed on the navigation component
         this._fuseHorizontalNavigationComponent.onRefreshed.pipe(
             takeUntil(this._unsubscribeAll)

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

@@ -46,7 +46,7 @@ export class FuseNavigationService
      *
      * @param name
      */
-    getComponent<T>(name: string): T
+    getComponent(name: string): any
     {
         return this._componentRegistry.get(name);
     }

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

@@ -1,5 +1,3 @@
-import { IsActiveMatchOptions } from '@angular/router';
-
 export interface FuseNavigationItem
 {
     id?: string;
@@ -17,14 +15,7 @@ export interface FuseNavigationItem
     disabled?: boolean;
     link?: string;
     externalLink?: boolean;
-    target?:
-        | '_blank'
-        | '_self'
-        | '_parent'
-        | '_top'
-        | string;
     exactMatch?: boolean;
-    isActiveMatchOptions?: IsActiveMatchOptions;
     function?: (item: FuseNavigationItem) => void;
     classes?: {
         title?: string;

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

@@ -11,7 +11,7 @@
         [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-vertical-navigation-item-active'"
-        [routerLinkActiveOptions]="isActiveMatchOptions">
+        [routerLinkActiveOptions]="{exact: item.exactMatch || false}">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>
 
@@ -19,8 +19,7 @@
     <a
         class="fuse-vertical-navigation-item"
         *ngIf="item.link && item.externalLink && !item.function && !item.disabled"
-        [href]="item.link"
-        [target]="item.target || '_self'">
+        [href]="item.link">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>
 
@@ -40,7 +39,7 @@
         [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
         [routerLink]="[item.link]"
         [routerLinkActive]="'fuse-vertical-navigation-item-active'"
-        [routerLinkActiveOptions]="isActiveMatchOptions"
+        [routerLinkActiveOptions]="{exact: item.exactMatch || false}"
         (click)="item.function(item)">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>
@@ -50,7 +49,6 @@
         class="fuse-vertical-navigation-item"
         *ngIf="item.link && item.externalLink && item.function && !item.disabled"
         [href]="item.link"
-        [target]="item.target || '_self'"
         (click)="item.function(item)">
         <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
     </a>

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

@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { IsActiveMatchOptions } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseVerticalNavigationComponent } from '@fuse/components/navigation/vertical/vertical.component';
@@ -18,7 +17,6 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
     @Input() item: FuseNavigationItem;
     @Input() name: string;
 
-    isActiveMatchOptions: IsActiveMatchOptions;
     private _fuseVerticalNavigationComponent: FuseVerticalNavigationComponent;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -31,11 +29,6 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
         private _fuseUtilsService: FuseUtilsService
     )
     {
-        // Set the equivalent of {exact: false} as default for active match options.
-        // We are not assigning the item.isActiveMatchOptions directly to the
-        // [routerLinkActiveOptions] because if it's "undefined" initially, the router
-        // will throw an error and stop working.
-        this.isActiveMatchOptions = this._fuseUtilsService.subsetMatchOptions;
     }
 
     // -----------------------------------------------------------------------------------------------------
@@ -47,20 +40,9 @@ export class FuseVerticalNavigationBasicItemComponent implements OnInit, OnDestr
      */
     ngOnInit(): void
     {
-        // Set the "isActiveMatchOptions" either from item's
-        // "isActiveMatchOptions" or the equivalent form of
-        // item's "exactMatch" option
-        this.isActiveMatchOptions =
-            this.item.isActiveMatchOptions ?? this.item.exactMatch
-                ? this._fuseUtilsService.exactMatchOptions
-                : this._fuseUtilsService.subsetMatchOptions;
-
         // Get the parent navigation component
         this._fuseVerticalNavigationComponent = this._fuseNavigationService.getComponent(this.name);
 
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-
         // Subscribe to onRefreshed on the navigation component
         this._fuseVerticalNavigationComponent.onRefreshed.pipe(
             takeUntil(this._unsubscribeAll)

src/@fuse/components/navigation/vertical/styles/appearances/default.scss

@@ -335,7 +335,6 @@ fuse-vertical-navigation {
         }
 
         > .fuse-vertical-navigation-item-children {
-            margin-top: 6px;
 
             > *:last-child {
                 padding-bottom: 6px;

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

@@ -73,10 +73,10 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
         private _fuseUtilsService: FuseUtilsService
     )
     {
-        this._handleAsideOverlayClick = (): void => {
+        this._handleAsideOverlayClick = () => {
             this.closeAside();
         };
-        this._handleOverlayClick = (): void => {
+        this._handleOverlayClick = () => {
             this.close();
         };
     }

src/@fuse/directives/autogrow/autogrow.directive.ts

@@ -0,0 +1,114 @@
+import { ChangeDetectorRef, Directive, ElementRef, HostBinding, HostListener, Input, NgZone, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Directive({
+    selector: 'textarea[fuseAutogrow]',
+    exportAs: 'fuseAutogrow'
+})
+export class FuseAutogrowDirective implements OnChanges, OnInit, OnDestroy
+{
+    // eslint-disable-next-line @angular-eslint/no-input-rename
+    @Input('fuseAutogrowVerticalPadding') padding: number = 8;
+    @HostBinding('rows') private _rows: number = 1;
+
+    private _height: string = 'auto';
+    private _unsubscribeAll: Subject<any> = new Subject<any>();
+
+    /**
+     * Constructor
+     */
+    constructor(
+        private _elementRef: ElementRef,
+        private _changeDetectorRef: ChangeDetectorRef,
+        private _ngZone: NgZone
+    )
+    {
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Accessors
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Host binding for component inline styles
+     */
+    @HostBinding('style') get styleList(): any
+    {
+        return {
+            'height'  : this._height,
+            'overflow': 'hidden',
+            'resize'  : 'none'
+        };
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Decorated methods
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * Resize on 'input' and 'ngModelChange' events
+     *
+     * @private
+     */
+    @HostListener('input')
+    @HostListener('ngModelChange')
+    private _resize(): void
+    {
+        // This doesn't need to trigger Angular's change detection by itself
+        this._ngZone.runOutsideAngular(() => {
+
+            setTimeout(() => {
+
+                // Set the height to 'auto' so we can correctly read the scrollHeight
+                this._height = 'auto';
+
+                // Detect the changes so the height is applied
+                this._changeDetectorRef.detectChanges();
+
+                // Get the scrollHeight and subtract the vertical padding
+                this._height = `${this._elementRef.nativeElement.scrollHeight - this.padding}px`;
+
+                // Detect the changes one more time to apply the final height
+                this._changeDetectorRef.detectChanges();
+            });
+        });
+    }
+
+    // -----------------------------------------------------------------------------------------------------
+    // @ Lifecycle hooks
+    // -----------------------------------------------------------------------------------------------------
+
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Padding
+        if ( 'fuseAutogrowVerticalPadding' in changes )
+        {
+            // Resize
+            this._resize();
+        }
+    }
+
+    /**
+     * On init
+     */
+    ngOnInit(): void
+    {
+        // Resize for the first time
+        this._resize();
+    }
+
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void
+    {
+        // Unsubscribe from all subscriptions
+        this._unsubscribeAll.next();
+        this._unsubscribeAll.complete();
+    }
+}

src/@fuse/directives/autogrow/autogrow.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { FuseAutogrowDirective } from '@fuse/directives/autogrow/autogrow.directive';
+
+@NgModule({
+    declarations: [
+        FuseAutogrowDirective
+    ],
+    exports     : [
+        FuseAutogrowDirective
+    ]
+})
+export class FuseAutogrowModule
+{
+}

src/@fuse/directives/autogrow/index.ts

@@ -0,0 +1 @@
+export * from '@fuse/directives/autogrow/public-api';

src/@fuse/directives/autogrow/public-api.ts

@@ -0,0 +1,2 @@
+export * from '@fuse/directives/autogrow/autogrow.directive';
+export * from '@fuse/directives/autogrow/autogrow.module';

src/@fuse/directives/scrollbar/scrollbar.directive.ts

@@ -389,7 +389,7 @@ export class FuseScrollbarDirective implements OnChanges, OnInit, OnDestroy
 
             const cosParameter = (oldValue - value) / 2;
 
-            const step = (newTimestamp: number): void => {
+            const step = (newTimestamp: number) => {
                 scrollCount += Math.PI / (speed / (newTimestamp - oldTimestamp));
                 newValue = Math.round(value + cosParameter + cosParameter * Math.cos(scrollCount));
 

src/@fuse/lib/mock-api/mock-api.interceptor.ts

@@ -51,7 +51,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
             delay(handler.delay ?? this._defaultDelay ?? 0),
             switchMap((response) => {
 
-                // If there is no response data,
+                // If there is no response mock-api,
                 // throw an error response
                 if ( !response )
                 {
@@ -64,7 +64,7 @@ export class FuseMockApiInterceptor implements HttpInterceptor
                     return throwError(response);
                 }
 
-                // Parse the response data
+                // Parse the response mock-api
                 const data = {
                     status: response[0],
                     body  : response[1]

src/@fuse/lib/mock-api/mock-api.module.ts

@@ -29,7 +29,7 @@ export class FuseMockApiModule
                 {
                     provide   : APP_INITIALIZER,
                     deps      : [...mockApiServices],
-                    useFactory: () => (): any => null,
+                    useFactory: () => () => null,
                     multi     : true
                 },
                 {

src/@fuse/services/tailwind/index.ts

@@ -1 +1 @@
-export * from '@fuse/services/tailwind/public-api';
+export * from '@fuse/services/media-watcher/public-api';

src/@fuse/services/tailwind/public-api.ts

@@ -1,2 +1,2 @@
-export * from '@fuse/services/tailwind/tailwind.module';
-export * from '@fuse/services/tailwind/tailwind.service';
+export * from '@fuse/services/media-watcher/media-watcher.module';
+export * from '@fuse/services/media-watcher/media-watcher.service';

src/@fuse/services/utils/index.ts

@@ -1 +1 @@
-export * from '@fuse/services/utils/public-api';
+export * from '@fuse/services/config/public-api';

src/@fuse/services/utils/utils.service.ts

@@ -1,5 +1,4 @@
 import { Injectable } from '@angular/core';
-import { IsActiveMatchOptions } from '@angular/router';
 
 @Injectable({
     providedIn: 'root'
@@ -13,36 +12,6 @@ export class FuseUtilsService
     {
     }
 
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Get the equivalent "IsActiveMatchOptions" options for "exact = true".
-     */
-    get exactMatchOptions(): IsActiveMatchOptions
-    {
-        return {
-            paths       : 'exact',
-            fragment    : 'ignored',
-            matrixParams: 'ignored',
-            queryParams : 'exact'
-        };
-    }
-
-    /**
-     * Get the equivalent "IsActiveMatchOptions" options for "exact = false".
-     */
-    get subsetMatchOptions(): IsActiveMatchOptions
-    {
-        return {
-            paths       : 'subset',
-            fragment    : 'ignored',
-            matrixParams: 'ignored',
-            queryParams : 'subset'
-        };
-    }
-
     // -----------------------------------------------------------------------------------------------------
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------

src/@fuse/styles/overrides/angular-material.scss

@@ -178,7 +178,11 @@
 
     /* Add hover and focus style on all buttons */
     .mat-button-focus-overlay {
-        @apply bg-gray-400 bg-opacity-20 dark:bg-black dark:bg-opacity-5 #{'!important'};
+        @apply bg-gray-400 bg-opacity-20 #{'!important'};
+
+        .dark & {
+            background-color: rgba(0, 0, 0, 0.05) !important;
+        }
     }
 
     /* On palette colored buttons, use a darker color */
@@ -249,7 +253,11 @@
 
     /* Add hover and focus styles */
     .mat-button-focus-overlay {
-        @apply bg-gray-400 bg-opacity-20 dark:bg-black dark:bg-opacity-5 #{'!important'};
+        @apply bg-gray-400 bg-opacity-20 #{'!important'};
+
+        .dark & {
+            background-color: rgba(0, 0, 0, 0.05) !important;
+        }
     }
 
     /* On primary colored buttons, use the primary color as focus overlay */
@@ -322,11 +330,19 @@
 
     /* Border color */
     &:not(.mat-button-disabled) {
-        @apply border-gray-300 dark:border-gray-500 #{'!important'};
+        @apply border-gray-300 #{'!important'};
+
+        .dark & {
+            @apply border-gray-500 #{'!important'};
+        }
     }
 
     &.mat-button-disabled {
-        @apply border-gray-200 dark:border-gray-600 #{'!important'};
+        @apply border-gray-200 #{'!important'};
+
+        .dark & {
+            @apply border-gray-600 #{'!important'};
+        }
     }
 }
 
@@ -410,13 +426,6 @@
     font-weight: 500 !important;
 }
 
-/* ----------------------------------------------------------------------------------------------------- */
-/*  @ Dialog
-/* ----------------------------------------------------------------------------------------------------- */
-.mat-dialog-container {
-    border-radius: 16px !important;
-}
-
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Drawer
 /* ----------------------------------------------------------------------------------------------------- */
@@ -533,7 +542,13 @@
             border-radius: 6px;
             padding: 0 16px;
             border-width: 1px;
-            @apply shadow-sm bg-white border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500 #{'!important'};
+            background-color: white;
+            @apply border-gray-300 shadow-sm #{'!important'};
+
+            .dark & {
+                background-color: rgba(0, 0, 0, 0.05) !important;
+                @apply border-gray-500 #{'!important'};
+            }
 
             .mat-form-field-prefix {
 
@@ -618,28 +633,12 @@
                     @apply icon-size-6;
                 }
 
-                /* Make mat-select usable as prefix and suffix */
+                /* Make mat-select usable as */
+                /* prefix and suffix */
                 .mat-select {
                     display: flex;
                     align-items: center;
 
-                    &:focus {
-
-                        .mat-select-trigger {
-
-                            .mat-select-value {
-                                @apply text-primary #{'!important'};
-                            }
-
-                            .mat-select-arrow-wrapper {
-
-                                .mat-select-arrow {
-                                    border-top-color: var(--fuse-primary) !important;
-                                }
-                            }
-                        }
-                    }
-
                     .mat-select-trigger {
                         display: flex;
                         align-items: center;
@@ -664,7 +663,6 @@
 
                             .mat-select-arrow {
                                 min-height: 0;
-                                @apply text-gray-500 dark:text-gray-400 #{'!important'};
                             }
                         }
                     }
@@ -690,8 +688,8 @@
                     align-self: stretch;
                     min-height: 36px;
                     height: auto;
-                    margin: 14px 0;
-                    padding: 0 6px 0 0;
+                    margin: 10px 0;
+                    padding: 4px 6px 4px 0 !important;
                     transform: none;
                 }
 
@@ -1034,7 +1032,11 @@
 
                 .mat-form-field-prefix,
                 .mat-form-field-suffix {
-                    @apply bg-default border-gray-300 dark:border-gray-500 #{'!important'};
+                    @apply border-gray-300 bg-default #{'!important'};
+
+                    .dark & {
+                        @apply border-gray-500 #{'!important'};
+                    }
                 }
             }
         }

src/@fuse/styles/themes.scss

@@ -1,24 +1,21 @@
 @use '~@angular/material' as mat;
 @use "sass:map";
 
-/* Include the core Angular Material styles */
+/** Include the core Angular Material styles */
 @include mat.core();
 
-/* Create a base theme without color.
-    This will globally set the density and typography for all future color themes. */
-@include mat.all-component-themes((
-    color: null,
-    density: -2,
-    typography: mat.define-typography-config(
-        $font-family: theme('fontFamily.sans'),
-        $title: mat.define-typography-level(1.25rem, 2rem, 600),
-        $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
-        $button: mat.define-typography-level(0.875rem, 0.875rem, 500),
-        $input: mat.define-typography-level(0.875rem, 1.2857142857, 400) /* line-height: 20px */
-    )
-));
+/** Configure the Angular Material typography */
+@include mat.all-component-typographies(
+        mat.define-typography-config(
+            $font-family: theme('fontFamily.sans'),
+            $title: mat.define-typography-level(1.25rem, 2rem, 600),
+            $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
+            $button: mat.define-typography-level(0.875rem, 0.875rem, 500),
+            $input: mat.define-typography-level(0.875rem, 1.2857142857, 400) // line-height: 20px
+        )
+);
 
-/* Prepare the Background and Foreground maps */
+/** Prepare the Background and Foreground maps */
 $background-light: (
     status-bar: #CBD5E1, /* blueGray.300 */
     app-bar: #FFFFFF,
@@ -93,7 +90,7 @@ $foreground-dark: (
     slider-off-active: #94A3B8 /* blueGray.400 */
 );
 
-/* Generate Primary, Accent and Warn palettes */
+/** Generate Primary, Accent and Warn palettes */
 $palettes: ();
 @each $name in (primary, accent, warn) {
     $palettes: map.merge($palettes, (#{$name}: (
@@ -129,7 +126,7 @@ $palettes: ();
     )));
 }
 
-/* Generate Angular Material themes. Since we are using CSS Custom Properties,
+/** Generate Angular Material themes. Since we are using CSS Custom Properties,
     we don't have to generate a separate Angular Material theme for each color
     set. We can just create one light and one dark theme and then switch the
     CSS Custom Properties to dynamically switch the colors. */
@@ -147,11 +144,11 @@ body .light {
             is-dark: map.get(map.get($base-light-theme, color), is-dark),
             foreground: $foreground-light,
             background: $background-light
-        )
+        ),
+        density: -2
     );
 
-    /* Use all-component-colors to only generate the colors */
-    @include mat.all-component-colors($light-theme);
+    @include mat.all-component-themes($light-theme);
 }
 
 body.dark,
@@ -168,9 +165,9 @@ body .dark {
             is-dark: map.get(map.get($base-dark-theme, color), is-dark),
             foreground: $foreground-dark,
             background: $background-dark
-        )
+        ),
+        density: -2
     );
 
-    /* Use all-component-colors to only generate the colors */
     @include mat.all-component-colors($dark-theme);
 }

src/@fuse/validators/index.ts

@@ -1 +1 @@
-export * from '@fuse/validators/public-api';
+export * from './public-api';

src/@fuse/validators/public-api.ts

@@ -1 +1 @@
-export * from '@fuse/validators/validators';
+export * from './validators';

src/@fuse/version/fuse-version.ts

@@ -1,3 +1,3 @@
 import { Version } from '@fuse/version/version';
 
-export const FUSE_VERSION = new Version('13.1.0').full;
+export const FUSE_VERSION = new Version('13.0.0').full;

src/app/app.module.ts

@@ -27,18 +27,18 @@ const routerConfig: ExtraOptions = {
         BrowserAnimationsModule,
         RouterModule.forRoot(appRoutes, routerConfig),
 
-        // Fuse, FuseConfig & FuseMockAPI
+        // Fuse & Fuse Mock API
         FuseModule,
         FuseConfigModule.forRoot(appConfig),
         FuseMockApiModule.forRoot(mockApiServices),
 
-        // Core module of your application
+        // Core
         CoreModule,
 
-        // Layout module of your application
+        // Layout
         LayoutModule,
 
-        // 3rd party modules that require global configuration via forRoot
+        // 3rd party modules
         MarkdownModule.forRoot({})
     ],
     bootstrap   : [

src/app/app.resolvers.ts

@@ -1,11 +1,9 @@
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { forkJoin, Observable } from 'rxjs';
-import { MessagesService } from 'app/layout/common/messages/messages.service';
-import { NavigationService } from 'app/core/navigation/navigation.service';
-import { NotificationsService } from 'app/layout/common/notifications/notifications.service';
-import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service';
-import { UserService } from 'app/core/user/user.service';
+import { map } from 'rxjs/operators';
+import { InitialData } from 'app/app.types';
 
 @Injectable({
     providedIn: 'root'
@@ -15,13 +13,7 @@ export class InitialDataResolver implements Resolve<any>
     /**
      * Constructor
      */
-    constructor(
-        private _messagesService: MessagesService,
-        private _navigationService: NavigationService,
-        private _notificationsService: NotificationsService,
-        private _shortcutsService: ShortcutsService,
-        private _userService: UserService
-    )
+    constructor(private _httpClient: HttpClient)
     {
     }
 
@@ -35,15 +27,29 @@ export class InitialDataResolver implements Resolve<any>
      * @param route
      * @param state
      */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InitialData>
     {
         // Fork join multiple API endpoint calls to wait all of them to finish
         return forkJoin([
-            this._navigationService.get(),
-            this._messagesService.getAll(),
-            this._notificationsService.getAll(),
-            this._shortcutsService.getAll(),
-            this._userService.get()
-        ]);
+            this._httpClient.get<any>('api/common/messages'),
+            this._httpClient.get<any>('api/common/navigation'),
+            this._httpClient.get<any>('api/common/notifications'),
+            this._httpClient.get<any>('api/common/shortcuts'),
+            this._httpClient.get<any>('api/common/user')
+        ]).pipe(
+            map(([messages, navigation, notifications, shortcuts, user]) => ({
+                    messages,
+                    navigation: {
+                        compact   : navigation.compact,
+                        default   : navigation.default,
+                        futuristic: navigation.futuristic,
+                        horizontal: navigation.horizontal
+                    },
+                    notifications,
+                    shortcuts,
+                    user
+                })
+            )
+        );
     }
 }

src/app/app.routing.ts

@@ -5,19 +5,18 @@ import { LayoutComponent } from 'app/layout/layout.component';
 import { InitialDataResolver } from 'app/app.resolvers';
 
 // @formatter:off
-/* eslint-disable max-len */
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
+// tslint:disable:max-line-length
 export const appRoutes: Route[] = [
 
-    // Redirect empty path to '/dashboards/project'
-    {path: '', pathMatch : 'full', redirectTo: 'dashboards/project'},
+    // Redirect empty path to '/example'
+    {path: '', pathMatch : 'full', redirectTo: 'example'},
 
-    // Redirect signed in user to the '/dashboards/project'
+    // Redirect signed in user to the '/example'
     //
     // After the user signs in, the sign in page will redirect the user to the 'signed-in-redirect'
     // path. Below is another redirection for that path to redirect the user to the desired
     // location. This is a small convenience to keep all main routes together here on this file.
-    {path: 'signed-in-redirect', pathMatch : 'full', redirectTo: 'dashboards/project'},
+    {path: 'signed-in-redirect', pathMatch : 'full', redirectTo: 'example'},
 
     // Auth routes for guests
     {
@@ -74,132 +73,7 @@ export const appRoutes: Route[] = [
             initialData: InitialDataResolver,
         },
         children   : [
-
-            // Dashboards
-            {path: 'dashboards', children: [
-                {path: 'project', loadChildren: () => import('app/modules/admin/dashboards/project/project.module').then(m => m.ProjectModule)},
-                {path: 'analytics', loadChildren: () => import('app/modules/admin/dashboards/analytics/analytics.module').then(m => m.AnalyticsModule)},
-            ]},
-
-            // Apps
-            {path: 'apps', children: [
-                {path: 'academy', loadChildren: () => import('app/modules/admin/apps/academy/academy.module').then(m => m.AcademyModule)},
-                {path: 'calendar', loadChildren: () => import('app/modules/admin/apps/calendar/calendar.module').then(m => m.CalendarModule)},
-                {path: 'chat', loadChildren: () => import('app/modules/admin/apps/chat/chat.module').then(m => m.ChatModule)},
-                {path: 'contacts', loadChildren: () => import('app/modules/admin/apps/contacts/contacts.module').then(m => m.ContactsModule)},
-                {path: 'ecommerce', loadChildren: () => import('app/modules/admin/apps/ecommerce/ecommerce.module').then(m => m.ECommerceModule)},
-                {path: 'file-manager', loadChildren: () => import('app/modules/admin/apps/file-manager/file-manager.module').then(m => m.FileManagerModule)},
-                {path: 'help-center', loadChildren: () => import('app/modules/admin/apps/help-center/help-center.module').then(m => m.HelpCenterModule)},
-                {path: 'mailbox', loadChildren: () => import('app/modules/admin/apps/mailbox/mailbox.module').then(m => m.MailboxModule)},
-                {path: 'notes', loadChildren: () => import('app/modules/admin/apps/notes/notes.module').then(m => m.NotesModule)},
-                {path: 'scrumboard', loadChildren: () => import('app/modules/admin/apps/scrumboard/scrumboard.module').then(m => m.ScrumboardModule)},
-                {path: 'tasks', loadChildren: () => import('app/modules/admin/apps/tasks/tasks.module').then(m => m.TasksModule)},
-            ]},
-
-            // Pages
-            {path: 'pages', children: [
-
-                // Activities
-                {path: 'activities', loadChildren: () => import('app/modules/admin/pages/activities/activities.module').then(m => m.ActivitiesModule)},
-
-                // Authentication
-                {path: 'authentication', loadChildren: () => import('app/modules/admin/pages/authentication/authentication.module').then(m => m.AuthenticationModule)},
-
-                // Coming soon
-                {path: 'coming-soon', loadChildren: () => import('app/modules/admin/pages/coming-soon/coming-soon.module').then(m => m.ComingSoonModule)},
-
-                // Error
-                {path: 'error', children: [
-                    {path: '404', loadChildren: () => import('app/modules/admin/pages/error/error-404/error-404.module').then(m => m.Error404Module)},
-                    {path: '500', loadChildren: () => import('app/modules/admin/pages/error/error-500/error-500.module').then(m => m.Error500Module)}
-                ]},
-
-                // Invoice
-                {path: 'invoice', children: [
-                    {path: 'printable', children: [
-                        {path: 'compact', loadChildren: () => import('app/modules/admin/pages/invoice/printable/compact/compact.module').then(m => m.CompactModule)},
-                        {path: 'modern', loadChildren: () => import('app/modules/admin/pages/invoice/printable/modern/modern.module').then(m => m.ModernModule)}
-                    ]}
-                ]},
-
-                // Maintenance
-                {path: 'maintenance', loadChildren: () => import('app/modules/admin/pages/maintenance/maintenance.module').then(m => m.MaintenanceModule)},
-
-                // Pricing
-                {path: 'pricing', children: [
-                    {path: 'modern', loadChildren: () => import('app/modules/admin/pages/pricing/modern/modern.module').then(m => m.PricingModernModule)},
-                    {path: 'simple', loadChildren: () => import('app/modules/admin/pages/pricing/simple/simple.module').then(m => m.PricingSimpleModule)},
-                    {path: 'single', loadChildren: () => import('app/modules/admin/pages/pricing/single/single.module').then(m => m.PricingSingleModule)},
-                    {path: 'table', loadChildren: () => import('app/modules/admin/pages/pricing/table/table.module').then(m => m.PricingTableModule)}
-                ]},
-
-                // Profile
-                {path: 'profile', loadChildren: () => import('app/modules/admin/pages/profile/profile.module').then(m => m.ProfileModule)},
-
-                // Settings
-                {path: 'settings', loadChildren: () => import('app/modules/admin/pages/settings/settings.module').then(m => m.SettingsModule)},
-            ]},
-
-            // User interface
-            {path: 'ui', children: [
-
-                // Angular Material
-                {path: 'angular-material', loadChildren: () => import('app/modules/admin/ui/angular-material/angular-material.module').then(m => m.AngularMaterialModule)},
-
-                // TailwindCSS
-                {path: 'tailwindcss', loadChildren: () => import('app/modules/admin/ui/tailwindcss/tailwindcss.module').then(m => m.TailwindCSSModule)},
-
-                // Advanced search
-                {path: 'advanced-search', loadChildren: () => import('app/modules/admin/ui/advanced-search/advanced-search.module').then(m => m.AdvancedSearchModule)},
-
-                // Animations
-                {path: 'animations', loadChildren: () => import('app/modules/admin/ui/animations/animations.module').then(m => m.AnimationsModule)},
-
-                 // Cards
-                {path: 'cards', loadChildren: () => import('app/modules/admin/ui/cards/cards.module').then(m => m.CardsModule)},
-
-                // Colors
-                {path: 'colors', loadChildren: () => import('app/modules/admin/ui/colors/colors.module').then(m => m.ColorsModule)},
-
-                // Datatable
-                {path: 'datatable', loadChildren: () => import('app/modules/admin/ui/datatable/datatable.module').then(m => m.DatatableModule)},
-
-                // Forms
-                {path: 'forms', children: [
-                    {path: 'fields', loadChildren: () => import('app/modules/admin/ui/forms/fields/fields.module').then(m => m.FormsFieldsModule)},
-                    {path: 'layouts', loadChildren: () => import('app/modules/admin/ui/forms/layouts/layouts.module').then(m => m.FormsLayoutsModule)},
-                    {path: 'wizards', loadChildren: () => import('app/modules/admin/ui/forms/wizards/wizards.module').then(m => m.FormsWizardsModule)}
-                ]},
-
-                // Icons
-                {path: 'icons', loadChildren: () => import('app/modules/admin/ui/icons/icons.module').then(m => m.IconsModule)},
-
-                // Page layouts
-                {path: 'page-layouts', loadChildren: () => import('app/modules/admin/ui/page-layouts/page-layouts.module').then(m => m.PageLayoutsModule)},
-
-                // Typography
-                {path: 'typography', loadChildren: () => import('app/modules/admin/ui/typography/typography.module').then(m => m.TypographyModule)}
-            ]},
-
-            // Documentation
-            {path: 'docs', children: [
-
-                // Changelog
-                {path: 'changelog', loadChildren: () => import('app/modules/admin/docs/changelog/changelog.module').then(m => m.ChangelogModule)},
-
-                // Guides
-                {path: 'guides', loadChildren: () => import('app/modules/admin/docs/guides/guides.module').then(m => m.GuidesModule)},
-
-                // Core features
-                {path: 'core-features', loadChildren: () => import('app/modules/admin/docs/core-features/core-features.module').then(m => m.CoreFeaturesModule)},
-
-                // Other components
-                {path: 'other-components', loadChildren: () => import('app/modules/admin/docs/other-components/other-components.module').then(m => m.OtherComponentsModule)},
-            ]},
-
-            // 404 & Catch all
-            {path: '404-not-found', pathMatch: 'full', loadChildren: () => import('app/modules/admin/pages/error/error-404/error-404.module').then(m => m.Error404Module)},
-            {path: '**', redirectTo: '404-not-found'}
+            {path: 'example', loadChildren: () => import('app/modules/admin/example/example.module').then(m => m.ExampleModule)},
         ]
     }
 ];

src/app/app.types.ts

@@ -0,0 +1,19 @@
+import { FuseNavigationItem } from '@fuse/components/navigation';
+import { Message } from 'app/layout/common/messages/messages.types';
+import { Notification } from 'app/layout/common/notifications/notifications.types';
+import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
+import { User } from 'app/core/user/user.model';
+
+export interface InitialData
+{
+    messages: Message[];
+    navigation: {
+        compact: FuseNavigationItem[];
+        default: FuseNavigationItem[];
+        futuristic: FuseNavigationItem[];
+        horizontal: FuseNavigationItem[];
+    };
+    notifications: Notification[];
+    shortcuts: Shortcut[];
+    user: User;
+}

src/app/core/auth/auth.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
-import { AuthService } from 'app/core/auth/auth.service';
-import { AuthInterceptor } from 'app/core/auth/auth.interceptor';
-
-@NgModule({
-    imports  : [
-        HttpClientModule
-    ],
-    providers: [
-        AuthService,
-        {
-            provide : HTTP_INTERCEPTORS,
-            useClass: AuthInterceptor,
-            multi   : true
-        }
-    ]
-})
-export class AuthModule
-{
-}

src/app/core/core.module.ts

@@ -1,13 +1,21 @@
 import { NgModule, Optional, SkipSelf } from '@angular/core';
-import { AuthModule } from 'app/core/auth/auth.module';
-import { IconsModule } from 'app/core/icons/icons.module';
-import { TranslocoCoreModule } from 'app/core/transloco/transloco.module';
+import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MatIconRegistry } from '@angular/material/icon';
+import { AuthService } from 'app/core/auth/auth.service';
+import { AuthInterceptor } from 'app/core/auth/auth.interceptor';
 
 @NgModule({
-    imports: [
-        AuthModule,
-        IconsModule,
-        TranslocoCoreModule
+    imports  : [
+        HttpClientModule
+    ],
+    providers: [
+        AuthService,
+        {
+            provide : HTTP_INTERCEPTORS,
+            useClass: AuthInterceptor,
+            multi   : true
+        }
     ]
 })
 export class CoreModule
@@ -16,6 +24,8 @@ export class CoreModule
      * Constructor
      */
     constructor(
+        private _domSanitizer: DomSanitizer,
+        private _matIconRegistry: MatIconRegistry,
         @Optional() @SkipSelf() parentModule?: CoreModule
     )
     {
@@ -24,5 +34,14 @@ export class CoreModule
         {
             throw new Error('CoreModule has already been loaded. Import this module in the AppModule only.');
         }
+
+        // Register icon sets
+        this._matIconRegistry.addSvgIconSet(this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-twotone.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('mat_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-outline.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('mat_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-solid.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('iconsmind', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/iconsmind.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('feather', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/feather.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('heroicons_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-outline.svg'));
+        this._matIconRegistry.addSvgIconSetInNamespace('heroicons_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-solid.svg'));
     }
 }

src/app/core/icons/icons.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import { MatIconRegistry } from '@angular/material/icon';
-
-@NgModule()
-export class IconsModule
-{
-    /**
-     * Constructor
-     */
-    constructor(
-        private _domSanitizer: DomSanitizer,
-        private _matIconRegistry: MatIconRegistry
-    )
-    {
-        // Register icon sets
-        this._matIconRegistry.addSvgIconSet(this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-twotone.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('mat_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-outline.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('mat_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/material-solid.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('iconsmind', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/iconsmind.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('feather', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/feather.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('heroicons_outline', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-outline.svg'));
-        this._matIconRegistry.addSvgIconSetInNamespace('heroicons_solid', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/icons/heroicons-solid.svg'));
-    }
-}

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

@@ -1,48 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable, ReplaySubject } from 'rxjs';
-import { tap } from 'rxjs/operators';
-import { Navigation } from 'app/core/navigation/navigation.types';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class NavigationService
-{
-    private _navigation: ReplaySubject<Navigation> = new ReplaySubject<Navigation>(1);
-
-    /**
-     * Constructor
-     */
-    constructor(private _httpClient: HttpClient)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Getter for navigation
-     */
-    get navigation$(): Observable<Navigation>
-    {
-        return this._navigation.asObservable();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Get all navigation data
-     */
-    get(): Observable<Navigation>
-    {
-        return this._httpClient.get<Navigation>('api/common/navigation').pipe(
-            tap((navigation) => {
-                this._navigation.next(navigation);
-            })
-        );
-    }
-}

src/app/core/navigation/navigation.types.ts

@@ -1,9 +0,0 @@
-import { FuseNavigationItem } from '@fuse/components/navigation';
-
-export interface Navigation
-{
-    compact: FuseNavigationItem[];
-    default: FuseNavigationItem[];
-    futuristic: FuseNavigationItem[];
-    horizontal: FuseNavigationItem[];
-}

src/app/core/transloco/transloco.http-loader.ts

@@ -1,32 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { Translation, TranslocoLoader } from '@ngneat/transloco';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class TranslocoHttpLoader implements TranslocoLoader
-{
-    /**
-     * Constructor
-     */
-    constructor(
-        private _httpClient: HttpClient)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Get translation
-     *
-     * @param lang
-     */
-    getTranslation(lang: string): Observable<Translation>
-    {
-        return this._httpClient.get<Translation>(`/assets/i18n/${lang}.json`);
-    }
-}

src/app/core/transloco/transloco.module.ts

@@ -1,50 +0,0 @@
-import { Translation, TRANSLOCO_CONFIG, TRANSLOCO_LOADER, translocoConfig, TranslocoModule, TranslocoService } from '@ngneat/transloco';
-import { APP_INITIALIZER, NgModule } from '@angular/core';
-import { environment } from 'environments/environment';
-import { TranslocoHttpLoader } from 'app/core/transloco/transloco.http-loader';
-
-@NgModule({
-    exports  : [
-        TranslocoModule
-    ],
-    providers: [
-        {
-            // Provide the default Transloco configuration
-            provide : TRANSLOCO_CONFIG,
-            useValue: translocoConfig({
-                availableLangs      : [
-                    {
-                        id   : 'en',
-                        label: 'English'
-                    },
-                    {
-                        id   : 'tr',
-                        label: 'Turkish'
-                    }
-                ],
-                defaultLang         : 'en',
-                reRenderOnLangChange: true,
-                prodMode            : environment.production
-            })
-        },
-        {
-            // Provide the default Transloco loader
-            provide : TRANSLOCO_LOADER,
-            useClass: TranslocoHttpLoader
-        },
-        {
-            // Preload the default language before the app starts to prevent empty/jumping content
-            provide   : APP_INITIALIZER,
-            deps      : [TranslocoService],
-            useFactory: (translocoService: TranslocoService): any => (): Promise<Translation> => {
-                const defaultLang = translocoService.getDefaultLang();
-                translocoService.setActiveLang(defaultLang);
-                return translocoService.load(defaultLang).toPromise();
-            },
-            multi     : true
-        }
-    ]
-})
-export class TranslocoCoreModule
-{
-}

src/app/core/user/user.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, ReplaySubject } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
-import { User } from 'app/core/user/user.types';
+import { map } from 'rxjs/operators';
+import { User } from 'app/core/user/user.model';
 
 @Injectable({
     providedIn: 'root'
@@ -42,18 +42,6 @@ export class UserService
     // @ Public methods
     // -----------------------------------------------------------------------------------------------------
 
-    /**
-     * Get the current logged in user data
-     */
-    get(): Observable<User>
-    {
-        return this._httpClient.get<User>('api/common/user').pipe(
-            tap((user) => {
-                this._user.next(user);
-            })
-        );
-    }
-
     /**
      * Update the user
      *
@@ -63,6 +51,7 @@ export class UserService
     {
         return this._httpClient.patch<User>('api/common/user', {user}).pipe(
             map((response) => {
+                // Execute the observable
                 this._user.next(response);
             })
         );

src/app/layout/common/languages/languages.component.html

@@ -1,35 +0,0 @@
-<!-- Button -->
-<button
-    mat-icon-button
-    [matMenuTriggerFor]="languages">
-    <ng-container *ngTemplateOutlet="flagImage; context: {$implicit: activeLang}"></ng-container>
-</button>
-
-<!-- Language menu -->
-<mat-menu
-    [xPosition]="'before'"
-    #languages="matMenu">
-    <ng-container *ngFor="let lang of availableLangs; trackBy: trackByFn">
-        <button
-            mat-menu-item
-            (click)="setActiveLang(lang.id)">
-            <span class="flex items-center">
-                <ng-container *ngTemplateOutlet="flagImage; context: {$implicit: lang.id}"></ng-container>
-                <span class="ml-3">{{lang.label}}</span>
-            </span>
-        </button>
-    </ng-container>
-</mat-menu>
-
-<!-- Flag image template -->
-<ng-template
-    let-lang
-    #flagImage>
-    <span class="relative w-6 shadow rounded-sm overflow-hidden">
-        <span class="absolute inset-0 ring-1 ring-inset ring-black ring-opacity-10"></span>
-        <img
-            class="w-full"
-            [src]="'assets/images/flags/' + flagCodes[lang].toUpperCase() + '.svg'"
-            [alt]="'Flag image for ' + lang">
-    </span>
-</ng-template>

src/app/layout/common/languages/languages.component.ts

@@ -1,153 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { take } from 'rxjs/operators';
-import { AvailableLangs, TranslocoService } from '@ngneat/transloco';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-
-@Component({
-    selector       : 'languages',
-    templateUrl    : './languages.component.html',
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'languages'
-})
-export class LanguagesComponent implements OnInit, OnDestroy
-{
-    availableLangs: AvailableLangs;
-    activeLang: string;
-    flagCodes: any;
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _fuseNavigationService: FuseNavigationService,
-        private _translocoService: TranslocoService
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Get the available languages from transloco
-        this.availableLangs = this._translocoService.getAvailableLangs();
-
-        // Subscribe to language changes
-        this._translocoService.langChanges$.subscribe((activeLang) => {
-
-            // Get the active lang
-            this.activeLang = activeLang;
-
-            // Update the navigation
-            this._updateNavigation(activeLang);
-        });
-
-        // Set the country iso codes for languages for flags
-        this.flagCodes = {
-            'en': 'us',
-            'tr': 'tr'
-        };
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Set the active lang
-     *
-     * @param lang
-     */
-    setActiveLang(lang: string): void
-    {
-        // Set the active lang
-        this._translocoService.setActiveLang(lang);
-    }
-
-    /**
-     * Track by function for ngFor loops
-     *
-     * @param index
-     * @param item
-     */
-    trackByFn(index: number, item: any): any
-    {
-        return item.id || index;
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Update the navigation
-     *
-     * @param lang
-     * @private
-     */
-    private _updateNavigation(lang: string): void
-    {
-        // For the demonstration purposes, we will only update the Dashboard names
-        // from the navigation but you can do a full swap and change the entire
-        // navigation data.
-        //
-        // You can import the data from a file or request it from your backend,
-        // it's up to you.
-
-        // Get the component -> navigation data -> item
-        const navComponent = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>('mainNavigation');
-
-        // Return if the navigation component does not exist
-        if ( !navComponent )
-        {
-            return null;
-        }
-
-        // Get the flat navigation data
-        const navigation = navComponent.navigation;
-
-        // Get the Project dashboard item and update its title
-        const projectDashboardItem = this._fuseNavigationService.getItem('dashboards.project', navigation);
-        if ( projectDashboardItem )
-        {
-            this._translocoService.selectTranslate('Project').pipe(take(1))
-                .subscribe((translation) => {
-
-                    // Set the title
-                    projectDashboardItem.title = translation;
-
-                    // Refresh the navigation component
-                    navComponent.refresh();
-                });
-        }
-
-        // Get the Analytics dashboard item and update its title
-        const analyticsDashboardItem = this._fuseNavigationService.getItem('dashboards.analytics', navigation);
-        if ( analyticsDashboardItem )
-        {
-            this._translocoService.selectTranslate('Analytics').pipe(take(1))
-                .subscribe((translation) => {
-
-                    // Set the title
-                    analyticsDashboardItem.title = translation;
-
-                    // Refresh the navigation component
-                    navComponent.refresh();
-                });
-        }
-    }
-}

src/app/layout/common/languages/languages.module.ts

@@ -1,24 +0,0 @@
-import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { MatMenuModule } from '@angular/material/menu';
-import { LanguagesComponent } from 'app/layout/common/languages/languages.component';
-import { SharedModule } from 'app/shared/shared.module';
-
-@NgModule({
-    declarations: [
-        LanguagesComponent
-    ],
-    imports     : [
-        MatButtonModule,
-        MatIconModule,
-        MatMenuModule,
-        SharedModule
-    ],
-    exports     : [
-        LanguagesComponent
-    ]
-})
-export class LanguagesModule
-{
-}

src/app/layout/common/messages/messages.component.html

@@ -46,7 +46,7 @@
         <!-- Content -->
         <div class="relative flex flex-col flex-auto sm:max-h-120 divide-y overflow-y-auto bg-card">
             <!-- Messages -->
-            <ng-container *ngFor="let message of messages; trackBy: trackByFn">
+            <ng-container *ngFor="let message of messages">
                 <div
                     class="flex group hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
                     [ngClass]="{'unread': !message.read}">

src/app/layout/common/messages/messages.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { MatButton } from '@angular/material/button';
@@ -14,12 +14,12 @@ import { MessagesService } from 'app/layout/common/messages/messages.service';
     changeDetection: ChangeDetectionStrategy.OnPush,
     exportAs       : 'messages'
 })
-export class MessagesComponent implements OnInit, OnDestroy
+export class MessagesComponent implements OnInit, OnChanges, OnDestroy
 {
+    @Input() messages: Message[];
     @ViewChild('messagesOrigin') private _messagesOrigin: MatButton;
     @ViewChild('messagesPanel') private _messagesPanel: TemplateRef<any>;
 
-    messages: Message[];
     unreadCount: number = 0;
     private _overlayRef: OverlayRef;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -40,6 +40,21 @@ export class MessagesComponent implements OnInit, OnDestroy
     // @ Lifecycle hooks
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Messages
+        if ( 'messages' in changes )
+        {
+            // Store the messages on the service
+            this._messagesService.store(changes.messages.currentValue);
+        }
+    }
+
     /**
      * On init
      */
@@ -140,17 +155,6 @@ export class MessagesComponent implements OnInit, OnDestroy
         this._messagesService.delete(message.id).subscribe();
     }
 
-    /**
-     * Track by function for ngFor loops
-     *
-     * @param index
-     * @param item
-     */
-    trackByFn(index: number, item: any): any
-    {
-        return item.id || index;
-    }
-
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------

src/app/layout/common/messages/messages.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, ReplaySubject } from 'rxjs';
 import { Message } from 'app/layout/common/messages/messages.types';
-import { map, switchMap, take, tap } from 'rxjs/operators';
+import { map, switchMap, take } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root'
@@ -35,15 +35,17 @@ export class MessagesService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Get all messages
+     * Store messages on the service
+     *
+     * @param messages
      */
-    getAll(): Observable<Message[]>
+    store(messages: Message[]): Observable<Message[]>
     {
-        return this._httpClient.get<Message[]>('api/common/messages').pipe(
-            tap((messages) => {
-                this._messages.next(messages);
-            })
-        );
+        // Load the messages
+        this._messages.next(messages);
+
+        // Return the messages
+        return this.messages$;
     }
 
     /**

src/app/layout/common/notifications/notifications.component.html

@@ -46,7 +46,7 @@
         <!-- Content -->
         <div class="relative flex flex-col flex-auto sm:max-h-120 divide-y overflow-y-auto bg-card">
             <!-- Notifications -->
-            <ng-container *ngFor="let notification of notifications; trackBy: trackByFn">
+            <ng-container *ngFor="let notification of notifications">
                 <div
                     class="flex group hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
                     [ngClass]="{'unread': !notification.read}">

src/app/layout/common/notifications/notifications.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { MatButton } from '@angular/material/button';
@@ -14,12 +14,12 @@ import { NotificationsService } from 'app/layout/common/notifications/notificati
     changeDetection: ChangeDetectionStrategy.OnPush,
     exportAs       : 'notifications'
 })
-export class NotificationsComponent implements OnInit, OnDestroy
+export class NotificationsComponent implements OnChanges, OnInit, OnDestroy
 {
+    @Input() notifications: Notification[];
     @ViewChild('notificationsOrigin') private _notificationsOrigin: MatButton;
     @ViewChild('notificationsPanel') private _notificationsPanel: TemplateRef<any>;
 
-    notifications: Notification[];
     unreadCount: number = 0;
     private _overlayRef: OverlayRef;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -40,6 +40,21 @@ export class NotificationsComponent implements OnInit, OnDestroy
     // @ Lifecycle hooks
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Notifications
+        if ( 'notifications' in changes )
+        {
+            // Store the notifications on the service
+            this._notificationsService.store(changes.notifications.currentValue);
+        }
+    }
+
     /**
      * On init
      */
@@ -140,17 +155,6 @@ export class NotificationsComponent implements OnInit, OnDestroy
         this._notificationsService.delete(notification.id).subscribe();
     }
 
-    /**
-     * Track by function for ngFor loops
-     *
-     * @param index
-     * @param item
-     */
-    trackByFn(index: number, item: any): any
-    {
-        return item.id || index;
-    }
-
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------

src/app/layout/common/notifications/notifications.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, ReplaySubject } from 'rxjs';
 import { Notification } from 'app/layout/common/notifications/notifications.types';
-import { map, switchMap, take, tap } from 'rxjs/operators';
+import { map, switchMap, take } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root'
@@ -35,15 +35,17 @@ export class NotificationsService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Get all notifications
+     * Store notifications on the service
+     *
+     * @param notifications
      */
-    getAll(): Observable<Notification[]>
+    store(notifications: Notification[]): Observable<Notification[]>
     {
-        return this._httpClient.get<Notification[]>('api/common/notifications').pipe(
-            tap((notifications) => {
-                this._notifications.next(notifications);
-            })
-        );
+        // Load the notifications
+        this._notifications.next(notifications);
+
+        // Return the notifications
+        return this.notifications$;
     }
 
     /**

src/app/layout/common/search/search.component.html

@@ -6,6 +6,7 @@
         (click)="open()">
         <mat-icon [svgIcon]="'heroicons_outline:search'"></mat-icon>
     </button>
+
     <div
         class="absolute inset-0 flex items-center flex-shrink-0 z-99 bg-card"
         *ngIf="opened"
@@ -22,36 +23,22 @@
             (keydown)="onKeydown($event)"
             #barSearchInput>
         <mat-autocomplete
-            class="max-h-128 sm:px-2 border-t rounded-b shadow-md"
+            class="max-h-128 border-t rounded-b shadow-md"
             [disableRipple]="true"
             #matAutocomplete="matAutocomplete">
             <mat-option
-                class="py-0 px-6 text-md pointer-events-none text-secondary bg-transparent"
-                *ngIf="resultSets && !resultSets.length">
+                class="h-14 px-6 py-0 sm:px-8 text-md pointer-events-none text-secondary bg-transparent"
+                *ngIf="results && !results.length">
                 No results found!
             </mat-option>
-            <ng-container *ngFor="let resultSet of resultSets; trackBy: trackByFn">
-                <mat-optgroup class="flex items-center mt-2 px-2">
-                    <span class="text-sm font-semibold tracking-wider text-secondary">{{resultSet.label.toUpperCase()}}</span>
-                </mat-optgroup>
-                <ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn">
-                    <mat-option
-                        class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover"
-                        [routerLink]="result.link">
-                        <!-- Contacts -->
-                        <ng-container *ngIf="resultSet.id === 'contacts'">
-                            <ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container>
-                        </ng-container>
-                        <!-- Pages -->
-                        <ng-container *ngIf="resultSet.id === 'pages'">
-                            <ng-container *ngTemplateOutlet="pageResult; context: {$implicit: result}"></ng-container>
-                        </ng-container>
-                        <!-- Tasks -->
-                        <ng-container *ngIf="resultSet.id === 'tasks'">
-                            <ng-container *ngTemplateOutlet="taskResult; context: {$implicit: result}"></ng-container>
-                        </ng-container>
-                    </mat-option>
-                </ng-container>
+            <ng-container *ngFor="let result of results">
+                <mat-option
+                    class="group relative h-14 px-6 py-0 sm:px-8 text-md"
+                    [routerLink]="result.link">
+                    <ng-container
+                        [ngTemplateOutlet]="searchResult"
+                        [ngTemplateOutletContext]="{$implicit: result}"></ng-container>
+                </mat-option>
             </ng-container>
         </mat-autocomplete>
         <button
@@ -82,89 +69,62 @@
             [disableRipple]="true"
             #matAutocomplete="matAutocomplete">
             <mat-option
-                class="py-0 px-6 text-md pointer-events-none text-secondary bg-transparent"
-                *ngIf="resultSets && !resultSets.length">
+                class="h-14 px-5 py-0 text-md pointer-events-none text-secondary bg-transparent"
+                *ngIf="results && !results.length">
                 No results found!
             </mat-option>
-            <ng-container *ngFor="let resultSet of resultSets; trackBy: trackByFn">
-                <mat-optgroup class="flex items-center mt-2 px-2">
-                    <span class="text-sm font-semibold tracking-wider text-secondary">{{resultSet.label.toUpperCase()}}</span>
-                </mat-optgroup>
-                <ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn">
-                    <mat-option
-                        class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover"
-                        [routerLink]="result.link">
-                        <!-- Contacts -->
-                        <ng-container *ngIf="resultSet.id === 'contacts'">
-                            <ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container>
-                        </ng-container>
-                        <!-- Pages -->
-                        <ng-container *ngIf="resultSet.id === 'pages'">
-                            <ng-container *ngTemplateOutlet="pageResult; context: {$implicit: result}"></ng-container>
-                        </ng-container>
-                        <!-- Tasks -->
-                        <ng-container *ngIf="resultSet.id === 'tasks'">
-                            <ng-container *ngTemplateOutlet="taskResult; context: {$implicit: result}"></ng-container>
-                        </ng-container>
-                    </mat-option>
-                </ng-container>
+            <ng-container *ngFor="let result of results">
+                <mat-option
+                    class="group relative h-14 px-5 py-0 text-md"
+                    [routerLink]="result.link">
+                    <ng-container
+                        [ngTemplateOutlet]="searchResult"
+                        [ngTemplateOutletContext]="{$implicit: result}"></ng-container>
+                </mat-option>
             </ng-container>
         </mat-autocomplete>
     </div>
 </ng-container>
 
-<!-- Contact result template -->
 <ng-template
-    #contactResult
+    #searchResult
     let-result>
-    <div class="flex items-center">
-        <div class="flex flex-shrink-0 items-center justify-center w-8 h-8 rounded-full overflow-hidden bg-primary-100 dark:bg-primary-800">
-            <img
-                *ngIf="result.avatar"
-                [src]="result.avatar">
-            <mat-icon
-                class="m-0 icon-size-5 text-primary dark:text-primary-400"
-                *ngIf="!result.avatar"
-                [svgIcon]="'heroicons_outline:user-circle'"></mat-icon>
-        </div>
-        <div class="ml-3 truncate">
-            <span [innerHTML]="result.name"></span>
-        </div>
-    </div>
-</ng-template>
 
-<!-- Page result template -->
-<ng-template
-    #pageResult
-    let-result>
-    <div class="flex flex-col">
-        <div
-            class="truncate leading-normal"
-            [innerHTML]="result.title"></div>
-        <div class="truncate leading-normal text-sm text-secondary">
-            {{result.link}}
-        </div>
-    </div>
-</ng-template>
+    <!-- Hover indicator -->
+    <div class="absolute inset-y-0 left-0 hidden w-1 bg-primary group-hover:flex"></div>
+
+    <!-- Contact result -->
+    <ng-container *ngIf="result.resultType === 'contact'">
+        <div class="flex items-center">
+            <div class="px-1.5 py-1 mr-4 text-xs font-semibold leading-normal rounded text-indigo-50 bg-indigo-600">Contact</div>
+            <div class="overflow-hidden overflow-ellipsis">
+                <span [innerHTML]="result.title"></span>
+            </div>
+            <div class="flex flex-shrink-0 items-center justify-center w-8 h-8 ml-auto rounded-full overflow-hidden bg-primary-100 dark:bg-black dark:bg-opacity-5">
+                <img
+                    *ngIf="result.avatar"
+                    [src]="result.avatar">
+                <mat-icon
+                    class="m-0 icon-size-5 text-primary"
+                    *ngIf="!result.avatar"
+                    [svgIcon]="'heroicons_outline:user-circle'"></mat-icon>
+            </div>
+        </div>
+    </ng-container>
+
+    <!-- Page result -->
+    <ng-container *ngIf="result.resultType === 'page'">
+        <div class="flex items-center">
+            <div class="px-1.5 py-1 mr-4 text-xs font-semibold leading-normal rounded text-teal-50 bg-teal-600">Page</div>
+            <div class="flex flex-col overflow-hidden overflow-ellipsis">
+                <span
+                    class="overflow-hidden overflow-ellipsis whitespace-nowrap leading-normal"
+                    [innerHTML]="result.title"></span>
+                <span
+                    class="mt-1 text-secondary overflow-hidden overflow-ellipsis whitespace-nowrap leading-normal text-sm no-underline"
+                    [routerLink]="result.link">{{result.link}}</span>
+            </div>
+        </div>
+    </ng-container>
 
-<!-- Task result template -->
-<ng-template
-    #taskResult
-    let-result>
-    <div class="flex items-center">
-        <ng-container *ngIf="result.completed">
-            <mat-icon
-                class="mr-0 text-primary dark:text-primary-400"
-                [svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
-        </ng-container>
-        <ng-container *ngIf="!result.completed">
-            <mat-icon
-                class="mr-0 text-hint"
-                [svgIcon]="'heroicons_outline:check-circle'"></mat-icon>
-        </ng-container>
-        <div
-            class="ml-3 truncate leading-normal"
-            [ngClass]="{'line-through text-hint': result.completed}"
-            [innerHTML]="result.title"></div>
-    </div>
 </ng-template>

src/app/layout/common/search/search.component.ts

@@ -20,7 +20,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
     @Output() search: EventEmitter<any> = new EventEmitter<any>();
 
     opened: boolean = false;
-    resultSets: any[];
+    results: any[];
     searchControl: FormControl = new FormControl();
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -104,12 +104,12 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
                 takeUntil(this._unsubscribeAll),
                 map((value) => {
 
-                    // Set the resultSets to null if there is no value or
+                    // Set the search results to null if there is no value or
                     // the length of the value is smaller than the minLength
                     // so the autocomplete panel can be closed
                     if ( !value || value.length < this.minLength )
                     {
-                        this.resultSets = null;
+                        this.results = null;
                     }
 
                     // Continue
@@ -121,13 +121,13 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
             )
             .subscribe((value) => {
                 this._httpClient.post('api/common/search', {query: value})
-                    .subscribe((resultSets: any) => {
+                    .subscribe((response: any) => {
 
-                        // Store the result sets
-                        this.resultSets = resultSets;
+                        // Store the results
+                        this.results = response.results;
 
                         // Execute the event
-                        this.search.next(resultSets);
+                        this.search.next(this.results);
                     });
             });
     }
@@ -200,15 +200,4 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
         // Close the search
         this.opened = false;
     }
-
-    /**
-     * Track by function for ngFor loops
-     *
-     * @param index
-     * @param item
-     */
-    trackByFn(index: number, item: any): any
-    {
-        return item.id || index;
-    }
 }

src/app/layout/common/search/search.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { BlockScrollStrategy, Overlay } from '@angular/cdk/overlay';
+import { Overlay } from '@angular/cdk/overlay';
 import { MAT_AUTOCOMPLETE_SCROLL_STRATEGY, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -28,7 +28,7 @@ import { SearchComponent } from 'app/layout/common/search/search.component';
     providers   : [
         {
             provide   : MAT_AUTOCOMPLETE_SCROLL_STRATEGY,
-            useFactory: (overlay: Overlay) => (): BlockScrollStrategy => overlay.scrollStrategies.block(),
+            useFactory: (overlay: Overlay) => () => overlay.scrollStrategies.block(),
             deps      : [Overlay]
         }
     ]

src/app/layout/common/shortcuts/shortcuts.component.html

@@ -21,15 +21,7 @@
                         [svgIcon]="'heroicons_solid:x'"></mat-icon>
                 </button>
             </div>
-            <div class="flex items-center text-lg font-medium leading-10">
-                <span class="">Shortcuts</span>
-                <ng-container *ngIf="mode !== 'view'">
-                    <span class="ml-1">
-                        <ng-container *ngIf="mode === 'add'">- Add new</ng-container>
-                        <ng-container *ngIf="mode === 'modify' || mode === 'edit'">- Editing</ng-container>
-                    </span>
-                </ng-container>
-            </div>
+            <div class="text-lg font-medium leading-10">Shortcuts</div>
             <div class="ml-auto">
 
                 <!-- View mode -->
@@ -102,7 +94,7 @@
                 <!-- Shortcuts -->
                 <div class="grid grid-cols-2 grid-flow-row">
                     <!-- Shortcut -->
-                    <ng-container *ngFor="let shortcut of shortcuts; trackBy: trackByFn">
+                    <ng-container *ngFor="let shortcut of shortcuts">
                         <div class="relative group flex flex-col overflow-hidden bg-card border-r border-b even:border-r-0 hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5">
                             <ng-container *ngIf="mode === 'modify'">
                                 <div

src/app/layout/common/shortcuts/shortcuts.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
@@ -15,14 +15,14 @@ import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service'
     changeDetection: ChangeDetectionStrategy.OnPush,
     exportAs       : 'shortcuts'
 })
-export class ShortcutsComponent implements OnInit, OnDestroy
+export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy
 {
+    @Input() shortcuts: Shortcut[];
     @ViewChild('shortcutsOrigin') private _shortcutsOrigin: MatButton;
     @ViewChild('shortcutsPanel') private _shortcutsPanel: TemplateRef<any>;
 
     mode: 'view' | 'modify' | 'add' | 'edit' = 'view';
     shortcutForm: FormGroup;
-    shortcuts: Shortcut[];
     private _overlayRef: OverlayRef;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -43,6 +43,21 @@ export class ShortcutsComponent implements OnInit, OnDestroy
     // @ Lifecycle hooks
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Shortcuts
+        if ( 'shortcuts' in changes )
+        {
+            // Store the shortcuts on the service
+            this._shortcutsService.store(changes.shortcuts.currentValue);
+        }
+    }
+
     /**
      * On init
      */
@@ -161,7 +176,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
      */
     save(): void
     {
-        // Get the data from the form
+        // Get the mock-api from the form
         const shortcut = this.shortcutForm.value;
 
         // If there is an id, update it...
@@ -184,7 +199,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
      */
     delete(): void
     {
-        // Get the data from the form
+        // Get the mock-api from the form
         const shortcut = this.shortcutForm.value;
 
         // Delete
@@ -194,17 +209,6 @@ export class ShortcutsComponent implements OnInit, OnDestroy
         this.mode = 'modify';
     }
 
-    /**
-     * Track by function for ngFor loops
-     *
-     * @param index
-     * @param item
-     */
-    trackByFn(index: number, item: any): any
-    {
-        return item.id || index;
-    }
-
     // -----------------------------------------------------------------------------------------------------
     // @ Private methods
     // -----------------------------------------------------------------------------------------------------

src/app/layout/common/shortcuts/shortcuts.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, ReplaySubject } from 'rxjs';
-import { map, switchMap, take, tap } from 'rxjs/operators';
+import { map, switchMap, take } from 'rxjs/operators';
 import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
 
 @Injectable({
@@ -35,15 +35,17 @@ export class ShortcutsService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Get all messages
+     * Store shortcuts on the service
+     *
+     * @param shortcuts
      */
-    getAll(): Observable<Shortcut[]>
+    store(shortcuts: Shortcut[]): Observable<Shortcut[]>
     {
-        return this._httpClient.get<Shortcut[]>('api/common/shortcuts').pipe(
-            tap((shortcuts) => {
-                this._shortcuts.next(shortcuts);
-            })
-        );
+        // Load the shortcuts
+        this._shortcuts.next(shortcuts);
+
+        // Return the shortcuts
+        return this.shortcuts$;
     }
 
     /**

src/app/layout/common/user-menu/user-menu.component.ts

@@ -3,17 +3,17 @@ import { Router } from '@angular/router';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { User } from 'app/core/user/user.types';
+import { User } from 'app/core/user/user.model';
 import { UserService } from 'app/core/user/user.service';
 
 @Component({
-    selector       : 'user',
-    templateUrl    : './user.component.html',
+    selector       : 'user-menu',
+    templateUrl    : './user-menu.component.html',
     encapsulation  : ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'user'
+    exportAs       : 'userMenu'
 })
-export class UserComponent implements OnInit, OnDestroy
+export class UserMenuComponent implements OnInit, OnDestroy
 {
     /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_showAvatar: BooleanInput;

src/app/layout/common/user-menu/user-menu.module.ts

@@ -3,12 +3,12 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
-import { UserComponent } from 'app/layout/common/user/user.component';
+import { UserMenuComponent } from 'app/layout/common/user-menu/user-menu.component';
 import { SharedModule } from 'app/shared/shared.module';
 
 @NgModule({
     declarations: [
-        UserComponent
+        UserMenuComponent
     ],
     imports     : [
         MatButtonModule,
@@ -18,9 +18,9 @@ import { SharedModule } from 'app/shared/shared.module';
         SharedModule
     ],
     exports     : [
-        UserComponent
+        UserMenuComponent
     ]
 })
-export class UserModule
+export class UserMenuModule
 {
 }

src/app/layout/layout.component.ts

@@ -217,7 +217,7 @@ export class LayoutComponent implements OnInit, OnDestroy
         const paths = route.pathFromRoot;
         paths.forEach((path) => {
 
-            // Check if there is a 'layout' data
+            // Check if there is a 'layout' mock-api
             if ( path.routeConfig && path.routeConfig.data && path.routeConfig.data.layout )
             {
                 // Set the layout

src/app/layout/layouts/horizontal/centered/centered.component.html

@@ -6,7 +6,7 @@
             class="dark bg-gray-900 print:hidden"
             [mode]="'over'"
             [name]="'mainNavigation'"
-            [navigation]="navigation.default"
+            [navigation]="data.navigation.default"
             [opened]="false">
             <!-- Navigation header hook -->
             <ng-container fuseVerticalNavigationContentHeader>
@@ -50,7 +50,7 @@
                 <fuse-horizontal-navigation
                     class="mr-2"
                     [name]="'mainNavigation'"
-                    [navigation]="navigation.horizontal"></fuse-horizontal-navigation>
+                    [navigation]="data.navigation.horizontal"></fuse-horizontal-navigation>
             </ng-container>
             <!-- Navigation toggle button -->
             <ng-container *ngIf="isScreenSmall">
@@ -63,13 +63,12 @@
             </ng-container>
             <!-- Components -->
             <div class="flex items-center pl-2 ml-auto space-x-2">
-                <languages></languages>
                 <fuse-fullscreen></fuse-fullscreen>
                 <search [appearance]="'bar'"></search>
-                <shortcuts></shortcuts>
-                <messages></messages>
-                <notifications></notifications>
-                <user></user>
+                <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
+                <messages [messages]="data.messages"></messages>
+                <notifications [notifications]="data.notifications"></notifications>
+                <user-menu></user-menu>
             </div>
         </div>
 

src/app/layout/layouts/horizontal/centered/centered.component.ts

@@ -3,9 +3,8 @@ import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { FuseNavigationService } from '@fuse/components/navigation';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'centered-layout',
@@ -14,7 +13,7 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class CenteredLayoutComponent implements OnInit, OnDestroy
 {
-    navigation: Navigation;
+    data: InitialData;
     isScreenSmall: boolean;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -24,7 +23,6 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -52,12 +50,10 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route mock-api
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
@@ -91,7 +87,7 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
     toggleNavigation(name: string): void
     {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation = this._fuseNavigationService.getComponent(name);
 
         if ( navigation )
         {

src/app/layout/layouts/horizontal/centered/centered.module.ts

@@ -7,12 +7,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
-import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/centered.component';
 
@@ -29,12 +28,11 @@ import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/horizontal/enterprise/enterprise.component.html

@@ -4,7 +4,7 @@
         class="dark bg-gray-900 print:hidden"
         [mode]="'over'"
         [name]="'mainNavigation'"
-        [navigation]="navigation.default"
+        [navigation]="data.navigation.default"
         [opened]="false">
         <!-- Navigation header hook -->
         <ng-container fuseVerticalNavigationContentHeader>
@@ -46,13 +46,12 @@
                 </ng-container>
                 <!-- Components -->
                 <div class="flex items-center pl-2 ml-auto space-x-2">
-                    <languages></languages>
                     <fuse-fullscreen></fuse-fullscreen>
                     <search [appearance]="'bar'"></search>
-                    <shortcuts></shortcuts>
-                    <messages></messages>
-                    <notifications></notifications>
-                    <user></user>
+                    <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
+                    <messages [messages]="data.messages"></messages>
+                    <notifications [notifications]="data.notifications"></notifications>
+                    <user-menu></user-menu>
                 </div>
             </div>
         </div>
@@ -63,7 +62,7 @@
                     <fuse-horizontal-navigation
                         class="-mx-4"
                         [name]="'mainNavigation'"
-                        [navigation]="navigation.horizontal"></fuse-horizontal-navigation>
+                        [navigation]="data.navigation.horizontal"></fuse-horizontal-navigation>
                 </div>
             </div>
         </ng-container>

src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts

@@ -1,11 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { FuseNavigationService } from '@fuse/components/navigation';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'enterprise-layout',
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class EnterpriseLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -24,7 +23,6 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -52,12 +50,10 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route mock-api
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
@@ -91,7 +87,7 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
     toggleNavigation(name: string): void
     {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation = this._fuseNavigationService.getComponent(name);
 
         if ( navigation )
         {

src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts

@@ -7,12 +7,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
-import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterprise/enterprise.component';
 
@@ -29,12 +28,11 @@ import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterpr
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/horizontal/material/material.component.html

@@ -4,7 +4,7 @@
         class="dark bg-gray-900 print:hidden"
         [mode]="'over'"
         [name]="'mainNavigation'"
-        [navigation]="navigation.default"
+        [navigation]="data.navigation.default"
         [opened]="false">
         <!-- Navigation header hook -->
         <ng-container fuseVerticalNavigationContentHeader>
@@ -52,13 +52,12 @@
                 </ng-container>
                 <!-- Components -->
                 <div class="flex items-center pl-2 ml-auto space-x-2">
-                    <languages></languages>
                     <fuse-fullscreen></fuse-fullscreen>
                     <search [appearance]="'bar'"></search>
-                    <shortcuts></shortcuts>
-                    <messages></messages>
-                    <notifications></notifications>
-                    <user></user>
+                    <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
+                    <messages [messages]="data.messages"></messages>
+                    <notifications [notifications]="data.notifications"></notifications>
+                    <user-menu></user-menu>
                 </div>
             </div>
             <!-- Bottom bar -->
@@ -66,7 +65,7 @@
                 <div class="relative flex flex-auto flex-0 items-center h-16 px-4">
                     <fuse-horizontal-navigation
                         [name]="'mainNavigation'"
-                        [navigation]="navigation.horizontal"></fuse-horizontal-navigation>
+                        [navigation]="data.navigation.horizontal"></fuse-horizontal-navigation>
                 </div>
             </ng-container>
         </div>

src/app/layout/layouts/horizontal/material/material.component.ts

@@ -1,11 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { FuseNavigationService } from '@fuse/components/navigation';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'material-layout',
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class MaterialLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -24,7 +23,6 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -52,12 +50,10 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route mock-api
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
@@ -91,7 +87,7 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
     toggleNavigation(name: string): void
     {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation = this._fuseNavigationService.getComponent(name);
 
         if ( navigation )
         {

src/app/layout/layouts/horizontal/material/material.module.ts

@@ -7,12 +7,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
-import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/material.component';
 
@@ -29,12 +28,11 @@ import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/horizontal/modern/modern.component.html

@@ -4,7 +4,7 @@
         class="dark bg-gray-900 print:hidden"
         [mode]="'over'"
         [name]="'mainNavigation'"
-        [navigation]="navigation.default"
+        [navigation]="data.navigation.default"
         [opened]="false">
         <!-- Navigation header hook -->
         <ng-container fuseVerticalNavigationContentHeader>
@@ -43,7 +43,7 @@
             <fuse-horizontal-navigation
                 class="mr-2"
                 [name]="'mainNavigation'"
-                [navigation]="navigation.horizontal"></fuse-horizontal-navigation>
+                [navigation]="data.navigation.horizontal"></fuse-horizontal-navigation>
         </ng-container>
         <!-- Navigation toggle button -->
         <ng-container *ngIf="isScreenSmall">
@@ -55,13 +55,12 @@
         </ng-container>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts></shortcuts>
-            <messages></messages>
-            <notifications></notifications>
-            <user></user>
+            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
+            <messages [messages]="data.messages"></messages>
+            <notifications [notifications]="data.notifications"></notifications>
+            <user-menu></user-menu>
         </div>
     </div>
 

src/app/layout/layouts/horizontal/modern/modern.component.ts

@@ -1,11 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { FuseNavigationService } from '@fuse/components/navigation';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'modern-layout',
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class ModernLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -24,7 +23,6 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -52,12 +50,10 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route mock-api
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
@@ -91,7 +87,7 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
     toggleNavigation(name: string): void
     {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation = this._fuseNavigationService.getComponent(name);
 
         if ( navigation )
         {

src/app/layout/layouts/horizontal/modern/modern.module.ts

@@ -7,12 +7,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
-import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/modern.component';
 
@@ -29,12 +28,11 @@ import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/mode
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/vertical/classic/classic.component.html

@@ -3,7 +3,7 @@
     class="dark bg-gray-900 print:hidden"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="navigation.default"
+    [navigation]="data.navigation.default"
     [opened]="!isScreenSmall">
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
@@ -36,13 +36,12 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts></shortcuts>
-            <messages></messages>
-            <notifications></notifications>
-            <user></user>
+            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
+            <messages [messages]="data.messages"></messages>
+            <notifications [notifications]="data.notifications"></notifications>
+            <user-menu></user-menu>
         </div>
     </div>
 

src/app/layout/layouts/vertical/classic/classic.component.ts

@@ -1,11 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { FuseNavigationService } from '@fuse/components/navigation';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'classic-layout',
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class ClassicLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -24,7 +23,6 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -52,12 +50,10 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route mock-api
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
@@ -91,7 +87,7 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
     toggleNavigation(name: string): void
     {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation = this._fuseNavigationService.getComponent(name);
 
         if ( navigation )
         {

src/app/layout/layouts/vertical/classic/classic.module.ts

@@ -7,12 +7,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
-import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/classic.component';
 
@@ -29,12 +28,11 @@ import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/clas
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/vertical/classy/classy.component.html

@@ -3,7 +3,7 @@
     class="dark bg-gray-900 print:hidden"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="navigation.default"
+    [navigation]="data.navigation.default"
     [opened]="!isScreenSmall">
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
@@ -16,8 +16,8 @@
             </div>
             <!-- Components -->
             <div class="flex items-center ml-auto">
-                <notifications></notifications>
-                <user [showAvatar]="false"></user>
+                <notifications [notifications]="data.notifications"></notifications>
+                <user-menu [showAvatar]="false"></user-menu>
             </div>
         </div>
         <!-- User -->
@@ -25,20 +25,20 @@
             <div class="relative w-24 h-24">
                 <img
                     class="w-full h-full rounded-full"
-                    *ngIf="user.avatar"
-                    [src]="user.avatar"
+                    *ngIf="data.user.avatar"
+                    [src]="data.user.avatar"
                     alt="User avatar">
                 <mat-icon
                     class="icon-size-24"
-                    *ngIf="!user.avatar"
+                    *ngIf="!data.user.avatar"
                     [svgIcon]="'heroicons_solid:user-circle'"></mat-icon>
             </div>
             <div class="flex flex-col items-center justify-center w-full mt-6">
                 <div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden text-center leading-normal font-medium">
-                    {{user.name}}
+                    {{data.user.name}}
                 </div>
                 <div class="w-full mt-0.5 whitespace-nowrap overflow-ellipsis overflow-hidden text-center text-md leading-normal font-medium text-secondary">
-                    {{user.email}}
+                    {{data.user.email}}
                 </div>
             </div>
         </div>
@@ -66,11 +66,10 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts></shortcuts>
-            <messages></messages>
+            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
+            <messages [messages]="data.messages"></messages>
         </div>
     </div>
 

src/app/layout/layouts/vertical/classy/classy.component.ts

@@ -1,13 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
-import { User } from 'app/core/user/user.types';
-import { UserService } from 'app/core/user/user.service';
+import { FuseNavigationService } from '@fuse/components/navigation';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'classy-layout',
@@ -16,9 +13,8 @@ import { UserService } from 'app/core/user/user.service';
 })
 export class ClassyLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
-    user: User;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -27,8 +23,6 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
-        private _userService: UserService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -56,19 +50,10 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
-
-        // Subscribe to the user service
-        this._userService.user$
-            .pipe((takeUntil(this._unsubscribeAll)))
-            .subscribe((user: User) => {
-                this.user = user;
-            });
+        // Subscribe to the resolved route mock-api
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
@@ -102,7 +87,7 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
     toggleNavigation(name: string): void
     {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation = this._fuseNavigationService.getComponent(name);
 
         if ( navigation )
         {

src/app/layout/layouts/vertical/classy/classy.module.ts

@@ -7,12 +7,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseNavigationModule } from '@fuse/components/navigation';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen/fullscreen.module';
-import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy.component';
 
@@ -29,12 +28,11 @@ import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/vertical/compact/compact.component.html

@@ -4,7 +4,7 @@
     [appearance]="'compact'"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="navigation.compact"
+    [navigation]="data.navigation.compact"
     [opened]="!isScreenSmall">
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
@@ -31,13 +31,12 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts></shortcuts>
-            <messages></messages>
-            <notifications></notifications>
-            <user></user>
+            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
+            <messages [messages]="data.messages"></messages>
+            <notifications [notifications]="data.notifications"></notifications>
+            <user-menu></user-menu>
         </div>
     </div>
 

src/app/layout/layouts/vertical/compact/compact.component.ts

@@ -1,11 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { FuseNavigationService } from '@fuse/components/navigation';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'compact-layout',
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class CompactLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -24,7 +23,6 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -52,12 +50,10 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route mock-api
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
@@ -91,7 +87,7 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
     toggleNavigation(name: string): void
     {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation = this._fuseNavigationService.getComponent(name);
 
         if ( navigation )
         {

src/app/layout/layouts/vertical/compact/compact.module.ts

@@ -7,12 +7,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
-import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/compact.component';
 
@@ -29,12 +28,11 @@ import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/comp
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/vertical/dense/dense.component.html

@@ -4,7 +4,7 @@
     [appearance]="navigationAppearance"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="navigation.default"
+    [navigation]="data.navigation.default"
     [opened]="!isScreenSmall">
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
@@ -40,13 +40,12 @@
         </div>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts></shortcuts>
-            <messages></messages>
-            <notifications></notifications>
-            <user></user>
+            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
+            <messages [messages]="data.messages"></messages>
+            <notifications [notifications]="data.notifications"></notifications>
+            <user-menu></user-menu>
         </div>
     </div>
 

src/app/layout/layouts/vertical/dense/dense.component.ts

@@ -1,11 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { FuseNavigationService } from '@fuse/components/navigation';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'dense-layout',
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class DenseLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
     navigationAppearance: 'default' | 'dense' = 'dense';
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -25,7 +24,6 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -53,12 +51,10 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route mock-api
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
@@ -92,7 +88,7 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
     toggleNavigation(name: string): void
     {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation = this._fuseNavigationService.getComponent(name);
 
         if ( navigation )
         {

src/app/layout/layouts/vertical/dense/dense.module.ts

@@ -7,12 +7,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
-import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.component';
 
@@ -29,12 +28,11 @@ import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.co
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/vertical/futuristic/futuristic.component.html

@@ -3,7 +3,7 @@
     class="dark bg-indigo-800 text-white print:hidden"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="navigation.futuristic"
+    [navigation]="data.navigation.futuristic"
     [opened]="!isScreenSmall">
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationHeader>
@@ -18,10 +18,10 @@
     <ng-container fuseVerticalNavigationFooter>
         <!-- User -->
         <div class="flex items-center w-full px-6 py-8 border-t">
-            <user></user>
+            <user-menu></user-menu>
             <div class="flex flex-col w-full ml-4 overflow-hidden">
                 <div class="w-full whitespace-nowrap overflow-ellipsis overflow-hidden leading-normal text-current opacity-80">
-                    {{user.name}}
+                    {{data.user.name}}
                 </div>
                 <div class="w-full mt-0.5 whitespace-nowrap text-sm overflow-ellipsis overflow-hidden leading-normal text-current opacity-50">
                     brian.hughes@company.com
@@ -45,12 +45,11 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts></shortcuts>
-            <messages></messages>
-            <notifications></notifications>
+            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
+            <messages [messages]="data.messages"></messages>
+            <notifications [notifications]="data.notifications"></notifications>
         </div>
     </div>
 

src/app/layout/layouts/vertical/futuristic/futuristic.component.ts

@@ -1,13 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
-import { User } from 'app/core/user/user.types';
-import { UserService } from 'app/core/user/user.service';
+import { FuseNavigationService } from '@fuse/components/navigation';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'futuristic-layout',
@@ -16,9 +13,8 @@ import { UserService } from 'app/core/user/user.service';
 })
 export class FuturisticLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
-    user: User;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -27,8 +23,6 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
-        private _userService: UserService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -56,19 +50,10 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
-
-        // Subscribe to the user service
-        this._userService.user$
-            .pipe((takeUntil(this._unsubscribeAll)))
-            .subscribe((user: User) => {
-                this.user = user;
-            });
+        // Subscribe to the resolved route mock-api
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
@@ -102,7 +87,7 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
     toggleNavigation(name: string): void
     {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation = this._fuseNavigationService.getComponent(name);
 
         if ( navigation )
         {

src/app/layout/layouts/vertical/futuristic/futuristic.module.ts

@@ -7,12 +7,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
-import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristic/futuristic.component';
 
@@ -29,12 +28,11 @@ import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristi
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

src/app/layout/layouts/vertical/thin/thin.component.html

@@ -4,7 +4,7 @@
     [appearance]="'thin'"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="navigation.compact"
+    [navigation]="data.navigation.compact"
     [opened]="!isScreenSmall">
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
@@ -32,13 +32,12 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts></shortcuts>
-            <messages></messages>
-            <notifications></notifications>
-            <user></user>
+            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
+            <messages [messages]="data.messages"></messages>
+            <notifications [notifications]="data.notifications"></notifications>
+            <user-menu></user-menu>
         </div>
     </div>
 

src/app/layout/layouts/vertical/thin/thin.component.ts

@@ -1,11 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { FuseNavigationService } from '@fuse/components/navigation';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'thin-layout',
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class ThinLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -24,7 +23,6 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -52,12 +50,10 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route mock-api
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
@@ -91,7 +87,7 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
     toggleNavigation(name: string): void
     {
         // Get the navigation
-        const navigation = this._fuseNavigationService.getComponent<FuseVerticalNavigationComponent>(name);
+        const navigation = this._fuseNavigationService.getComponent(name);
 
         if ( navigation )
         {

src/app/layout/layouts/vertical/thin/thin.module.ts

@@ -7,12 +7,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
 import { FuseFullscreenModule } from '@fuse/components/fullscreen';
 import { FuseNavigationModule } from '@fuse/components/navigation';
-import { LanguagesModule } from 'app/layout/common/languages/languages.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.component';
 
@@ -29,12 +28,11 @@ import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.compo
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

src/app/mock-api/apps/contacts/api.ts

@@ -295,12 +295,12 @@ export class ContactsMockApi
                 const reader = new FileReader();
 
                 // Resolve the promise on success
-                reader.onload = (): void => {
+                reader.onload = () => {
                     resolve(reader.result);
                 };
 
                 // Reject the promise on error
-                reader.onerror = (e): void => {
+                reader.onerror = (e) => {
                     reject(e);
                 };