(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

@@ -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 { MessagesService } from 'app/layout/common/messages/messages.service';
-import { InitialData } from 'app/app.types';
+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._navigationService.get(),
-            this._httpClient.get<any>('api/common/navigation'),
+            this._messagesService.getAll(),
-            this._httpClient.get<any>('api/common/notifications'),
+            this._notificationsService.getAll(),
-            this._httpClient.get<any>('api/common/shortcuts'),
+            this._shortcutsService.getAll(),
-            this._httpClient.get<any>('api/common/user')
+            this._userService.get()
-        ]).pipe(
+        ]);
-            map(([messages, navigation, notifications, shortcuts, user]) => ({
-                    messages,
-                    navigation: {
-                        compact   : navigation.compact,
-                        default   : navigation.default,
-                        futuristic: navigation.futuristic,
-                        horizontal: navigation.horizontal
-                    },
-                    notifications,
-                    shortcuts,
-                    user
-                })
-            )
-        );
     }
 }

src/app/app.types.ts

@@ -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;
-}

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'
 };

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);
+            })
+        );
+    }
+}

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[];
+}

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);
             })
         );

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',
+    selector       : 'languages',
-    templateUrl    : './language.component.html',
+    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;

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
 {
 }

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
      */

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
+     * Get all messages
-     *
-     * @param messages
      */
-    store(messages: Message[]): Observable<Message[]>
+    getAll(): Observable<Message[]>
     {
-        // Load the messages
+        return this._httpClient.get<Message[]>('api/common/messages').pipe(
-        this._messages.next(messages);
+            tap((messages) => {
-
+                this._messages.next(messages);
-        // Return the messages
+            })
-        return this.messages$;
+        );
     }
 
     /**

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
      */

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
+     * Get all notifications
-     *
-     * @param notifications
      */
-    store(notifications: Notification[]): Observable<Notification[]>
+    getAll(): Observable<Notification[]>
     {
-        // Load the notifications
+        return this._httpClient.get<Notification[]>('api/common/notifications').pipe(
-        this._notifications.next(notifications);
+            tap((notifications) => {
-
+                this._notifications.next(notifications);
-        // Return the notifications
+            })
-        return this.notifications$;
+        );
     }
 
     /**

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 -->

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
      */

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
+     * Get all messages
-     *
-     * @param shortcuts
      */
