From 9005f08ac73a08b0a7ca974f7c04c120e8c89c1e Mon Sep 17 00:00:00 2001
From: sercan <sercanyemen@gmail.com>
Date: Tue, 8 Jun 2021 17:29:45 +0300
Subject: [PATCH] (app.resolver) Use services to request the initial data
 (layouts) Common components of layouts now requests their data directly from
 their service rather than getting it from route data (core) New navigation
 service to request and store the navigation data

---
 src/app/app.resolvers.ts                      | 44 ++++++++---------
 src/app/app.types.ts                          | 19 --------
 src/app/core/config/app.config.ts             |  2 +-
 src/app/core/navigation/navigation.service.ts | 48 +++++++++++++++++++
 src/app/core/navigation/navigation.types.ts   |  9 ++++
 src/app/core/user/user.service.ts             | 15 +++++-
 .../languages.component.html}                 |  0
 .../languages.component.ts}                   |  8 ++--
 .../languages.module.ts}                      |  8 ++--
 .../common/messages/messages.component.ts     | 21 ++------
 .../common/messages/messages.service.ts       | 18 ++++---
 .../notifications/notifications.component.ts  | 21 ++------
 .../notifications/notifications.service.ts    | 18 ++++---
 .../common/shortcuts/shortcuts.component.html | 10 +++-
 .../common/shortcuts/shortcuts.component.ts   | 21 ++------
 .../common/shortcuts/shortcuts.service.ts     | 18 ++++---
 .../user.component.html}                      |  0
 .../user.component.ts}                        |  8 ++--
 .../user.module.ts}                           |  8 ++--
 .../centered/centered.component.html          | 12 ++---
 .../horizontal/centered/centered.component.ts | 16 ++++---
 .../horizontal/centered/centered.module.ts    |  8 ++--
 .../enterprise/enterprise.component.html      | 12 ++---
 .../enterprise/enterprise.component.ts        | 18 ++++---
 .../enterprise/enterprise.module.ts           |  8 ++--
 .../material/material.component.html          | 12 ++---
 .../horizontal/material/material.component.ts | 18 ++++---
 .../horizontal/material/material.module.ts    |  8 ++--
 .../horizontal/modern/modern.component.html   | 12 ++---
 .../horizontal/modern/modern.component.ts     | 18 ++++---
 .../horizontal/modern/modern.module.ts        |  8 ++--
 .../vertical/classic/classic.component.html   | 12 ++---
 .../vertical/classic/classic.component.ts     | 18 ++++---
 .../vertical/classic/classic.module.ts        |  8 ++--
 .../vertical/classy/classy.component.html     | 22 ++++-----
 .../vertical/classy/classy.component.ts       | 29 ++++++++---
 .../layouts/vertical/classy/classy.module.ts  |  8 ++--
 .../vertical/compact/compact.component.html   | 12 ++---
 .../vertical/compact/compact.component.ts     | 18 ++++---
 .../vertical/compact/compact.module.ts        |  8 ++--
 .../vertical/dense/dense.component.html       | 12 ++---
 .../layouts/vertical/dense/dense.component.ts | 18 ++++---
 .../layouts/vertical/dense/dense.module.ts    |  8 ++--
 .../futuristic/futuristic.component.html      | 14 +++---
 .../futuristic/futuristic.component.ts        | 29 ++++++++---
 .../vertical/futuristic/futuristic.module.ts  |  8 ++--
 .../layouts/vertical/thin/thin.component.html | 12 ++---
 .../layouts/vertical/thin/thin.component.ts   | 18 ++++---
 .../layouts/vertical/thin/thin.module.ts      |  8 ++--
 src/app/mock-api/common/notifications/data.ts | 12 ++---
 src/app/mock-api/common/shortcuts/data.ts     | 12 ++---
 51 files changed, 397 insertions(+), 335 deletions(-)
 delete mode 100644 src/app/app.types.ts
 create mode 100644 src/app/core/navigation/navigation.service.ts
 create mode 100644 src/app/core/navigation/navigation.types.ts
 rename src/app/layout/common/{language/language.component.html => languages/languages.component.html} (100%)
 rename src/app/layout/common/{language/language.component.ts => languages/languages.component.ts} (96%)
 rename src/app/layout/common/{language/language.module.ts => languages/languages.module.ts} (73%)
 rename src/app/layout/common/{user-menu/user-menu.component.html => user/user.component.html} (100%)
 rename src/app/layout/common/{user-menu/user-menu.component.ts => user/user.component.ts} (93%)
 rename src/app/layout/common/{user-menu/user-menu.module.ts => user/user.module.ts} (76%)

diff --git a/src/app/app.resolvers.ts b/src/app/app.resolvers.ts
index 8b95e849..800f0fd0 100644
--- a/src/app/app.resolvers.ts
+++ b/src/app/app.resolvers.ts
@@ -1,9 +1,11 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
 import { forkJoin, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { InitialData } from 'app/app.types';
+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';
 
 @Injectable({
     providedIn: 'root'
@@ -13,7 +15,13 @@ export class InitialDataResolver implements Resolve<any>
     /**
      * Constructor
      */
-    constructor(private _httpClient: HttpClient)
+    constructor(
+        private _messagesService: MessagesService,
+        private _navigationService: NavigationService,
+        private _notificationsService: NotificationsService,
+        private _shortcutsService: ShortcutsService,
+        private _userService: UserService
+    )
     {
     }
 
@@ -27,29 +35,15 @@ export class InitialDataResolver implements Resolve<any>
      * @param route
      * @param state
      */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<InitialData>
+    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>
     {
         // Fork join multiple API endpoint calls to wait all of them to finish
         return forkJoin([
-            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
-                })
-            )
-        );
+            this._navigationService.get(),
+            this._messagesService.getAll(),
+            this._notificationsService.getAll(),
+            this._shortcutsService.getAll(),
+            this._userService.get()
+        ]);
     }
 }