-    store(shortcuts: Shortcut[]): Observable<Shortcut[]>
+    getAll(): Observable<Shortcut[]>
     {
-        // Load the shortcuts
+        return this._httpClient.get<Shortcut[]>('api/common/shortcuts').pipe(
-        this._shortcuts.next(shortcuts);
+            tap((shortcuts) => {
-
+                this._shortcuts.next(shortcuts);
-        // Return the shortcuts
+            })
-        return this.shortcuts$;
+        );
     }
 
     /**

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',
+    selector       : 'user',
-    templateUrl    : './user-menu.component.html',
+    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;

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
 {
 }

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>
+                <shortcuts></shortcuts>
-                <messages [messages]="data.messages"></messages>
+                <messages></messages>
-                <notifications [notifications]="data.notifications"></notifications>
+                <notifications></notifications>
-                <user-menu></user-menu>
+                <user></user>
             </div>
         </div>
 

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
+        // Subscribe to navigation data
-        this._activatedRoute.data.subscribe((data: Data) => {
+        this._navigationService.navigation$
-            this.data = data.initialData;
+            .pipe(takeUntil(this._unsubscribeAll))
-        });
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

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     : [

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>
+                    <shortcuts></shortcuts>
-                    <messages [messages]="data.messages"></messages>
+                    <messages></messages>
-                    <notifications [notifications]="data.notifications"></notifications>
+                    <notifications></notifications>
-                    <user-menu></user-menu>
+                    <user></user>
                 </div>
             </div>
         </div>

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
+        // Subscribe to navigation data
-        this._activatedRoute.data.subscribe((data: Data) => {
+        this._navigationService.navigation$
-            this.data = data.initialData;
+            .pipe(takeUntil(this._unsubscribeAll))
-        });
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

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     : [

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>
+                    <shortcuts></shortcuts>
-                    <messages [messages]="data.messages"></messages>
+                    <messages></messages>
-                    <notifications [notifications]="data.notifications"></notifications>
+                    <notifications></notifications>
-                    <user-menu></user-menu>
+                    <user></user>
                 </div>
             </div>
             <!-- Bottom bar -->

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
+        // Subscribe to navigation data
-        this._activatedRoute.data.subscribe((data: Data) => {
+        this._navigationService.navigation$
-            this.data = data.initialData;
+            .pipe(takeUntil(this._unsubscribeAll))
-        });
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

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     : [

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>
+            <shortcuts></shortcuts>
-            <messages [messages]="data.messages"></messages>
+            <messages></messages>
-            <notifications [notifications]="data.notifications"></notifications>
+            <notifications></notifications>
-            <user-menu></user-menu>
+            <user></user>
         </div>
     </div>
 

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
+        // Subscribe to navigation data
-        this._activatedRoute.data.subscribe((data: Data) => {
+        this._navigationService.navigation$
-            this.data = data.initialData;
+            .pipe(takeUntil(this._unsubscribeAll))
-        });
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

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     : [

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>
+            <shortcuts></shortcuts>
-            <messages [messages]="data.messages"></messages>
+            <messages></messages>
-            <notifications [notifications]="data.notifications"></notifications>
+            <notifications></notifications>
-            <user-menu></user-menu>
+            <user></user>
         </div>
     </div>
 

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
+        // Subscribe to navigation data
-        this._activatedRoute.data.subscribe((data: Data) => {
+        this._navigationService.navigation$
-            this.data = data.initialData;
+            .pipe(takeUntil(this._unsubscribeAll))
-        });
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

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     : [

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>
+                <notifications></notifications>
-                <user-menu [showAvatar]="false"></user-menu>
+                <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"
+                    *ngIf="user.avatar"
-                    [src]="data.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>
+            <shortcuts></shortcuts>
-            <messages [messages]="data.messages"></messages>
+            <messages></messages>
         </div>
     </div>
 

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
+        // Subscribe to navigation data
-        this._activatedRoute.data.subscribe((data: Data) => {
+        this._navigationService.navigation$
-            this.data = data.initialData;
+            .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$

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     : [

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>
+            <shortcuts></shortcuts>
-            <messages [messages]="data.messages"></messages>
+            <messages></messages>
-            <notifications [notifications]="data.notifications"></notifications>
+            <notifications></notifications>
-            <user-menu></user-menu>
+            <user></user>
         </div>
     </div>
 

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
+        // Subscribe to navigation data
-        this._activatedRoute.data.subscribe((data: Data) => {
+        this._navigationService.navigation$
-            this.data = data.initialData;
+            .pipe(takeUntil(this._unsubscribeAll))
-        });
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

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     : [

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>
+            <shortcuts></shortcuts>
-            <messages [messages]="data.messages"></messages>
+            <messages></messages>
-            <notifications [notifications]="data.notifications"></notifications>
+            <notifications></notifications>
-            <user-menu></user-menu>
+            <user></user>
         </div>
     </div>
 

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
+        // Subscribe to navigation data
-        this._activatedRoute.data.subscribe((data: Data) => {
+        this._navigationService.navigation$
-            this.data = data.initialData;
+            .pipe(takeUntil(this._unsubscribeAll))
-        });
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

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     : [

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>
+            <shortcuts></shortcuts>
-            <messages [messages]="data.messages"></messages>
+            <messages></messages>
-            <notifications [notifications]="data.notifications"></notifications>
+            <notifications></notifications>
         </div>
     </div>
 

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
+        // Subscribe to navigation data
-        this._activatedRoute.data.subscribe((data: Data) => {
+        this._navigationService.navigation$
-            this.data = data.initialData;
+            .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$

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     : [

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>
+            <shortcuts></shortcuts>
-            <messages [messages]="data.messages"></messages>
+            <messages></messages>
-            <notifications [notifications]="data.notifications"></notifications>
+            <notifications></notifications>
-            <user-menu></user-menu>
+            <user></user>
         </div>
     </div>
 

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
+        // Subscribe to navigation data
-        this._activatedRoute.data.subscribe((data: Data) => {
+        this._navigationService.navigation$
-            this.data = data.initialData;
+            .pipe(takeUntil(this._unsubscribeAll))
-        });
+            .subscribe((navigation: Navigation) => {
+                this.navigation = navigation;
+            });
 
         // Subscribe to media changes
         this._fuseMediaWatcherService.onMediaChange$

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     : [

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

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