diff --git a/src/app/app.types.ts b/src/app/app.types.ts
deleted file mode 100644
index 547cdb88..00000000
--- a/src/app/app.types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-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.types';
-
-export interface InitialData
-{
-    messages: Message[];
-    navigation: {
-        compact: FuseNavigationItem[];
-        default: FuseNavigationItem[];
-        futuristic: FuseNavigationItem[];
-        horizontal: FuseNavigationItem[];
-    };
-    notifications: Notification[];
-    shortcuts: Shortcut[];
-    user: User;
-}
diff --git a/src/app/core/config/app.config.ts b/src/app/core/config/app.config.ts
index f4a7980b..4abf962c 100644
--- a/src/app/core/config/app.config.ts
+++ b/src/app/core/config/app.config.ts
@@ -24,7 +24,7 @@ export interface AppConfig
  * FuseConfigService and its methods.
  */
 export const appConfig: AppConfig = {
-    layout: 'classy',
+    layout: 'classic',
     scheme: 'light',
     theme : 'default'
 };
diff --git a/src/app/core/navigation/navigation.service.ts b/src/app/core/navigation/navigation.service.ts
new file mode 100644
index 00000000..3f5a61b8
--- /dev/null
+++ b/src/app/core/navigation/navigation.service.ts
@@ -0,0 +1,48 @@
+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);
+            })
+        );
+    }
+}
diff --git a/src/app/core/navigation/navigation.types.ts b/src/app/core/navigation/navigation.types.ts
new file mode 100644
index 00000000..5f061d89
--- /dev/null
+++ b/src/app/core/navigation/navigation.types.ts
@@ -0,0 +1,9 @@
+import { FuseNavigationItem } from '@fuse/components/navigation';
+
+export interface Navigation
+{
+    compact: FuseNavigationItem[];
+    default: FuseNavigationItem[];
+    futuristic: FuseNavigationItem[];
+    horizontal: FuseNavigationItem[];
+}
diff --git a/src/app/core/user/user.service.ts b/src/app/core/user/user.service.ts
index 9791b52e..11aab275 100644
--- a/src/app/core/user/user.service.ts
+++ b/src/app/core/user/user.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable, ReplaySubject } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, tap } from 'rxjs/operators';
 import { User } from 'app/core/user/user.types';
 
 @Injectable({
@@ -42,6 +42,18 @@ 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
      *
@@ -51,7 +63,6 @@ export class UserService
     {
         return this._httpClient.patch<User>('api/common/user', {user}).pipe(
             map((response) => {
-                // Execute the observable
                 this._user.next(response);
             })
         );
diff --git a/src/app/layout/common/language/language.component.html b/src/app/layout/common/languages/languages.component.html
similarity index 100%
rename from src/app/layout/common/language/language.component.html
rename to src/app/layout/common/languages/languages.component.html
diff --git a/src/app/layout/common/language/language.component.ts b/src/app/layout/common/languages/languages.component.ts
similarity index 96%
rename from src/app/layout/common/language/language.component.ts
rename to src/app/layout/common/languages/languages.component.ts
index 24526937..5b44986f 100644
--- a/src/app/layout/common/language/language.component.ts
+++ b/src/app/layout/common/languages/languages.component.ts
@@ -4,13 +4,13 @@ import { AvailableLangs, TranslocoService } from '@ngneat/transloco';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 
 @Component({
-    selector       : 'language',
-    templateUrl    : './language.component.html',
+    selector       : 'languages',
+    templateUrl    : './languages.component.html',
     encapsulation  : ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'language'
+    exportAs       : 'languages'
 })
-export class LanguageComponent implements OnInit, OnDestroy
+export class LanguagesComponent implements OnInit, OnDestroy
 {
     availableLangs: AvailableLangs;
     activeLang: string;
diff --git a/src/app/layout/common/language/language.module.ts b/src/app/layout/common/languages/languages.module.ts
similarity index 73%
rename from src/app/layout/common/language/language.module.ts
rename to src/app/layout/common/languages/languages.module.ts
index 7c0e3fbe..4393a9a8 100644
--- a/src/app/layout/common/language/language.module.ts
+++ b/src/app/layout/common/languages/languages.module.ts
@@ -2,12 +2,12 @@ import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
-import { LanguageComponent } from 'app/layout/common/language/language.component';
+import { LanguagesComponent } from 'app/layout/common/languages/languages.component';
 import { SharedModule } from 'app/shared/shared.module';
 
 @NgModule({
     declarations: [
-        LanguageComponent
+        LanguagesComponent
     ],
     imports     : [
         MatButtonModule,
@@ -16,9 +16,9 @@ import { SharedModule } from 'app/shared/shared.module';
         SharedModule
     ],
     exports     : [
-        LanguageComponent
+        LanguagesComponent
     ]
 })
-export class LanguageModule
+export class LanguagesModule
 {
 }
diff --git a/src/app/layout/common/messages/messages.component.ts b/src/app/layout/common/messages/messages.component.ts
index 454247b7..fc0af5a9 100644
--- a/src/app/layout/common/messages/messages.component.ts
+++ b/src/app/layout/common/messages/messages.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, 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, OnChanges, OnDestroy
+export class MessagesComponent implements OnInit, 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,21 +40,6 @@ export class MessagesComponent implements OnInit, OnChanges, 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
      */
diff --git a/src/app/layout/common/messages/messages.service.ts b/src/app/layout/common/messages/messages.service.ts
index 63d7621b..5e125c70 100644
--- a/src/app/layout/common/messages/messages.service.ts
+++ b/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 } from 'rxjs/operators';
+import { map, switchMap, take, tap } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root'
@@ -35,17 +35,15 @@ export class MessagesService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Store messages on the service
-     *
-     * @param messages
+     * Get all messages
      */
-    store(messages: Message[]): Observable<Message[]>
+    getAll(): Observable<Message[]>
     {
-        // Load the messages
-        this._messages.next(messages);
-
-        // Return the messages
-        return this.messages$;
+        return this._httpClient.get<Message[]>('api/common/messages').pipe(
+            tap((messages) => {
+                this._messages.next(messages);
+            })
+        );
     }
 
     /**
diff --git a/src/app/layout/common/notifications/notifications.component.ts b/src/app/layout/common/notifications/notifications.component.ts
index 6682e0de..5a0fc615 100644
--- a/src/app/layout/common/notifications/notifications.component.ts
+++ b/src/app/layout/common/notifications/notifications.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, 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 OnChanges, OnInit, OnDestroy
+export class NotificationsComponent implements 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,21 +40,6 @@ export class NotificationsComponent implements OnChanges, 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
      */
diff --git a/src/app/layout/common/notifications/notifications.service.ts b/src/app/layout/common/notifications/notifications.service.ts
index d904197a..5da09dfc 100644
--- a/src/app/layout/common/notifications/notifications.service.ts
+++ b/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 } from 'rxjs/operators';
+import { map, switchMap, take, tap } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root'
@@ -35,17 +35,15 @@ export class NotificationsService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Store notifications on the service
-     *
-     * @param notifications
+     * Get all notifications
      */
-    store(notifications: Notification[]): Observable<Notification[]>
+    getAll(): Observable<Notification[]>
     {
-        // Load the notifications
-        this._notifications.next(notifications);
-
-        // Return the notifications
-        return this.notifications$;
+        return this._httpClient.get<Notification[]>('api/common/notifications').pipe(
+            tap((notifications) => {
+                this._notifications.next(notifications);
+            })
+        );
     }
 
     /**
diff --git a/src/app/layout/common/shortcuts/shortcuts.component.html b/src/app/layout/common/shortcuts/shortcuts.component.html
index b0106838..d4bca407 100644
--- a/src/app/layout/common/shortcuts/shortcuts.component.html
+++ b/src/app/layout/common/shortcuts/shortcuts.component.html
@@ -21,7 +21,15 @@
                         [svgIcon]="'heroicons_solid:x'"></mat-icon>
                 </button>
             </div>
-            <div class="text-lg font-medium leading-10">Shortcuts</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="ml-auto">
 
                 <!-- View mode -->
diff --git a/src/app/layout/common/shortcuts/shortcuts.component.ts b/src/app/layout/common/shortcuts/shortcuts.component.ts
index 20598f1d..99237746 100644
--- a/src/app/layout/common/shortcuts/shortcuts.component.ts
+++ b/src/app/layout/common/shortcuts/shortcuts.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, 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 OnChanges, OnInit, OnDestroy
+export class ShortcutsComponent implements 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,21 +43,6 @@ export class ShortcutsComponent implements OnChanges, 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
      */
diff --git a/src/app/layout/common/shortcuts/shortcuts.service.ts b/src/app/layout/common/shortcuts/shortcuts.service.ts
index 01f128f5..e2b045a0 100644
--- a/src/app/layout/common/shortcuts/shortcuts.service.ts
+++ b/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 } from 'rxjs/operators';
+import { map, switchMap, take, tap } from 'rxjs/operators';
 import { Shortcut } from 'app/layout/common/shortcuts/shortcuts.types';
 
 @Injectable({
@@ -35,17 +35,15 @@ export class ShortcutsService
     // -----------------------------------------------------------------------------------------------------
 
     /**
-     * Store shortcuts on the service
-     *
-     * @param shortcuts
+     * Get all messages
      */
-    store(shortcuts: Shortcut[]): Observable<Shortcut[]>
+    getAll(): Observable<Shortcut[]>
     {
-        // Load the shortcuts
-        this._shortcuts.next(shortcuts);
-
-        // Return the shortcuts
-        return this.shortcuts$;
+        return this._httpClient.get<Shortcut[]>('api/common/shortcuts').pipe(
+            tap((shortcuts) => {
+                this._shortcuts.next(shortcuts);
+            })
+        );
     }
 
     /**
diff --git a/src/app/layout/common/user-menu/user-menu.component.html b/src/app/layout/common/user/user.component.html
similarity index 100%
rename from src/app/layout/common/user-menu/user-menu.component.html
rename to src/app/layout/common/user/user.component.html
diff --git a/src/app/layout/common/user-menu/user-menu.component.ts b/src/app/layout/common/user/user.component.ts
similarity index 93%
rename from src/app/layout/common/user-menu/user-menu.component.ts
rename to src/app/layout/common/user/user.component.ts
index 6e7b980f..6fabe8dc 100644
--- a/src/app/layout/common/user-menu/user-menu.component.ts
+++ b/src/app/layout/common/user/user.component.ts
@@ -7,13 +7,13 @@ import { User } from 'app/core/user/user.types';
 import { UserService } from 'app/core/user/user.service';
 
 @Component({
-    selector       : 'user-menu',
-    templateUrl    : './user-menu.component.html',
+    selector       : 'user',
+    templateUrl    : './user.component.html',
     encapsulation  : ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'userMenu'
+    exportAs       : 'user'
 })
-export class UserMenuComponent implements OnInit, OnDestroy
+export class UserComponent implements OnInit, OnDestroy
 {
     /* eslint-disable @typescript-eslint/naming-convention */
     static ngAcceptInputType_showAvatar: BooleanInput;
diff --git a/src/app/layout/common/user-menu/user-menu.module.ts b/src/app/layout/common/user/user.module.ts
similarity index 76%
rename from src/app/layout/common/user-menu/user-menu.module.ts
rename to src/app/layout/common/user/user.module.ts
index d7ded69a..5cd0d06b 100644
--- a/src/app/layout/common/user-menu/user-menu.module.ts
+++ b/src/app/layout/common/user/user.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 { UserMenuComponent } from 'app/layout/common/user-menu/user-menu.component';
+import { UserComponent } from 'app/layout/common/user/user.component';
 import { SharedModule } from 'app/shared/shared.module';
 
 @NgModule({
     declarations: [
-        UserMenuComponent
+        UserComponent
     ],
     imports     : [
         MatButtonModule,
@@ -18,9 +18,9 @@ import { SharedModule } from 'app/shared/shared.module';
         SharedModule
     ],
     exports     : [
-        UserMenuComponent
+        UserComponent
     ]
 })
-export class UserMenuModule
+export class UserModule
 {
 }
diff --git a/src/app/layout/layouts/horizontal/centered/centered.component.html b/src/app/layout/layouts/horizontal/centered/centered.component.html
index cb5344bc..5f0c4280 100644
--- a/src/app/layout/layouts/horizontal/centered/centered.component.html
+++ b/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]="data.navigation.default"
+            [navigation]="navigation.default"
             [opened]="false">
             <!-- Navigation header hook -->
             <ng-container fuseVerticalNavigationContentHeader>
@@ -63,13 +63,13 @@
             </ng-container>
             <!-- Components -->
             <div class="flex items-center pl-2 ml-auto space-x-2">
-                <language></language>
+                <languages></languages>
                 <fuse-fullscreen></fuse-fullscreen>
                 <search [appearance]="'bar'"></search>
-                <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-                <messages [messages]="data.messages"></messages>
-                <notifications [notifications]="data.notifications"></notifications>
-                <user-menu></user-menu>
+                <shortcuts></shortcuts>
+                <messages></messages>
+                <notifications></notifications>
+                <user></user>
             </div>
         </div>
 
diff --git a/src/app/layout/layouts/horizontal/centered/centered.component.ts b/src/app/layout/layouts/horizontal/centered/centered.component.ts
index 94b0f5dc..c32f77c6 100644
--- a/src/app/layout/layouts/horizontal/centered/centered.component.ts
+++ b/src/app/layout/layouts/horizontal/centered/centered.component.ts
@@ -4,7 +4,8 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'centered-layout',
@@ -13,7 +14,7 @@ import { InitialData } from 'app/app.types';
 })
 export class CenteredLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
+    navigation: Navigation;
     isScreenSmall: boolean;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -23,6 +24,7 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -50,10 +52,12 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
diff --git a/src/app/layout/layouts/horizontal/centered/centered.module.ts b/src/app/layout/layouts/horizontal/centered/centered.module.ts
index 4a93eefb..b1d952f4 100644
--- a/src/app/layout/layouts/horizontal/centered/centered.module.ts
+++ b/src/app/layout/layouts/horizontal/centered/centered.module.ts
@@ -7,12 +7,12 @@ 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 { LanguageModule } from 'app/layout/common/language/language.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/centered.component';
 
@@ -29,12 +29,12 @@ import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [
diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html
index cd2dafc0..19ebe5b5 100644
--- a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.html
+++ b/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]="data.navigation.default"
+        [navigation]="navigation.default"
         [opened]="false">
         <!-- Navigation header hook -->
         <ng-container fuseVerticalNavigationContentHeader>
@@ -46,13 +46,13 @@
                 </ng-container>
                 <!-- Components -->
                 <div class="flex items-center pl-2 ml-auto space-x-2">
-                    <language></language>
+                    <languages></languages>
                     <fuse-fullscreen></fuse-fullscreen>
                     <search [appearance]="'bar'"></search>
-                    <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-                    <messages [messages]="data.messages"></messages>
-                    <notifications [notifications]="data.notifications"></notifications>
-                    <user-menu></user-menu>
+                    <shortcuts></shortcuts>
+                    <messages></messages>
+                    <notifications></notifications>
+                    <user></user>
                 </div>
             </div>
         </div>
diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts
index 6d5705a7..f28f035c 100644
--- a/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts
+++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.component.ts
@@ -1,10 +1,11 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'enterprise-layout',
@@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
 })
 export class EnterpriseLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +24,7 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -50,10 +52,12 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
diff --git a/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts b/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts
index b930680c..72678fd8 100644
--- a/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts
+++ b/src/app/layout/layouts/horizontal/enterprise/enterprise.module.ts
@@ -7,12 +7,12 @@ 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 { LanguageModule } from 'app/layout/common/language/language.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterprise/enterprise.component';
 
@@ -29,12 +29,12 @@ import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterpr
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [
diff --git a/src/app/layout/layouts/horizontal/material/material.component.html b/src/app/layout/layouts/horizontal/material/material.component.html
index 95842048..70524615 100644
--- a/src/app/layout/layouts/horizontal/material/material.component.html
+++ b/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]="data.navigation.default"
+        [navigation]="navigation.default"
         [opened]="false">
         <!-- Navigation header hook -->
         <ng-container fuseVerticalNavigationContentHeader>
@@ -52,13 +52,13 @@
                 </ng-container>
                 <!-- Components -->
                 <div class="flex items-center pl-2 ml-auto space-x-2">
-                    <language></language>
+                    <languages></languages>
                     <fuse-fullscreen></fuse-fullscreen>
                     <search [appearance]="'bar'"></search>
-                    <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-                    <messages [messages]="data.messages"></messages>
-                    <notifications [notifications]="data.notifications"></notifications>
-                    <user-menu></user-menu>
+                    <shortcuts></shortcuts>
+                    <messages></messages>
+                    <notifications></notifications>
+                    <user></user>
                 </div>
             </div>
             <!-- Bottom bar -->
diff --git a/src/app/layout/layouts/horizontal/material/material.component.ts b/src/app/layout/layouts/horizontal/material/material.component.ts
index 71478603..071ffd6b 100644
--- a/src/app/layout/layouts/horizontal/material/material.component.ts
+++ b/src/app/layout/layouts/horizontal/material/material.component.ts
@@ -1,10 +1,11 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'material-layout',
@@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
 })
 export class MaterialLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +24,7 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -50,10 +52,12 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
diff --git a/src/app/layout/layouts/horizontal/material/material.module.ts b/src/app/layout/layouts/horizontal/material/material.module.ts
index 778cd49e..65d875f7 100644
--- a/src/app/layout/layouts/horizontal/material/material.module.ts
+++ b/src/app/layout/layouts/horizontal/material/material.module.ts
@@ -7,12 +7,12 @@ 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 { LanguageModule } from 'app/layout/common/language/language.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/material.component';
 
@@ -29,12 +29,12 @@ import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [
diff --git a/src/app/layout/layouts/horizontal/modern/modern.component.html b/src/app/layout/layouts/horizontal/modern/modern.component.html
index 65a7690d..63654346 100644
--- a/src/app/layout/layouts/horizontal/modern/modern.component.html
+++ b/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]="data.navigation.default"
+        [navigation]="navigation.default"
         [opened]="false">
         <!-- Navigation header hook -->
         <ng-container fuseVerticalNavigationContentHeader>
@@ -55,13 +55,13 @@
         </ng-container>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <language></language>
+            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-            <messages [messages]="data.messages"></messages>
-            <notifications [notifications]="data.notifications"></notifications>
-            <user-menu></user-menu>
+            <shortcuts></shortcuts>
+            <messages></messages>
+            <notifications></notifications>
+            <user></user>
         </div>
     </div>
 
diff --git a/src/app/layout/layouts/horizontal/modern/modern.component.ts b/src/app/layout/layouts/horizontal/modern/modern.component.ts
index d103b7b8..0f2fb2a2 100644
--- a/src/app/layout/layouts/horizontal/modern/modern.component.ts
+++ b/src/app/layout/layouts/horizontal/modern/modern.component.ts
@@ -1,10 +1,11 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'modern-layout',
@@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
 })
 export class ModernLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +24,7 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -50,10 +52,12 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
diff --git a/src/app/layout/layouts/horizontal/modern/modern.module.ts b/src/app/layout/layouts/horizontal/modern/modern.module.ts
index 413ba425..b95a0e2f 100644
--- a/src/app/layout/layouts/horizontal/modern/modern.module.ts
+++ b/src/app/layout/layouts/horizontal/modern/modern.module.ts
@@ -7,12 +7,12 @@ 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 { LanguageModule } from 'app/layout/common/language/language.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/modern.component';
 
@@ -29,12 +29,12 @@ import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/mode
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [
diff --git a/src/app/layout/layouts/vertical/classic/classic.component.html b/src/app/layout/layouts/vertical/classic/classic.component.html
index ce44ef57..b597b8a6 100644
--- a/src/app/layout/layouts/vertical/classic/classic.component.html
+++ b/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]="data.navigation.default"
+    [navigation]="navigation.default"
     [opened]="!isScreenSmall">
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
@@ -36,13 +36,13 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <language></language>
+            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-            <messages [messages]="data.messages"></messages>
-            <notifications [notifications]="data.notifications"></notifications>
-            <user-menu></user-menu>
+            <shortcuts></shortcuts>
+            <messages></messages>
+            <notifications></notifications>
+            <user></user>
         </div>
     </div>
 
diff --git a/src/app/layout/layouts/vertical/classic/classic.component.ts b/src/app/layout/layouts/vertical/classic/classic.component.ts
index 39687b25..8f9ad2ab 100644
--- a/src/app/layout/layouts/vertical/classic/classic.component.ts
+++ b/src/app/layout/layouts/vertical/classic/classic.component.ts
@@ -1,10 +1,11 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'classic-layout',
@@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
 })
 export class ClassicLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +24,7 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -50,10 +52,12 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
diff --git a/src/app/layout/layouts/vertical/classic/classic.module.ts b/src/app/layout/layouts/vertical/classic/classic.module.ts
index b982527a..b6aa4064 100644
--- a/src/app/layout/layouts/vertical/classic/classic.module.ts
+++ b/src/app/layout/layouts/vertical/classic/classic.module.ts
@@ -7,12 +7,12 @@ 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 { LanguageModule } from 'app/layout/common/language/language.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/classic.component';
 
@@ -29,12 +29,12 @@ import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/clas
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [
diff --git a/src/app/layout/layouts/vertical/classy/classy.component.html b/src/app/layout/layouts/vertical/classy/classy.component.html
index 608c966e..02dcc2f5 100644
--- a/src/app/layout/layouts/vertical/classy/classy.component.html
+++ b/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]="data.navigation.default"
+    [navigation]="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]="data.notifications"></notifications>
-                <user-menu [showAvatar]="false"></user-menu>
+                <notifications></notifications>
+                <user [showAvatar]="false"></user>
             </div>
         </div>
         <!-- User -->
@@ -25,20 +25,20 @@
             <div class="relative w-24 h-24">
                 <img
                     class="w-full h-full rounded-full"
-                    *ngIf="data.user.avatar"
-                    [src]="data.user.avatar"
+                    *ngIf="user.avatar"
+                    [src]="user.avatar"
                     alt="User avatar">
                 <mat-icon
                     class="icon-size-24"
-                    *ngIf="!data.user.avatar"
+                    *ngIf="!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">
-                    {{data.user.name}}
+                    {{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">
-                    {{data.user.email}}
+                    {{user.email}}
                 </div>
             </div>
         </div>
@@ -66,11 +66,11 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <language></language>
+            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-            <messages [messages]="data.messages"></messages>
+            <shortcuts></shortcuts>
+            <messages></messages>
         </div>
     </div>
 
diff --git a/src/app/layout/layouts/vertical/classy/classy.component.ts b/src/app/layout/layouts/vertical/classy/classy.component.ts
index 231922ad..63847083 100644
--- a/src/app/layout/layouts/vertical/classy/classy.component.ts
+++ b/src/app/layout/layouts/vertical/classy/classy.component.ts
@@ -1,10 +1,13 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+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';
 
 @Component({
     selector     : 'classy-layout',
@@ -13,8 +16,9 @@ import { InitialData } from 'app/app.types';
 })
 export class ClassyLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
+    user: User;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +27,8 @@ 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
     )
@@ -50,10 +56,19 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // 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 media changes
         this._fuseMediaWatcherService.onMediaChange$
diff --git a/src/app/layout/layouts/vertical/classy/classy.module.ts b/src/app/layout/layouts/vertical/classy/classy.module.ts
index 482738ec..f9e35260 100644
--- a/src/app/layout/layouts/vertical/classy/classy.module.ts
+++ b/src/app/layout/layouts/vertical/classy/classy.module.ts
@@ -7,12 +7,12 @@ 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 { LanguageModule } from 'app/layout/common/language/language.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy.component';
 
@@ -29,12 +29,12 @@ import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [
diff --git a/src/app/layout/layouts/vertical/compact/compact.component.html b/src/app/layout/layouts/vertical/compact/compact.component.html
index e7edd79a..10e7d09a 100644
--- a/src/app/layout/layouts/vertical/compact/compact.component.html
+++ b/src/app/layout/layouts/vertical/compact/compact.component.html
@@ -4,7 +4,7 @@
     [appearance]="'compact'"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="data.navigation.compact"
+    [navigation]="navigation.compact"
     [opened]="!isScreenSmall">
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
@@ -31,13 +31,13 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <language></language>
+            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-            <messages [messages]="data.messages"></messages>
-            <notifications [notifications]="data.notifications"></notifications>
-            <user-menu></user-menu>
+            <shortcuts></shortcuts>
+            <messages></messages>
+            <notifications></notifications>
+            <user></user>
         </div>
     </div>
 
diff --git a/src/app/layout/layouts/vertical/compact/compact.component.ts b/src/app/layout/layouts/vertical/compact/compact.component.ts
index 4616d2f3..7fc6696c 100644
--- a/src/app/layout/layouts/vertical/compact/compact.component.ts
+++ b/src/app/layout/layouts/vertical/compact/compact.component.ts
@@ -1,10 +1,11 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'compact-layout',
@@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
 })
 export class CompactLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +24,7 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -50,10 +52,12 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
diff --git a/src/app/layout/layouts/vertical/compact/compact.module.ts b/src/app/layout/layouts/vertical/compact/compact.module.ts
index 54d5560f..6ef0cfeb 100644
--- a/src/app/layout/layouts/vertical/compact/compact.module.ts
+++ b/src/app/layout/layouts/vertical/compact/compact.module.ts
@@ -7,12 +7,12 @@ 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 { LanguageModule } from 'app/layout/common/language/language.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/compact.component';
 
@@ -29,12 +29,12 @@ import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/comp
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [
diff --git a/src/app/layout/layouts/vertical/dense/dense.component.html b/src/app/layout/layouts/vertical/dense/dense.component.html
index 1e51760f..efbb19a5 100644
--- a/src/app/layout/layouts/vertical/dense/dense.component.html
+++ b/src/app/layout/layouts/vertical/dense/dense.component.html
@@ -4,7 +4,7 @@
     [appearance]="navigationAppearance"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="data.navigation.default"
+    [navigation]="navigation.default"
     [opened]="!isScreenSmall">
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
@@ -40,13 +40,13 @@
         </div>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <language></language>
+            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-            <messages [messages]="data.messages"></messages>
-            <notifications [notifications]="data.notifications"></notifications>
-            <user-menu></user-menu>
+            <shortcuts></shortcuts>
+            <messages></messages>
+            <notifications></notifications>
+            <user></user>
         </div>
     </div>
 
diff --git a/src/app/layout/layouts/vertical/dense/dense.component.ts b/src/app/layout/layouts/vertical/dense/dense.component.ts
index bd0617bb..c2880fb4 100644
--- a/src/app/layout/layouts/vertical/dense/dense.component.ts
+++ b/src/app/layout/layouts/vertical/dense/dense.component.ts
@@ -1,10 +1,11 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'dense-layout',
@@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
 })
 export class DenseLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
     navigationAppearance: 'default' | 'dense' = 'dense';
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -24,6 +25,7 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -51,10 +53,12 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
diff --git a/src/app/layout/layouts/vertical/dense/dense.module.ts b/src/app/layout/layouts/vertical/dense/dense.module.ts
index da0ed28f..125d7686 100644
--- a/src/app/layout/layouts/vertical/dense/dense.module.ts
+++ b/src/app/layout/layouts/vertical/dense/dense.module.ts
@@ -7,12 +7,12 @@ 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 { LanguageModule } from 'app/layout/common/language/language.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.component';
 
@@ -29,12 +29,12 @@ import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.co
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [
diff --git a/src/app/layout/layouts/vertical/futuristic/futuristic.component.html b/src/app/layout/layouts/vertical/futuristic/futuristic.component.html
index 02f02c50..892cb041 100644
--- a/src/app/layout/layouts/vertical/futuristic/futuristic.component.html
+++ b/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]="data.navigation.futuristic"
+    [navigation]="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-menu></user-menu>
+            <user></user>
             <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">
-                    {{data.user.name}}
+                    {{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,12 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <language></language>
+            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-            <messages [messages]="data.messages"></messages>
-            <notifications [notifications]="data.notifications"></notifications>
+            <shortcuts></shortcuts>
+            <messages></messages>
+            <notifications></notifications>
         </div>
     </div>
 
diff --git a/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts b/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts
index a9de60a0..940058f3 100644
--- a/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts
+++ b/src/app/layout/layouts/vertical/futuristic/futuristic.component.ts
@@ -1,10 +1,13 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+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';
 
 @Component({
     selector     : 'futuristic-layout',
@@ -13,8 +16,9 @@ import { InitialData } from 'app/app.types';
 })
 export class FuturisticLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
+    user: User;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +27,8 @@ 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
     )
@@ -50,10 +56,19 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // 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 media changes
         this._fuseMediaWatcherService.onMediaChange$
diff --git a/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts b/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts
index c6af7139..f1dccc2c 100644
--- a/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts
+++ b/src/app/layout/layouts/vertical/futuristic/futuristic.module.ts
@@ -7,12 +7,12 @@ 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 { LanguageModule } from 'app/layout/common/language/language.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristic/futuristic.component';
 
@@ -29,12 +29,12 @@ import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristi
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [
diff --git a/src/app/layout/layouts/vertical/thin/thin.component.html b/src/app/layout/layouts/vertical/thin/thin.component.html
index b870e693..967ceece 100644
--- a/src/app/layout/layouts/vertical/thin/thin.component.html
+++ b/src/app/layout/layouts/vertical/thin/thin.component.html
@@ -4,7 +4,7 @@
     [appearance]="'thin'"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="data.navigation.compact"
+    [navigation]="navigation.compact"
     [opened]="!isScreenSmall">
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
@@ -32,13 +32,13 @@
         </button>
         <!-- Components -->
         <div class="flex items-center pl-2 ml-auto space-x-2">
-            <language></language>
+            <languages></languages>
             <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
-            <messages [messages]="data.messages"></messages>
-            <notifications [notifications]="data.notifications"></notifications>
-            <user-menu></user-menu>
+            <shortcuts></shortcuts>
+            <messages></messages>
+            <notifications></notifications>
+            <user></user>
         </div>
     </div>
 
diff --git a/src/app/layout/layouts/vertical/thin/thin.component.ts b/src/app/layout/layouts/vertical/thin/thin.component.ts
index a1173d67..02bdc543 100644
--- a/src/app/layout/layouts/vertical/thin/thin.component.ts
+++ b/src/app/layout/layouts/vertical/thin/thin.component.ts
@@ -1,10 +1,11 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Data, Router } from '@angular/router';
+import { ActivatedRoute, 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 { InitialData } from 'app/app.types';
+import { Navigation } from 'app/core/navigation/navigation.types';
+import { NavigationService } from 'app/core/navigation/navigation.service';
 
 @Component({
     selector     : 'thin-layout',
@@ -13,8 +14,8 @@ import { InitialData } from 'app/app.types';
 })
 export class ThinLayoutComponent implements OnInit, OnDestroy
 {
-    data: InitialData;
     isScreenSmall: boolean;
+    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -23,6 +24,7 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
+        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -50,10 +52,12 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to the resolved route data
-        this._activatedRoute.data.subscribe((data: Data) => {
-            this.data = data.initialData;
-        });
+        // Subscribe to navigation data
+        this._navigationService.navigation$
+            .pipe(takeUntil(this._unsubscribeAll))
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$
diff --git a/src/app/layout/layouts/vertical/thin/thin.module.ts b/src/app/layout/layouts/vertical/thin/thin.module.ts
index 347aabf8..3ae44c63 100644
--- a/src/app/layout/layouts/vertical/thin/thin.module.ts
+++ b/src/app/layout/layouts/vertical/thin/thin.module.ts
@@ -7,12 +7,12 @@ 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 { LanguageModule } from 'app/layout/common/language/language.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 { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
+import { UserModule } from 'app/layout/common/user/user.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.component';
 
@@ -29,12 +29,12 @@ import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.compo
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguageModule,
+        LanguagesModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserMenuModule,
+        UserModule,
         SharedModule
     ],
     exports     : [
diff --git a/src/app/mock-api/common/notifications/data.ts b/src/app/mock-api/common/notifications/data.ts
index 373e1c1e..2a08b99c 100644
--- a/src/app/mock-api/common/notifications/data.ts
+++ b/src/app/mock-api/common/notifications/data.ts
@@ -4,7 +4,7 @@ import * as moment from 'moment';
 export const notifications = [
     {
         id         : '493190c9-5b61-4912-afe5-78c21f1044d7',
-        icon       : 'heroicons_outline:star',
+        icon       : 'heroicons_solid:star',
         title      : 'Daily challenges',
         description: 'Your submission has been accepted',
         time       : moment().subtract(25, 'minutes').toISOString(), // 25 minutes ago
@@ -21,7 +21,7 @@ export const notifications = [
     },
     {
         id         : 'b91ccb58-b06c-413b-b389-87010e03a120',
-        icon       : 'heroicons_outline:mail',
+        icon       : 'heroicons_solid:mail',
         title      : 'Mailbox',
         description: 'You have 15 unread mails across 3 mailboxes',
         time       : moment().subtract(3, 'hours').toISOString(), // 3 hours ago
@@ -31,7 +31,7 @@ export const notifications = [
     },
     {
         id         : '541416c9-84a7-408a-8d74-27a43c38d797',
-        icon       : 'heroicons_outline:refresh',
+        icon       : 'heroicons_solid:refresh',
         title      : 'Cron jobs',
         description: 'Your <em>Docker container</em> is ready to publish',
         time       : moment().subtract(5, 'hours').toISOString(), // 5 hours ago
@@ -59,7 +59,7 @@ export const notifications = [
     },
     {
         id         : 'b85c2338-cc98-4140-bbf8-c226ce4e395e',
-        icon       : 'heroicons_outline:mail',
+        icon       : 'heroicons_solid:mail',
         title      : 'Mailbox',
         description: 'You have 3 new mails',
         time       : moment().subtract(1, 'day').toISOString(), // 1 day ago
@@ -69,7 +69,7 @@ export const notifications = [
     },
     {
         id         : '8f8e1bf9-4661-4939-9e43-390957b60f42',
-        icon       : 'heroicons_outline:star',
+        icon       : 'heroicons_solid:star',
         title      : 'Daily challenges',
         description: 'Your submission has been accepted and you are ready to sign-up for the final assigment which will be ready in 2 days',
         time       : moment().subtract(3, 'days').toISOString(), // 3 days ago
@@ -79,7 +79,7 @@ export const notifications = [
     },
     {
         id         : '30af917b-7a6a-45d1-822f-9e7ad7f8bf69',
-        icon       : 'heroicons_outline:refresh',
+        icon       : 'heroicons_solid:refresh',
         title      : 'Cron jobs',
         description: 'Your Vagrant container is ready to download',
         time       : moment().subtract(4, 'day').toISOString(), // 4 days ago
diff --git a/src/app/mock-api/common/shortcuts/data.ts b/src/app/mock-api/common/shortcuts/data.ts
index 38acd3d9..fac6fa4b 100644
--- a/src/app/mock-api/common/shortcuts/data.ts
+++ b/src/app/mock-api/common/shortcuts/data.ts
@@ -3,9 +3,9 @@ export const shortcuts = [
     {
         id         : 'a1ae91d3-e2cb-459b-9be9-a184694f548b',
         label      : 'Changelog',
-        description: 'Latest version: v1.2',
+        description: 'List of changes',
         icon       : 'heroicons_outline:clipboard-list',
-        link       : '/dashboards/project',
+        link       : '/docs/changelog',
         useRouter  : true
     },
     {
@@ -13,7 +13,7 @@ export const shortcuts = [
         label      : 'Documentation',
         description: 'Getting started',
         icon       : 'heroicons_outline:book-open',
-        link       : '/dashboards/project',
+        link       : '/docs/guides/getting-started/introduction',
         useRouter  : true
     },
     {
@@ -21,7 +21,7 @@ export const shortcuts = [
         label      : 'Help center',
         description: 'FAQs and guides',
         icon       : 'heroicons_outline:support',
-        link       : '/pages/help-center',
+        link       : '/apps/help-center',
         useRouter  : true
     },
     {
@@ -29,7 +29,7 @@ export const shortcuts = [
         label      : 'Dashboard',
         description: 'User analytics',
         icon       : 'heroicons_outline:chart-pie',
-        link       : '/dashboards/project',
+        link       : '/dashboards/analytics',
         useRouter  : true
     },
     {
@@ -67,7 +67,7 @@ export const shortcuts = [
     {
         id         : '0a240ab8-e19d-4503-bf68-20013030d526',
         label      : 'Reload',
-        description: 'Restart the app',
+        description: 'Reload the app',
         icon       : 'heroicons_outline:refresh',
         link       : '/dashboards/project',
         useRouter  : false