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

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

package.json

@@ -1,8 +1,6 @@
 {
     "name": "@fuse/demo",
-    "version": "13.2.0",
-    "description": "Fuse - Angular Admin Template and Starter Project",
-    "author": "https://themeforest.net/user/srcn",
+    "version": "13.0.3",
     "license": "https://themeforest.net/licenses/standard",
     "private": true,
     "scripts": {
@@ -14,17 +12,17 @@
         "e2e": "ng e2e"
     },
     "dependencies": {
-        "@angular/animations": "12.1.1",
-        "@angular/cdk": "12.1.1",
-        "@angular/common": "12.1.1",
-        "@angular/compiler": "12.1.1",
-        "@angular/core": "12.1.1",
-        "@angular/forms": "12.1.1",
-        "@angular/material": "12.1.1",
-        "@angular/material-moment-adapter": "12.1.1",
-        "@angular/platform-browser": "12.1.1",
-        "@angular/platform-browser-dynamic": "12.1.1",
-        "@angular/router": "12.1.1",
+        "@angular/animations": "12.0.2",
+        "@angular/cdk": "12.0.2",
+        "@angular/common": "12.0.2",
+        "@angular/compiler": "12.0.2",
+        "@angular/core": "12.0.2",
+        "@angular/forms": "12.0.2",
+        "@angular/material": "12.0.2",
+        "@angular/material-moment-adapter": "12.0.2",
+        "@angular/platform-browser": "12.0.2",
+        "@angular/platform-browser-dynamic": "12.0.2",
+        "@angular/router": "12.0.2",
         "@fullcalendar/angular": "4.4.5-beta",
         "@fullcalendar/core": "4.4.2",
         "@fullcalendar/daygrid": "4.4.2",
@@ -34,31 +32,32 @@
         "@fullcalendar/rrule": "4.4.2",
         "@fullcalendar/timegrid": "4.4.2",
         "@ngneat/transloco": "2.21.0",
-        "apexcharts": "3.27.1",
+        "apexcharts": "3.26.3",
         "crypto-js": "3.3.0",
-        "highlight.js": "11.0.1",
+        "highlight.js": "11.0.0",
         "lodash-es": "4.17.21",
         "moment": "2.29.1",
-        "ng-apexcharts": "1.5.12",
+        "ng-apexcharts": "1.5.10",
         "ngx-markdown": "12.0.1",
-        "ngx-quill": "14.1.1",
+        "ngx-quill": "14.0.0",
         "perfect-scrollbar": "1.5.1",
         "quill": "1.3.7",
         "rrule": "2.6.8",
         "rxjs": "6.6.7",
-        "tslib": "2.3.0",
+        "tslib": "2.2.0",
         "web-animations-js": "2.3.2",
         "zone.js": "0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "12.1.0",
-        "@angular-eslint/builder": "12.2.0",
-        "@angular-eslint/eslint-plugin": "12.2.0",
-        "@angular-eslint/eslint-plugin-template": "12.2.0",
-        "@angular-eslint/schematics": "12.2.0",
-        "@angular-eslint/template-parser": "12.2.0",
-        "@angular/cli": "12.1.0",
-        "@angular/compiler-cli": "12.1.1",
+        "@angular-devkit/build-angular": "12.0.2",
+        "@angular-eslint/builder": "12.1.0",
+        "@angular-eslint/eslint-plugin": "12.1.0",
+        "@angular-eslint/eslint-plugin-template": "12.1.0",
+        "@angular-eslint/schematics": "12.1.0",
+        "@angular-eslint/template-parser": "12.1.0",
+        "@angular/cli": "12.0.2",
+        "@angular/compiler-cli": "12.0.2",
+        "@angular/language-service": "12.0.2",
         "@tailwindcss/aspect-ratio": "0.2.1",
         "@tailwindcss/line-clamp": "0.2.1",
         "@tailwindcss/typography": "0.4.1",
@@ -68,24 +67,24 @@
         "@types/jasmine": "3.6.11",
         "@types/lodash": "4.14.170",
         "@types/lodash-es": "4.17.4",
-        "@types/node": "12.20.15",
-        "@typescript-eslint/eslint-plugin": "4.28.1",
-        "@typescript-eslint/parser": "4.28.1",
+        "@types/node": "12.20.14",
+        "@typescript-eslint/eslint-plugin": "4.26.0",
+        "@typescript-eslint/parser": "4.26.0",
         "autoprefixer": "10.2.6",
         "chroma-js": "2.1.2",
-        "eslint": "7.29.0",
+        "eslint": "7.27.0",
         "eslint-plugin-import": "2.23.4",
-        "eslint-plugin-jsdoc": "35.4.1",
+        "eslint-plugin-jsdoc": "35.1.2",
         "eslint-plugin-prefer-arrow": "1.2.3",
         "jasmine-core": "3.7.1",
-        "karma": "6.3.4",
+        "karma": "6.3.3",
         "karma-chrome-launcher": "3.1.0",
         "karma-coverage": "2.0.3",
         "karma-jasmine": "4.0.1",
         "karma-jasmine-html-reporter": "1.6.0",
         "lodash": "4.17.21",
-        "postcss": "8.3.5",
-        "tailwindcss": "2.2.4",
-        "typescript": "4.3.5"
+        "postcss": "8.3.0",
+        "tailwindcss": "2.1.4",
+        "typescript": "4.2.4"
     }
 }

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

@@ -341,13 +341,6 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
             animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({opacity: 1}))
         ]).create(this._overlay);
 
-        // Once the animation is done...
-        this._player.onDone(() => {
-
-            // Destroy the player
-            this._player.destroy();
-        });
-
         // Play the animation
         this._player.play();
 
@@ -380,9 +373,6 @@ export class FuseDrawerComponent implements OnChanges, OnInit, OnDestroy
         // Once the animation is done...
         this._player.onDone(() => {
 
-            // Destroy the player
-            this._player.destroy();
-
             // If the backdrop still exists...
             if ( this._overlay )
             {

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

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

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

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

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

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

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

@@ -5,83 +5,69 @@
     [ngClass]="item.classes?.wrapper">
 
     <!-- Item with an internal link -->
-    <ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled">
-        <div
-            class="fuse-horizontal-navigation-item"
-            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
-            [routerLink]="[item.link]"
-            [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
-            [routerLinkActiveOptions]="isActiveMatchOptions"
-            [matTooltip]="item.tooltip || ''">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
+    <div
+        class="fuse-horizontal-navigation-item"
+        *ngIf="item.link && !item.externalLink && !item.function && !item.disabled"
+        [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
+        [routerLink]="[item.link]"
+        [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
+        [routerLinkActiveOptions]="isActiveMatchOptions">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
 
     <!-- Item with an external link -->
-    <ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled">
-        <a
-            class="fuse-horizontal-navigation-item"
-            [href]="item.link"
-            [target]="item.target || '_self'"
-            [matTooltip]="item.tooltip || ''">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </a>
-    </ng-container>
+    <a
+        class="fuse-horizontal-navigation-item"
+        *ngIf="item.link && item.externalLink && !item.function && !item.disabled"
+        [href]="item.link">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </a>
 
     <!-- Item with a function -->
-    <ng-container *ngIf="!item.link && item.function && !item.disabled">
-        <div
-            class="fuse-horizontal-navigation-item"
-            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
-            [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
+    <div
+        class="fuse-horizontal-navigation-item"
+        *ngIf="!item.link && item.function && !item.disabled"
+        [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
+        (click)="item.function(item)">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
 
     <!-- Item with an internal link and function -->
-    <ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled">
-        <div
-            class="fuse-horizontal-navigation-item"
-            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
-            [routerLink]="[item.link]"
-            [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
-            [routerLinkActiveOptions]="isActiveMatchOptions"
-            [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
+    <div
+        class="fuse-horizontal-navigation-item"
+        *ngIf="item.link && !item.externalLink && item.function && !item.disabled"
+        [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
+        [routerLink]="[item.link]"
+        [routerLinkActive]="'fuse-horizontal-navigation-item-active'"
+        [routerLinkActiveOptions]="isActiveMatchOptions"
+        (click)="item.function(item)">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
 
     <!-- Item with an external link and function -->
-    <ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled">
-        <a
-            class="fuse-horizontal-navigation-item"
-            [href]="item.link"
-            [target]="item.target || '_self'"
-            [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)"
-            mat-menu-item>
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </a>
-    </ng-container>
+    <a
+        class="fuse-horizontal-navigation-item"
+        *ngIf="item.link && item.externalLink && item.function && !item.disabled"
+        [href]="item.link"
+        (click)="item.function(item)"
+        mat-menu-item>
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </a>
 
     <!-- Item with a no link and no function -->
-    <ng-container *ngIf="!item.link && !item.function && !item.disabled">
-        <div
-            class="fuse-horizontal-navigation-item"
-            [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}"
-            [matTooltip]="item.tooltip || ''">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
+    <div
+        class="fuse-horizontal-navigation-item"
+        *ngIf="!item.link && !item.function && !item.disabled"
+        [ngClass]="{'fuse-horizontal-navigation-item-active-forced': item.active}">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
 
     <!-- Item is disabled -->
-    <ng-container *ngIf="item.disabled">
-        <div class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
+    <div
+        class="fuse-horizontal-navigation-item fuse-horizontal-navigation-item-disabled"
+        *ngIf="item.disabled">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
 
 </div>
 
@@ -89,12 +75,11 @@
 <ng-template #itemTemplate>
 
     <!-- Icon -->
-    <ng-container *ngIf="item.icon">
-        <mat-icon
-            class="fuse-horizontal-navigation-item-icon"
-            [ngClass]="item.classes?.icon"
-            [svgIcon]="item.icon"></mat-icon>
-    </ng-container>
+    <mat-icon
+        class="fuse-horizontal-navigation-item-icon"
+        [ngClass]="item.classes?.icon"
+        *ngIf="item.icon"
+        [svgIcon]="item.icon"></mat-icon>
 
     <!-- Title & Subtitle -->
     <div class="fuse-horizontal-navigation-item-title-wrapper">
@@ -103,24 +88,24 @@
                 {{item.title}}
             </span>
         </div>
-        <ng-container *ngIf="item.subtitle">
-            <div class="fuse-horizontal-navigation-item-subtitle text-hint">
-                <span [ngClass]="item.classes?.subtitle">
-                    {{item.subtitle}}
-                </span>
-            </div>
-        </ng-container>
+        <div
+            class="fuse-horizontal-navigation-item-subtitle text-hint"
+            *ngIf="item.subtitle">
+            <span [ngClass]="item.classes?.subtitle">
+                {{item.subtitle}}
+            </span>
+        </div>
     </div>
 
     <!-- Badge -->
-    <ng-container *ngIf="item.badge">
-        <div class="fuse-horizontal-navigation-item-badge">
-            <div
-                class="fuse-horizontal-navigation-item-badge-content"
-                [ngClass]="item.badge.classes">
-                {{item.badge.title}}
-            </div>
+    <div
+        class="fuse-horizontal-navigation-item-badge"
+        *ngIf="item.badge">
+        <div
+            class="fuse-horizontal-navigation-item-badge-content"
+            [ngClass]="item.badge.classes">
+            {{item.badge.title}}
         </div>
-    </ng-container>
+    </div>
 
 </ng-template>

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

@@ -1,63 +1,59 @@
-<ng-container *ngIf="!child">
-    <div
-        [ngClass]="{'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
+<div
+    *ngIf="!child"
+    [ngClass]="{'fuse-horizontal-navigation-menu-active': trigger.menuOpen,
                  'fuse-horizontal-navigation-menu-active-forced': item.active}"
-        [matMenuTriggerFor]="matMenu"
-        (onMenuOpen)="triggerChangeDetection()"
-        (onMenuClose)="triggerChangeDetection()"
-        #trigger="matMenuTrigger">
-        <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
-    </div>
-</ng-container>
+    [matMenuTriggerFor]="matMenu"
+    (onMenuOpen)="triggerChangeDetection()"
+    (onMenuClose)="triggerChangeDetection()"
+    #trigger="matMenuTrigger">
+    <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
+</div>
 
 <mat-menu
     class="fuse-horizontal-navigation-menu-panel"
     [overlapTrigger]="false"
     #matMenu="matMenu">
 
-    <ng-container *ngFor="let item of item.children; trackBy: trackByFn">
+    <ng-container *ngFor="let item of item.children">
 
         <!-- Skip the hidden items -->
         <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
 
             <!-- Basic -->
-            <ng-container *ngIf="item.type === 'basic'">
-                <div
-                    class="fuse-horizontal-navigation-menu-item"
-                    [disabled]="item.disabled"
-                    mat-menu-item>
-                    <fuse-horizontal-navigation-basic-item
-                        [item]="item"
-                        [name]="name"></fuse-horizontal-navigation-basic-item>
-                </div>
-            </ng-container>
+            <div
+                class="fuse-horizontal-navigation-menu-item"
+                *ngIf="item.type === 'basic'"
+                [disabled]="item.disabled"
+                mat-menu-item>
+                <fuse-horizontal-navigation-basic-item
+                    [item]="item"
+                    [name]="name"></fuse-horizontal-navigation-basic-item>
+            </div>
 
             <!-- Branch: aside, collapsable, group -->
-            <ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'">
-                <div
-                    class="fuse-horizontal-navigation-menu-item"
-                    [disabled]="item.disabled"
-                    [matMenuTriggerFor]="branch.matMenu"
-                    mat-menu-item>
-                    <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
-                    <fuse-horizontal-navigation-branch-item
-                        [child]="true"
-                        [item]="item"
-                        [name]="name"
-                        #branch></fuse-horizontal-navigation-branch-item>
-                </div>
-            </ng-container>
+            <div
+                class="fuse-horizontal-navigation-menu-item"
+                *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'"
+                [disabled]="item.disabled"
+                [matMenuTriggerFor]="branch.matMenu"
+                mat-menu-item>
+                <ng-container *ngTemplateOutlet="itemTemplate; context: {$implicit: item}"></ng-container>
+                <fuse-horizontal-navigation-branch-item
+                    [child]="true"
+                    [item]="item"
+                    [name]="name"
+                    #branch></fuse-horizontal-navigation-branch-item>
+            </div>
 
             <!-- Divider -->
-            <ng-container *ngIf="item.type === 'divider'">
-                <div
-                    class="fuse-horizontal-navigation-menu-item"
-                    mat-menu-item>
-                    <fuse-horizontal-navigation-divider-item
-                        [item]="item"
-                        [name]="name"></fuse-horizontal-navigation-divider-item>
-                </div>
-            </ng-container>
+            <div
+                class="fuse-horizontal-navigation-menu-item"
+                *ngIf="item.type === 'divider'"
+                mat-menu-item>
+                <fuse-horizontal-navigation-divider-item
+                    [item]="item"
+                    [name]="name"></fuse-horizontal-navigation-divider-item>
+            </div>
 
         </ng-container>
 
@@ -78,16 +74,14 @@
         <div
             class="fuse-horizontal-navigation-item"
             [ngClass]="{'fuse-horizontal-navigation-item-disabled': item.disabled,
-                         'fuse-horizontal-navigation-item-active-forced': item.active}"
-            [matTooltip]="item.tooltip || ''">
+                         'fuse-horizontal-navigation-item-active-forced': item.active}">
 
             <!-- Icon -->
-            <ng-container *ngIf="item.icon">
-                <mat-icon
-                    class="fuse-horizontal-navigation-item-icon"
-                    [ngClass]="item.classes?.icon"
-                    [svgIcon]="item.icon"></mat-icon>
-            </ng-container>
+            <mat-icon
+                class="fuse-horizontal-navigation-item-icon"
+                [ngClass]="item.classes?.icon"
+                *ngIf="item.icon"
+                [svgIcon]="item.icon"></mat-icon>
 
             <!-- Title & Subtitle -->
             <div class="fuse-horizontal-navigation-item-title-wrapper">
@@ -96,25 +90,25 @@
                         {{item.title}}
                     </span>
                 </div>
-                <ng-container *ngIf="item.subtitle">
-                    <div class="fuse-horizontal-navigation-item-subtitle text-hint">
-                        <span [ngClass]="item.classes?.subtitle">
-                            {{item.subtitle}}
-                        </span>
-                    </div>
-                </ng-container>
+                <div
+                    class="fuse-horizontal-navigation-item-subtitle text-hint"
+                    *ngIf="item.subtitle">
+                    <span [ngClass]="item.classes?.subtitle">
+                        {{item.subtitle}}
+                    </span>
+                </div>
             </div>
 
             <!-- Badge -->
-            <ng-container *ngIf="item.badge">
-                <div class="fuse-horizontal-navigation-item-badge">
-                    <div
-                        class="fuse-horizontal-navigation-item-badge-content"
-                        [ngClass]="item.badge.classes">
-                        {{item.badge.title}}
-                    </div>
+            <div
+                class="fuse-horizontal-navigation-item-badge"
+                *ngIf="item.badge">
+                <div
+                    class="fuse-horizontal-navigation-item-badge-content"
+                    [ngClass]="item.badge.classes">
+                    {{item.badge.title}}
                 </div>
-            </ng-container>
+            </div>
         </div>
     </div>
 

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

@@ -81,15 +81,4 @@ export class FuseHorizontalNavigationBranchItemComponent implements OnInit, OnDe
         // Mark for check
         this._changeDetectorRef.markForCheck();
     }
-
-    /**
-     * Track by function for ngFor loops
-     *
-     * @param index
-     * @param item
-     */
-    trackByFn(index: number, item: any): any
-    {
-        return item.id || index;
-    }
 }

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

@@ -1,33 +1,30 @@
 <div class="fuse-horizontal-navigation-wrapper">
 
-    <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
+    <ng-container *ngFor="let item of navigation">
 
         <!-- Skip the hidden items -->
         <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
 
             <!-- Basic -->
-            <ng-container *ngIf="item.type === 'basic'">
-                <fuse-horizontal-navigation-basic-item
-                    class="fuse-horizontal-navigation-menu-item"
-                    [item]="item"
-                    [name]="name"></fuse-horizontal-navigation-basic-item>
-            </ng-container>
+            <fuse-horizontal-navigation-basic-item
+                class="fuse-horizontal-navigation-menu-item"
+                *ngIf="item.type === 'basic'"
+                [item]="item"
+                [name]="name"></fuse-horizontal-navigation-basic-item>
 
             <!-- Branch: aside, collapsable, group -->
-            <ng-container *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'">
-                <fuse-horizontal-navigation-branch-item
-                    class="fuse-horizontal-navigation-menu-item"
-                    [item]="item"
-                    [name]="name"></fuse-horizontal-navigation-branch-item>
-            </ng-container>
+            <fuse-horizontal-navigation-branch-item
+                class="fuse-horizontal-navigation-menu-item"
+                *ngIf="item.type === 'aside' || item.type === 'collapsable' || item.type === 'group'"
+                [item]="item"
+                [name]="name"></fuse-horizontal-navigation-branch-item>
 
             <!-- Spacer -->
-            <ng-container *ngIf="item.type === 'spacer'">
-                <fuse-horizontal-navigation-spacer-item
-                    class="fuse-horizontal-navigation-menu-item"
-                    [item]="item"
-                    [name]="name"></fuse-horizontal-navigation-spacer-item>
-            </ng-container>
+            <fuse-horizontal-navigation-spacer-item
+                class="fuse-horizontal-navigation-menu-item"
+                *ngIf="item.type === 'spacer'"
+                [item]="item"
+                [name]="name"></fuse-horizontal-navigation-spacer-item>
 
         </ng-container>
 

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

@@ -15,15 +15,8 @@ export interface FuseNavigationItem
     hidden?: (item: FuseNavigationItem) => boolean;
     active?: boolean;
     disabled?: boolean;
-    tooltip?: string;
     link?: string;
     externalLink?: boolean;
-    target?:
-        | '_blank'
-        | '_self'
-        | '_parent'
-        | '_top'
-        | string;
     exactMatch?: boolean;
     isActiveMatchOptions?: IsActiveMatchOptions;
     function?: (item: FuseNavigationItem) => void;

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

@@ -7,16 +7,14 @@
         class="fuse-vertical-navigation-item"
         [ngClass]="{'fuse-vertical-navigation-item-active': active,
                     'fuse-vertical-navigation-item-disabled': item.disabled,
-                    'fuse-vertical-navigation-item-active-forced': item.active}"
-        [matTooltip]="item.tooltip || ''">
+                    'fuse-vertical-navigation-item-active-forced': item.active}">
 
         <!-- Icon -->
-        <ng-container *ngIf="item.icon">
-            <mat-icon
-                class="fuse-vertical-navigation-item-icon"
-                [ngClass]="item.classes?.icon"
-                [svgIcon]="item.icon"></mat-icon>
-        </ng-container>
+        <mat-icon
+            class="fuse-vertical-navigation-item-icon"
+            [ngClass]="item.classes?.icon"
+            *ngIf="item.icon"
+            [svgIcon]="item.icon"></mat-icon>
 
         <!-- Title & Subtitle -->
         <div class="fuse-vertical-navigation-item-title-wrapper">
@@ -25,25 +23,25 @@
                     {{item.title}}
                 </span>
             </div>
-            <ng-container *ngIf="item.subtitle">
-                <div class="fuse-vertical-navigation-item-subtitle">
-                    <span [ngClass]="item.classes?.subtitle">
-                        {{item.subtitle}}
-                    </span>
-                </div>
-            </ng-container>
+            <div
+                class="fuse-vertical-navigation-item-subtitle"
+                *ngIf="item.subtitle">
+                <span [ngClass]="item.classes?.subtitle">
+                    {{item.subtitle}}
+                </span>
+            </div>
         </div>
 
         <!-- Badge -->
-        <ng-container *ngIf="item.badge">
-            <div class="fuse-vertical-navigation-item-badge">
-                <div
-                    class="fuse-vertical-navigation-item-badge-content"
-                    [ngClass]="item.badge.classes">
-                    {{item.badge.title}}
-                </div>
+        <div
+            class="fuse-vertical-navigation-item-badge"
+            *ngIf="item.badge">
+            <div
+                class="fuse-vertical-navigation-item-badge-content"
+                [ngClass]="item.badge.classes">
+                {{item.badge.title}}
             </div>
-        </ng-container>
+        </div>
 
     </div>
 
@@ -59,40 +57,35 @@
             <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
 
                 <!-- Basic -->
-                <ng-container *ngIf="item.type === 'basic'">
-                    <fuse-vertical-navigation-basic-item
-                        [item]="item"
-                        [name]="name"></fuse-vertical-navigation-basic-item>
-                </ng-container>
+                <fuse-vertical-navigation-basic-item
+                    *ngIf="item.type === 'basic'"
+                    [item]="item"
+                    [name]="name"></fuse-vertical-navigation-basic-item>
 
                 <!-- Collapsable -->
-                <ng-container *ngIf="item.type === 'collapsable'">
-                    <fuse-vertical-navigation-collapsable-item
-                        [item]="item"
-                        [name]="name"
-                        [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
-                </ng-container>
+                <fuse-vertical-navigation-collapsable-item
+                    *ngIf="item.type === 'collapsable'"
+                    [item]="item"
+                    [name]="name"
+                    [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
 
                 <!-- Divider -->
-                <ng-container *ngIf="item.type === 'divider'">
-                    <fuse-vertical-navigation-divider-item
-                        [item]="item"
-                        [name]="name"></fuse-vertical-navigation-divider-item>
-                </ng-container>
+                <fuse-vertical-navigation-divider-item
+                    *ngIf="item.type === 'divider'"
+                    [item]="item"
+                    [name]="name"></fuse-vertical-navigation-divider-item>
 
                 <!-- Group -->
-                <ng-container *ngIf="item.type === 'group'">
-                    <fuse-vertical-navigation-group-item
-                        [item]="item"
-                        [name]="name"></fuse-vertical-navigation-group-item>
-                </ng-container>
+                <fuse-vertical-navigation-group-item
+                    *ngIf="item.type === 'group'"
+                    [item]="item"
+                    [name]="name"></fuse-vertical-navigation-group-item>
 
                 <!-- Spacer -->
-                <ng-container *ngIf="item.type === 'spacer'">
-                    <fuse-vertical-navigation-spacer-item
-                        [item]="item"
-                        [name]="name"></fuse-vertical-navigation-spacer-item>
-                </ng-container>
+                <fuse-vertical-navigation-spacer-item
+                    *ngIf="item.type === 'spacer'"
+                    [item]="item"
+                    [name]="name"></fuse-vertical-navigation-spacer-item>
 
             </ng-container>
 

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

@@ -5,84 +5,68 @@
     [ngClass]="item.classes?.wrapper">
 
     <!-- Item with an internal link -->
-    <ng-container *ngIf="item.link && !item.externalLink && !item.function && !item.disabled">
-        <a
-            class="fuse-vertical-navigation-item"
-            [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
-            [routerLink]="[item.link]"
-            [routerLinkActive]="'fuse-vertical-navigation-item-active'"
-            [routerLinkActiveOptions]="isActiveMatchOptions"
-            [matTooltip]="item.tooltip || ''">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </a>
-    </ng-container>
+    <a
+        class="fuse-vertical-navigation-item"
+        *ngIf="item.link && !item.externalLink && !item.function && !item.disabled"
+        [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
+        [routerLink]="[item.link]"
+        [routerLinkActive]="'fuse-vertical-navigation-item-active'"
+        [routerLinkActiveOptions]="isActiveMatchOptions">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </a>
 
     <!-- Item with an external link -->
-    <ng-container *ngIf="item.link && item.externalLink && !item.function && !item.disabled">
-        <a
-            class="fuse-vertical-navigation-item"
-            [href]="item.link"
-            [target]="item.target || '_self'"
-            [matTooltip]="item.tooltip || ''">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </a>
-    </ng-container>
+    <a
+        class="fuse-vertical-navigation-item"
+        *ngIf="item.link && item.externalLink && !item.function && !item.disabled"
+        [href]="item.link">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </a>
 
     <!-- Item with a function -->
-    <ng-container *ngIf="!item.link && item.function && !item.disabled">
-        <div
-            class="fuse-vertical-navigation-item"
-            [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
-            [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
+    <div
+        class="fuse-vertical-navigation-item"
+        *ngIf="!item.link && item.function && !item.disabled"
+        [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
+        (click)="item.function(item)">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
 
     <!-- Item with an internal link and function -->
-    <ng-container *ngIf="item.link && !item.externalLink && item.function && !item.disabled">
-        <a
-            class="fuse-vertical-navigation-item"
-            [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
-            [routerLink]="[item.link]"
-            [routerLinkActive]="'fuse-vertical-navigation-item-active'"
-            [routerLinkActiveOptions]="isActiveMatchOptions"
-            [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </a>
-    </ng-container>
+    <a
+        class="fuse-vertical-navigation-item"
+        *ngIf="item.link && !item.externalLink && item.function && !item.disabled"
+        [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
+        [routerLink]="[item.link]"
+        [routerLinkActive]="'fuse-vertical-navigation-item-active'"
+        [routerLinkActiveOptions]="isActiveMatchOptions"
+        (click)="item.function(item)">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </a>
 
     <!-- Item with an external link and function -->
-    <ng-container *ngIf="item.link && item.externalLink && item.function && !item.disabled">
-        <a
-            class="fuse-vertical-navigation-item"
-            [href]="item.link"
-            [target]="item.target || '_self'"
-            [matTooltip]="item.tooltip || ''"
-            (click)="item.function(item)">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </a>
-    </ng-container>
+    <a
+        class="fuse-vertical-navigation-item"
+        *ngIf="item.link && item.externalLink && item.function && !item.disabled"
+        [href]="item.link"
+        (click)="item.function(item)">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </a>
 
     <!-- Item with a no link and no function -->
-    <ng-container *ngIf="!item.link && !item.function && !item.disabled">
-        <div
-            class="fuse-vertical-navigation-item"
-            [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}"
-            [matTooltip]="item.tooltip || ''">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
+    <div
+        class="fuse-vertical-navigation-item"
+        *ngIf="!item.link && !item.function && !item.disabled"
+        [ngClass]="{'fuse-vertical-navigation-item-active-forced': item.active}">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
 
     <!-- Item is disabled -->
-    <ng-container *ngIf="item.disabled">
-        <div
-            class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled"
-            [matTooltip]="item.tooltip || ''">
-            <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
-        </div>
-    </ng-container>
+    <div
+        class="fuse-vertical-navigation-item fuse-vertical-navigation-item-disabled"
+        *ngIf="item.disabled">
+        <ng-container *ngTemplateOutlet="itemTemplate"></ng-container>
+    </div>
 
 </div>
 
@@ -90,12 +74,11 @@
 <ng-template #itemTemplate>
 
     <!-- Icon -->
-    <ng-container *ngIf="item.icon">
-        <mat-icon
-            class="fuse-vertical-navigation-item-icon"
-            [ngClass]="item.classes?.icon"
-            [svgIcon]="item.icon"></mat-icon>
-    </ng-container>
+    <mat-icon
+        class="fuse-vertical-navigation-item-icon"
+        [ngClass]="item.classes?.icon"
+        *ngIf="item.icon"
+        [svgIcon]="item.icon"></mat-icon>
 
     <!-- Title & Subtitle -->
     <div class="fuse-vertical-navigation-item-title-wrapper">
@@ -104,24 +87,24 @@
                 {{item.title}}
             </span>
         </div>
-        <ng-container *ngIf="item.subtitle">
-            <div class="fuse-vertical-navigation-item-subtitle">
-                <span [ngClass]="item.classes?.subtitle">
-                    {{item.subtitle}}
-                </span>
-            </div>
-        </ng-container>
+        <div
+            class="fuse-vertical-navigation-item-subtitle"
+            *ngIf="item.subtitle">
+            <span [ngClass]="item.classes?.subtitle">
+                {{item.subtitle}}
+            </span>
+        </div>
     </div>
 
     <!-- Badge -->
-    <ng-container *ngIf="item.badge">
-        <div class="fuse-vertical-navigation-item-badge">
-            <div
-                class="fuse-vertical-navigation-item-badge-content"
-                [ngClass]="item.badge.classes">
-                {{item.badge.title}}
-            </div>
+    <div
+        class="fuse-vertical-navigation-item-badge"
+        *ngIf="item.badge">
+        <div
+            class="fuse-vertical-navigation-item-badge-content"
+            [ngClass]="item.badge.classes">
+            {{item.badge.title}}
         </div>
-    </ng-container>
+    </div>
 
 </ng-template>

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

@@ -6,16 +6,14 @@
     <div
         class="fuse-vertical-navigation-item"
         [ngClass]="{'fuse-vertical-navigation-item-disabled': item.disabled}"
-        [matTooltip]="item.tooltip || ''"
         (click)="toggleCollapsable()">
 
         <!-- Icon -->
-        <ng-container *ngIf="item.icon">
-            <mat-icon
-                class="fuse-vertical-navigation-item-icon"
-                [ngClass]="item.classes?.icon"
-                [svgIcon]="item.icon"></mat-icon>
-        </ng-container>
+        <mat-icon
+            class="fuse-vertical-navigation-item-icon"
+            [ngClass]="item.classes?.icon"
+            *ngIf="item.icon"
+            [svgIcon]="item.icon"></mat-icon>
 
         <!-- Title & Subtitle -->
         <div class="fuse-vertical-navigation-item-title-wrapper">
@@ -24,25 +22,25 @@
                     {{item.title}}
                 </span>
             </div>
-            <ng-container *ngIf="item.subtitle">
-                <div class="fuse-vertical-navigation-item-subtitle">
-                    <span [ngClass]="item.classes?.subtitle">
-                        {{item.subtitle}}
-                    </span>
-                </div>
-            </ng-container>
+            <div
+                class="fuse-vertical-navigation-item-subtitle"
+                *ngIf="item.subtitle">
+                <span [ngClass]="item.classes?.subtitle">
+                    {{item.subtitle}}
+                </span>
+            </div>
         </div>
 
         <!-- Badge -->
-        <ng-container *ngIf="item.badge">
-            <div class="fuse-vertical-navigation-item-badge">
-                <div
-                    class="fuse-vertical-navigation-item-badge-content"
-                    [ngClass]="item.badge.classes">
-                    {{item.badge.title}}
-                </div>
+        <div
+            class="fuse-vertical-navigation-item-badge"
+            *ngIf="item.badge">
+            <div
+                class="fuse-vertical-navigation-item-badge-content"
+                [ngClass]="item.badge.classes">
+                {{item.badge.title}}
             </div>
-        </ng-container>
+        </div>
 
         <!-- Arrow -->
         <mat-icon
@@ -64,40 +62,35 @@
         <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
 
             <!-- Basic -->
-            <ng-container *ngIf="item.type === 'basic'">
-                <fuse-vertical-navigation-basic-item
-                    [item]="item"
-                    [name]="name"></fuse-vertical-navigation-basic-item>
-            </ng-container>
+            <fuse-vertical-navigation-basic-item
+                *ngIf="item.type === 'basic'"
+                [item]="item"
+                [name]="name"></fuse-vertical-navigation-basic-item>
 
             <!-- Collapsable -->
-            <ng-container *ngIf="item.type === 'collapsable'">
-                <fuse-vertical-navigation-collapsable-item
-                    [item]="item"
-                    [name]="name"
-                    [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
-            </ng-container>
+            <fuse-vertical-navigation-collapsable-item
+                *ngIf="item.type === 'collapsable'"
+                [item]="item"
+                [name]="name"
+                [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
 
             <!-- Divider -->
-            <ng-container *ngIf="item.type === 'divider'">
-                <fuse-vertical-navigation-divider-item
-                    [item]="item"
-                    [name]="name"></fuse-vertical-navigation-divider-item>
-            </ng-container>
+            <fuse-vertical-navigation-divider-item
+                *ngIf="item.type === 'divider'"
+                [item]="item"
+                [name]="name"></fuse-vertical-navigation-divider-item>
 
             <!-- Group -->
-            <ng-container *ngIf="item.type === 'group'">
-                <fuse-vertical-navigation-group-item
-                    [item]="item"
-                    [name]="name"></fuse-vertical-navigation-group-item>
-            </ng-container>
+            <fuse-vertical-navigation-group-item
+                *ngIf="item.type === 'group'"
+                [item]="item"
+                [name]="name"></fuse-vertical-navigation-group-item>
 
             <!-- Spacer -->
-            <ng-container *ngIf="item.type === 'spacer'">
-                <fuse-vertical-navigation-spacer-item
-                    [item]="item"
-                    [name]="name"></fuse-vertical-navigation-spacer-item>
-            </ng-container>
+            <fuse-vertical-navigation-spacer-item
+                *ngIf="item.type === 'spacer'"
+                [item]="item"
+                [name]="name"></fuse-vertical-navigation-spacer-item>
 
         </ng-container>
 

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

@@ -7,12 +7,11 @@
     <div class="fuse-vertical-navigation-item">
 
         <!-- Icon -->
-        <ng-container *ngIf="item.icon">
-            <mat-icon
-                class="fuse-vertical-navigation-item-icon"
-                [ngClass]="item.classes?.icon"
-                [svgIcon]="item.icon"></mat-icon>
-        </ng-container>
+        <mat-icon
+            class="fuse-vertical-navigation-item-icon"
+            [ngClass]="item.classes?.icon"
+            *ngIf="item.icon"
+            [svgIcon]="item.icon"></mat-icon>
 
         <!-- Title & Subtitle -->
         <div class="fuse-vertical-navigation-item-title-wrapper">
@@ -21,25 +20,25 @@
                     {{item.title}}
                 </span>
             </div>
-            <ng-container *ngIf="item.subtitle">
-                <div class="fuse-vertical-navigation-item-subtitle">
-                    <span [ngClass]="item.classes?.subtitle">
-                        {{item.subtitle}}
-                    </span>
-                </div>
-            </ng-container>
+            <div
+                class="fuse-vertical-navigation-item-subtitle"
+                *ngIf="item.subtitle">
+                <span [ngClass]="item.classes?.subtitle">
+                    {{item.subtitle}}
+                </span>
+            </div>
         </div>
 
         <!-- Badge -->
-        <ng-container *ngIf="item.badge">
-            <div class="fuse-vertical-navigation-item-badge">
-                <div
-                    class="fuse-vertical-navigation-item-badge-content"
-                    [ngClass]="item.badge.classes">
-                    {{item.badge.title}}
-                </div>
+        <div
+            class="fuse-vertical-navigation-item-badge"
+            *ngIf="item.badge">
+            <div
+                class="fuse-vertical-navigation-item-badge-content"
+                [ngClass]="item.badge.classes">
+                {{item.badge.title}}
             </div>
-        </ng-container>
+        </div>
 
     </div>
 
@@ -51,40 +50,35 @@
     <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
 
         <!-- Basic -->
-        <ng-container *ngIf="item.type === 'basic'">
-            <fuse-vertical-navigation-basic-item
-                [item]="item"
-                [name]="name"></fuse-vertical-navigation-basic-item>
-        </ng-container>
+        <fuse-vertical-navigation-basic-item
+            *ngIf="item.type === 'basic'"
+            [item]="item"
+            [name]="name"></fuse-vertical-navigation-basic-item>
 
         <!-- Collapsable -->
-        <ng-container *ngIf="item.type === 'collapsable'">
-            <fuse-vertical-navigation-collapsable-item
-                [item]="item"
-                [name]="name"
-                [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
-        </ng-container>
+        <fuse-vertical-navigation-collapsable-item
+            *ngIf="item.type === 'collapsable'"
+            [item]="item"
+            [name]="name"
+            [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
 
         <!-- Divider -->
-        <ng-container *ngIf="item.type === 'divider'">
-            <fuse-vertical-navigation-divider-item
-                [item]="item"
-                [name]="name"></fuse-vertical-navigation-divider-item>
-        </ng-container>
+        <fuse-vertical-navigation-divider-item
+            *ngIf="item.type === 'divider'"
+            [item]="item"
+            [name]="name"></fuse-vertical-navigation-divider-item>
 
         <!-- Group -->
-        <ng-container *ngIf="item.type === 'group'">
-            <fuse-vertical-navigation-group-item
-                [item]="item"
-                [name]="name"></fuse-vertical-navigation-group-item>
-        </ng-container>
+        <fuse-vertical-navigation-group-item
+            *ngIf="item.type === 'group'"
+            [item]="item"
+            [name]="name"></fuse-vertical-navigation-group-item>
 
         <!-- Spacer -->
-        <ng-container *ngIf="item.type === 'spacer'">
-            <fuse-vertical-navigation-spacer-item
-                [item]="item"
-                [name]="name"></fuse-vertical-navigation-spacer-item>
-        </ng-container>
+        <fuse-vertical-navigation-spacer-item
+            *ngIf="item.type === 'spacer'"
+            [item]="item"
+            [name]="name"></fuse-vertical-navigation-spacer-item>
 
     </ng-container>
 

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

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

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

@@ -24,52 +24,46 @@
             <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
 
                 <!-- Aside -->
-                <ng-container *ngIf="item.type === 'aside'">
-                    <fuse-vertical-navigation-aside-item
-                        [item]="item"
-                        [name]="name"
-                        [activeItemId]="activeAsideItemId"
-                        [autoCollapse]="autoCollapse"
-                        [skipChildren]="true"
-                        (click)="toggleAside(item)"></fuse-vertical-navigation-aside-item>
-                </ng-container>
+                <fuse-vertical-navigation-aside-item
+                    *ngIf="item.type === 'aside'"
+                    [item]="item"
+                    [name]="name"
+                    [activeItemId]="activeAsideItemId"
+                    [autoCollapse]="autoCollapse"
+                    [skipChildren]="true"
+                    (click)="toggleAside(item)"></fuse-vertical-navigation-aside-item>
 
                 <!-- Basic -->
-                <ng-container *ngIf="item.type === 'basic'">
-                    <fuse-vertical-navigation-basic-item
-                        [item]="item"
-                        [name]="name"></fuse-vertical-navigation-basic-item>
-                </ng-container>
+                <fuse-vertical-navigation-basic-item
+                    *ngIf="item.type === 'basic'"
+                    [item]="item"
+                    [name]="name"></fuse-vertical-navigation-basic-item>
 
                 <!-- Collapsable -->
-                <ng-container *ngIf="item.type === 'collapsable'">
-                    <fuse-vertical-navigation-collapsable-item
-                        [item]="item"
-                        [name]="name"
-                        [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
-                </ng-container>
+                <fuse-vertical-navigation-collapsable-item
+                    *ngIf="item.type === 'collapsable'"
+                    [item]="item"
+                    [name]="name"
+                    [autoCollapse]="autoCollapse"></fuse-vertical-navigation-collapsable-item>
 
                 <!-- Divider -->
-                <ng-container *ngIf="item.type === 'divider'">
-                    <fuse-vertical-navigation-divider-item
-                        [item]="item"
-                        [name]="name"></fuse-vertical-navigation-divider-item>
-                </ng-container>
+                <fuse-vertical-navigation-divider-item
+                    *ngIf="item.type === 'divider'"
+                    [item]="item"
+                    [name]="name"></fuse-vertical-navigation-divider-item>
 
                 <!-- Group -->
-                <ng-container *ngIf="item.type === 'group'">
-                    <fuse-vertical-navigation-group-item
-                        [item]="item"
-                        [name]="name"
-                        [autoCollapse]="autoCollapse"></fuse-vertical-navigation-group-item>
-                </ng-container>
+                <fuse-vertical-navigation-group-item
+                    *ngIf="item.type === 'group'"
+                    [item]="item"
+                    [name]="name"
+                    [autoCollapse]="autoCollapse"></fuse-vertical-navigation-group-item>
 
                 <!-- Spacer -->
-                <ng-container *ngIf="item.type === 'spacer'">
-                    <fuse-vertical-navigation-spacer-item
-                        [item]="item"
-                        [name]="name"></fuse-vertical-navigation-spacer-item>
-                </ng-container>
+                <fuse-vertical-navigation-spacer-item
+                    *ngIf="item.type === 'spacer'"
+                    [item]="item"
+                    [name]="name"></fuse-vertical-navigation-spacer-item>
 
             </ng-container>
 
@@ -90,33 +84,31 @@
 </div>
 
 <!-- Aside -->
-<ng-container *ngIf="activeAsideItemId">
-    <div
-        class="fuse-vertical-navigation-aside-wrapper"
-        fuseScrollbar
-        [fuseScrollbarOptions]="{wheelPropagation: false, suppressScrollX: true}"
-        [@fadeInLeft]="position === 'left'"
-        [@fadeInRight]="position === 'right'"
-        [@fadeOutLeft]="position === 'left'"
-        [@fadeOutRight]="position === 'right'">
+<div
+    class="fuse-vertical-navigation-aside-wrapper"
+    *ngIf="activeAsideItemId"
+    fuseScrollbar
+    [fuseScrollbarOptions]="{wheelPropagation: false, suppressScrollX: true}"
+    [@fadeInLeft]="position === 'left'"
+    [@fadeInRight]="position === 'right'"
+    [@fadeOutLeft]="position === 'left'"
+    [@fadeOutRight]="position === 'right'">
 
-        <!-- Items -->
-        <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
+    <!-- Items -->
+    <ng-container *ngFor="let item of navigation; trackBy: trackByFn">
 
-            <!-- Skip the hidden items -->
-            <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
+        <!-- Skip the hidden items -->
+        <ng-container *ngIf="(item.hidden && !item.hidden(item)) || !item.hidden">
 
-                <!-- Aside -->
-                <ng-container *ngIf="item.type === 'aside' && item.id === activeAsideItemId">
-                    <fuse-vertical-navigation-aside-item
-                        [item]="item"
-                        [name]="name"
-                        [autoCollapse]="autoCollapse"></fuse-vertical-navigation-aside-item>
-                </ng-container>
-
-            </ng-container>
+            <!-- Aside -->
+            <fuse-vertical-navigation-aside-item
+                *ngIf="item.type === 'aside' && item.id === activeAsideItemId"
+                [item]="item"
+                [name]="name"
+                [autoCollapse]="autoCollapse"></fuse-vertical-navigation-aside-item>
 
         </ng-container>
 
-    </div>
-</ng-container>
+    </ng-container>
+
+</div>

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

@@ -374,10 +374,6 @@ export class FuseVerticalNavigationComponent implements OnChanges, OnInit, After
      */
     ngOnDestroy(): void
     {
-        // Forcefully close the navigation and aside in case they are opened
-        this.close();
-        this.closeAside();
-
         // Deregister the navigation component from the registry
         this._fuseNavigationService.deregisterComponent(this.name);
 

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

@@ -136,8 +136,11 @@
 .mat-flat-button,
 .mat-raised-button,
 .mat-stroked-button {
-    padding: 0 20px !important;
-    border-radius: 9999px !important;
+
+    .fuse-mat-rounded & {
+        padding: 0 20px;
+        border-radius: 9999px;
+    }
 }
 
 /* Target all buttons */
@@ -331,8 +334,6 @@
 /*  @ Button Toggle
 /* ----------------------------------------------------------------------------------------------------- */
 .mat-button-toggle-group {
-    border: none !important;
-    @apply space-x-1;
 
     &.mat-button-toggle-group-appearance-standard {
 
@@ -340,27 +341,36 @@
             background-clip: padding-box;
         }
     }
+}
 
-    .mat-button-toggle {
-        border-radius: 9999px;
-        overflow: hidden;
+/* Rounded design */
+.fuse-mat-rounded {
+
+    .mat-button-toggle-group {
         border: none !important;
-        font-weight: 500;
+        @apply space-x-1;
 
-        &.mat-button-toggle-checked {
+        .mat-button-toggle {
+            border-radius: 9999px;
+            overflow: hidden;
+            border: none !important;
+            font-weight: 500;
+
+            &.mat-button-toggle-checked {
+
+                .mat-button-toggle-label-content {
+                    @apply text-default #{'!important'};
+                }
+            }
 
             .mat-button-toggle-label-content {
-                @apply text-default #{'!important'};
+                padding: 0 20px;
+                @apply text-secondary;
             }
-        }
 
-        .mat-button-toggle-label-content {
-            padding: 0 20px;
-            @apply text-secondary;
-        }
-
-        .mat-ripple {
-            border-radius: 9999px;
+            .mat-ripple {
+                border-radius: 9999px;
+            }
         }
     }
 }
@@ -1319,55 +1329,62 @@
             opacity: 0 !important;
         }
     }
-
-    .mat-tab-header {
-        border-bottom: none !important;
-
-        .mat-tab-label-container {
-            padding: 0 24px;
-
-            .mat-tab-list {
-
-                .mat-tab-labels {
-
-                    .mat-tab-label {
-                        min-width: 0 !important;
-                        height: 40px !important;
-                        padding: 0 20px !important;
-                        border-radius: 9999px !important;
-                        @apply text-secondary;
-
-                        &.mat-tab-label-active {
-                            @apply bg-gray-700 bg-opacity-10 dark:bg-gray-50 dark:bg-opacity-10 #{'!important'};
-                            @apply text-default #{'!important'};
-                        }
-
-                        + .mat-tab-label {
-                            margin-left: 4px;
-                        }
-
-                        .mat-tab-label-content {
-                            line-height: 20px;
-                        }
-                    }
-                }
-
-                .mat-ink-bar {
-                    display: none !important;
-                }
-            }
-        }
-    }
-
-    .mat-tab-body-content {
-        padding: 24px;
-    }
 }
 
 .mat-tab-label {
     opacity: 1 !important;
 }
 
+/* Rounded design */
+.fuse-mat-rounded {
+
+    .mat-tab-group {
+
+        .mat-tab-header {
+            border-bottom: none !important;
+
+            .mat-tab-label-container {
+                padding: 0 24px;
+
+                .mat-tab-list {
+
+                    .mat-tab-labels {
+
+                        .mat-tab-label {
+                            min-width: 0 !important;
+                            height: 40px !important;
+                            padding: 0 20px !important;
+                            border-radius: 9999px !important;
+                            @apply text-secondary;
+
+                            &.mat-tab-label-active {
+                                @apply bg-gray-700 bg-opacity-10 dark:bg-gray-50 dark:bg-opacity-10 #{'!important'};
+                                @apply text-default #{'!important'};
+                            }
+
+                            + .mat-tab-label {
+                                margin-left: 4px;
+                            }
+
+                            .mat-tab-label-content {
+                                line-height: 20px;
+                            }
+                        }
+                    }
+
+                    .mat-ink-bar {
+                        display: none !important;
+                    }
+                }
+            }
+        }
+
+        .mat-tab-body-content {
+            padding: 24px;
+        }
+    }
+}
+
 /* ----------------------------------------------------------------------------------------------------- */
 /*  @ Textarea
 /* ----------------------------------------------------------------------------------------------------- */

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

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

src/app/app.resolvers.ts

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

src/app/app.routing.ts

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

src/app/app.types.ts

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

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

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

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

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

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

@@ -27,6 +27,6 @@ export class TranslocoHttpLoader implements TranslocoLoader
      */
     getTranslation(lang: string): Observable<Translation>
     {
-        return this._httpClient.get<Translation>(`./assets/i18n/${lang}.json`);
+        return this._httpClient.get<Translation>(`/assets/i18n/${lang}.json`);
     }
 }

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

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

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

@@ -4,13 +4,13 @@ import { AvailableLangs, TranslocoService } from '@ngneat/transloco';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
 
 @Component({
-    selector       : 'languages',
-    templateUrl    : './languages.component.html',
+    selector       : 'language',
+    templateUrl    : './language.component.html',
     encapsulation  : ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
-    exportAs       : 'languages'
+    exportAs       : 'language'
 })
-export class LanguagesComponent implements OnInit, OnDestroy
+export class LanguageComponent implements OnInit, OnDestroy
 {
     availableLangs: AvailableLangs;
     activeLang: string;

src/app/layout/common/language/language.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 { LanguagesComponent } from 'app/layout/common/languages/languages.component';
+import { LanguageComponent } from 'app/layout/common/language/language.component';
 import { SharedModule } from 'app/shared/shared.module';
 
 @NgModule({
     declarations: [
-        LanguagesComponent
+        LanguageComponent
     ],
     imports     : [
         MatButtonModule,
@@ -16,9 +16,9 @@ import { SharedModule } from 'app/shared/shared.module';
         SharedModule
     ],
     exports     : [
-        LanguagesComponent
+        LanguageComponent
     ]
 })
-export class LanguagesModule
+export class LanguageModule
 {
 }

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { MatButton } from '@angular/material/button';
@@ -14,12 +14,12 @@ import { MessagesService } from 'app/layout/common/messages/messages.service';
     changeDetection: ChangeDetectionStrategy.OnPush,
     exportAs       : 'messages'
 })
-export class MessagesComponent implements OnInit, OnDestroy
+export class MessagesComponent implements OnInit, OnChanges, OnDestroy
 {
+    @Input() messages: Message[];
     @ViewChild('messagesOrigin') private _messagesOrigin: MatButton;
     @ViewChild('messagesPanel') private _messagesPanel: TemplateRef<any>;
 
-    messages: Message[];
     unreadCount: number = 0;
     private _overlayRef: OverlayRef;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -40,6 +40,21 @@ export class MessagesComponent implements OnInit, OnDestroy
     // @ Lifecycle hooks
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Messages
+        if ( 'messages' in changes )
+        {
+            // Store the messages on the service
+            this._messagesService.store(changes.messages.currentValue);
+        }
+    }
+
     /**
      * On init
      */
@@ -167,7 +182,7 @@ export class MessagesComponent implements OnInit, OnDestroy
             scrollStrategy  : this._overlay.scrollStrategies.block(),
             positionStrategy: this._overlay.position()
                                   .flexibleConnectedTo(this._messagesOrigin._elementRef.nativeElement)
-                                  .withLockedPosition(true)
+                                  .withLockedPosition()
                                   .withPush(true)
                                   .withPositions([
                                       {

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

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

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { MatButton } from '@angular/material/button';
@@ -14,12 +14,12 @@ import { NotificationsService } from 'app/layout/common/notifications/notificati
     changeDetection: ChangeDetectionStrategy.OnPush,
     exportAs       : 'notifications'
 })
-export class NotificationsComponent implements OnInit, OnDestroy
+export class NotificationsComponent implements OnChanges, OnInit, OnDestroy
 {
+    @Input() notifications: Notification[];
     @ViewChild('notificationsOrigin') private _notificationsOrigin: MatButton;
     @ViewChild('notificationsPanel') private _notificationsPanel: TemplateRef<any>;
 
-    notifications: Notification[];
     unreadCount: number = 0;
     private _overlayRef: OverlayRef;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
@@ -40,6 +40,21 @@ export class NotificationsComponent implements OnInit, OnDestroy
     // @ Lifecycle hooks
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Notifications
+        if ( 'notifications' in changes )
+        {
+            // Store the notifications on the service
+            this._notificationsService.store(changes.notifications.currentValue);
+        }
+    }
+
     /**
      * On init
      */
@@ -167,7 +182,7 @@ export class NotificationsComponent implements OnInit, OnDestroy
             scrollStrategy  : this._overlay.scrollStrategies.block(),
             positionStrategy: this._overlay.position()
                                   .flexibleConnectedTo(this._notificationsOrigin._elementRef.nativeElement)
-                                  .withLockedPosition(true)
+                                  .withLockedPosition()
                                   .withPush(true)
                                   .withPositions([
                                       {

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

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

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

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

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

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

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

@@ -21,15 +21,7 @@
                         [svgIcon]="'heroicons_solid:x'"></mat-icon>
                 </button>
             </div>
-            <div class="flex items-center text-lg font-medium leading-10">
-                <span class="">Shortcuts</span>
-                <ng-container *ngIf="mode !== 'view'">
-                    <span class="ml-1">
-                        <ng-container *ngIf="mode === 'add'">- Add new</ng-container>
-                        <ng-container *ngIf="mode === 'modify' || mode === 'edit'">- Editing</ng-container>
-                    </span>
-                </ng-container>
-            </div>
+            <div class="text-lg font-medium leading-10">Shortcuts</div>
             <div class="ml-auto">
 
                 <!-- View mode -->

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Overlay, OverlayRef } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
@@ -15,14 +15,14 @@ import { ShortcutsService } from 'app/layout/common/shortcuts/shortcuts.service'
     changeDetection: ChangeDetectionStrategy.OnPush,
     exportAs       : 'shortcuts'
 })
-export class ShortcutsComponent implements OnInit, OnDestroy
+export class ShortcutsComponent implements OnChanges, OnInit, OnDestroy
 {
+    @Input() shortcuts: Shortcut[];
     @ViewChild('shortcutsOrigin') private _shortcutsOrigin: MatButton;
     @ViewChild('shortcutsPanel') private _shortcutsPanel: TemplateRef<any>;
 
     mode: 'view' | 'modify' | 'add' | 'edit' = 'view';
     shortcutForm: FormGroup;
-    shortcuts: Shortcut[];
     private _overlayRef: OverlayRef;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -43,6 +43,21 @@ export class ShortcutsComponent implements OnInit, OnDestroy
     // @ Lifecycle hooks
     // -----------------------------------------------------------------------------------------------------
 
+    /**
+     * On changes
+     *
+     * @param changes
+     */
+    ngOnChanges(changes: SimpleChanges): void
+    {
+        // Shortcuts
+        if ( 'shortcuts' in changes )
+        {
+            // Store the shortcuts on the service
+            this._shortcutsService.store(changes.shortcuts.currentValue);
+        }
+    }
+
     /**
      * On init
      */
@@ -221,7 +236,7 @@ export class ShortcutsComponent implements OnInit, OnDestroy
             scrollStrategy  : this._overlay.scrollStrategies.block(),
             positionStrategy: this._overlay.position()
                                   .flexibleConnectedTo(this._shortcutsOrigin._elementRef.nativeElement)
-                                  .withLockedPosition(true)
+                                  .withLockedPosition()
                                   .withPush(true)
                                   .withPositions([
                                       {

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

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

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

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

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

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

src/app/layout/layout.component.html

@@ -54,7 +54,7 @@
 </div>
 
 <fuse-drawer
-    class="w-screen min-w-screen sm:w-100 sm:min-w-100"
+    class="w-100 min-w-100"
     fixed
     transparentOverlay
     [mode]="'over'"
@@ -74,17 +74,17 @@
 
             <!-- Theme -->
             <div class="text-md font-semibold text-secondary">THEME</div>
-            <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mt-6">
+            <div class="grid grid-cols-3 gap-3 mt-6">
                 <ng-container *ngFor="let theme of themes">
                     <div
-                        class="flex items-center justify-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
+                        class="flex items-center px-4 py-3 rounded-full cursor-pointer ring-inset ring-primary bg-hover"
                         [class.ring-2]="config.theme === theme[0]"
                         (click)="setTheme(theme[0])">
                         <div
-                            class="flex-0 w-3 h-3 rounded-full"
+                            class="w-4 h-4 rounded-full"
                             [style.background-color]="theme[1].primary"></div>
                         <div
-                            class="ml-2.5 font-medium leading-5 truncate"
+                            class="ml-2.5 font-medium leading-5"
                             [class.text-secondary]="config.theme !== theme[0]">
                             {{theme[0] | titlecase}}
                         </div>

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

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

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

@@ -4,8 +4,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'centered-layout',
@@ -14,7 +13,7 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class CenteredLayoutComponent implements OnInit, OnDestroy
 {
-    navigation: Navigation;
+    data: InitialData;
     isScreenSmall: boolean;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -24,7 +23,6 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -52,12 +50,10 @@ export class CenteredLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route data
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // 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 { LanguagesModule } from 'app/layout/common/languages/languages.module';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/centered.component';
 
@@ -29,12 +29,12 @@ import { CenteredLayoutComponent } from 'app/layout/layouts/horizontal/centered/
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
+        LanguageModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

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

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

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

@@ -1,11 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'enterprise-layout',
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class EnterpriseLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -24,7 +23,6 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -52,12 +50,10 @@ export class EnterpriseLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route data
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // 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 { LanguagesModule } from 'app/layout/common/languages/languages.module';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterprise/enterprise.component';
 
@@ -29,12 +29,12 @@ import { EnterpriseLayoutComponent } from 'app/layout/layouts/horizontal/enterpr
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
+        LanguageModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

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

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

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

@@ -1,11 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'material-layout',
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class MaterialLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -24,7 +23,6 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -52,12 +50,10 @@ export class MaterialLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route data
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // 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 { LanguagesModule } from 'app/layout/common/languages/languages.module';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/material.component';
 
@@ -29,12 +29,12 @@ import { MaterialLayoutComponent } from 'app/layout/layouts/horizontal/material/
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
+        LanguageModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

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

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

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

@@ -1,11 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'modern-layout',
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class ModernLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -24,7 +23,6 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -52,12 +50,10 @@ export class ModernLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route data
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // 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 { LanguagesModule } from 'app/layout/common/languages/languages.module';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/modern.component';
 
@@ -29,12 +29,12 @@ import { ModernLayoutComponent } from 'app/layout/layouts/horizontal/modern/mode
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
+        LanguageModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

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

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

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

@@ -1,11 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'classic-layout',
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class ClassicLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -24,7 +23,6 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -52,12 +50,10 @@ export class ClassicLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route data
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // 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 { LanguagesModule } from 'app/layout/common/languages/languages.module';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/classic.component';
 
@@ -29,12 +29,12 @@ import { ClassicLayoutComponent } from 'app/layout/layouts/vertical/classic/clas
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
+        LanguageModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

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

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

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

@@ -1,13 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
-import { User } from 'app/core/user/user.types';
-import { UserService } from 'app/core/user/user.service';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'classy-layout',
@@ -16,9 +13,8 @@ import { UserService } from 'app/core/user/user.service';
 })
 export class ClassyLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
-    user: User;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -27,8 +23,6 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
-        private _userService: UserService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -56,19 +50,10 @@ export class ClassyLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
-
-        // Subscribe to the user service
-        this._userService.user$
-            .pipe((takeUntil(this._unsubscribeAll)))
-            .subscribe((user: User) => {
-                this.user = user;
-            });
+        // Subscribe to the resolved route data
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // 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 { LanguagesModule } from 'app/layout/common/languages/languages.module';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy.component';
 
@@ -29,12 +29,12 @@ import { ClassyLayoutComponent } from 'app/layout/layouts/vertical/classy/classy
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
+        LanguageModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

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

@@ -4,7 +4,7 @@
     [appearance]="'compact'"
     [mode]="isScreenSmall ? 'over' : 'side'"
     [name]="'mainNavigation'"
-    [navigation]="navigation.compact"
+    [navigation]="data.navigation.compact"
     [opened]="!isScreenSmall">
     <!-- Navigation header hook -->
     <ng-container fuseVerticalNavigationContentHeader>
@@ -30,14 +30,14 @@
             <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
         </button>
         <!-- Components -->
-        <div class="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2">
-            <languages></languages>
-            <fuse-fullscreen class="hidden md:block"></fuse-fullscreen>
+        <div class="flex items-center pl-2 ml-auto space-x-2">
+            <language></language>
+            <fuse-fullscreen></fuse-fullscreen>
             <search [appearance]="'bar'"></search>
-            <shortcuts></shortcuts>
-            <messages></messages>
-            <notifications></notifications>
-            <user></user>
+            <shortcuts [shortcuts]="data.shortcuts"></shortcuts>
+            <messages [messages]="data.messages"></messages>
+            <notifications [notifications]="data.notifications"></notifications>
+            <user-menu></user-menu>
         </div>
     </div>
 

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

@@ -1,11 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'compact-layout',
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class CompactLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -24,7 +23,6 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -52,12 +50,10 @@ export class CompactLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route data
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // 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 { LanguagesModule } from 'app/layout/common/languages/languages.module';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/compact.component';
 
@@ -29,12 +29,12 @@ import { CompactLayoutComponent } from 'app/layout/layouts/vertical/compact/comp
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
+        LanguageModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

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

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

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

@@ -1,11 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'dense-layout',
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class DenseLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
     navigationAppearance: 'default' | 'dense' = 'dense';
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
@@ -25,7 +24,6 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -53,12 +51,10 @@ export class DenseLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route data
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // 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 { LanguagesModule } from 'app/layout/common/languages/languages.module';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.component';
 
@@ -29,12 +29,12 @@ import { DenseLayoutComponent } from 'app/layout/layouts/vertical/dense/dense.co
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
+        LanguageModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

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

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

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

@@ -1,13 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
-import { User } from 'app/core/user/user.types';
-import { UserService } from 'app/core/user/user.service';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'futuristic-layout',
@@ -16,9 +13,8 @@ import { UserService } from 'app/core/user/user.service';
 })
 export class FuturisticLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
-    user: User;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -27,8 +23,6 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
-        private _userService: UserService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -56,19 +50,10 @@ export class FuturisticLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
-
-        // Subscribe to the user service
-        this._userService.user$
-            .pipe((takeUntil(this._unsubscribeAll)))
-            .subscribe((user: User) => {
-                this.user = user;
-            });
+        // Subscribe to the resolved route data
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // 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 { LanguagesModule } from 'app/layout/common/languages/languages.module';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristic/futuristic.component';
 
@@ -29,12 +29,12 @@ import { FuturisticLayoutComponent } from 'app/layout/layouts/vertical/futuristi
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
+        LanguageModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

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

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

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

@@ -1,11 +1,10 @@
 import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Data, Router } from '@angular/router';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
 import { FuseNavigationService, FuseVerticalNavigationComponent } from '@fuse/components/navigation';
-import { Navigation } from 'app/core/navigation/navigation.types';
-import { NavigationService } from 'app/core/navigation/navigation.service';
+import { InitialData } from 'app/app.types';
 
 @Component({
     selector     : 'thin-layout',
@@ -14,8 +13,8 @@ import { NavigationService } from 'app/core/navigation/navigation.service';
 })
 export class ThinLayoutComponent implements OnInit, OnDestroy
 {
+    data: InitialData;
     isScreenSmall: boolean;
-    navigation: Navigation;
     private _unsubscribeAll: Subject<any> = new Subject<any>();
 
     /**
@@ -24,7 +23,6 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
     constructor(
         private _activatedRoute: ActivatedRoute,
         private _router: Router,
-        private _navigationService: NavigationService,
         private _fuseMediaWatcherService: FuseMediaWatcherService,
         private _fuseNavigationService: FuseNavigationService
     )
@@ -52,12 +50,10 @@ export class ThinLayoutComponent implements OnInit, OnDestroy
      */
     ngOnInit(): void
     {
-        // Subscribe to navigation data
-        this._navigationService.navigation$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((navigation: Navigation) => {
-                this.navigation = navigation;
-            });
+        // Subscribe to the resolved route data
+        this._activatedRoute.data.subscribe((data: Data) => {
+            this.data = data.initialData;
+        });
 
         // 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 { LanguagesModule } from 'app/layout/common/languages/languages.module';
+import { LanguageModule } from 'app/layout/common/language/language.module';
 import { MessagesModule } from 'app/layout/common/messages/messages.module';
 import { NotificationsModule } from 'app/layout/common/notifications/notifications.module';
 import { SearchModule } from 'app/layout/common/search/search.module';
 import { ShortcutsModule } from 'app/layout/common/shortcuts/shortcuts.module';
-import { UserModule } from 'app/layout/common/user/user.module';
+import { UserMenuModule } from 'app/layout/common/user-menu/user-menu.module';
 import { SharedModule } from 'app/shared/shared.module';
 import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.component';
 
@@ -29,12 +29,12 @@ import { ThinLayoutComponent } from 'app/layout/layouts/vertical/thin/thin.compo
         MatMenuModule,
         FuseFullscreenModule,
         FuseNavigationModule,
-        LanguagesModule,
+        LanguageModule,
         MessagesModule,
         NotificationsModule,
         SearchModule,
         ShortcutsModule,
-        UserModule,
+        UserMenuModule,
         SharedModule
     ],
     exports     : [

src/app/mock-api/apps/file-manager/api.ts

@@ -33,18 +33,10 @@ export class FileManagerMockApi
         // -----------------------------------------------------------------------------------------------------
         this._fuseMockApiService
             .onGet('api/apps/file-manager')
-            .reply(({request}) => {
+            .reply(() => {
 
                 // Clone the items
-                let items = cloneDeep(this._items);
-
-                // See if a folder id exist
-                const folderId = request.params.get('folderId') ?? null;
-
-                // Filter the items by folder id. If folder id is null,
-                // that means we want to root items which have folder id
-                // of null
-                items = items.filter(item => item.folderId === folderId);
+                const items = cloneDeep(this._items);
 
                 // Separate the items by folders and files
                 const folders = items.filter(item => item.type === 'folder');
@@ -54,38 +46,11 @@ export class FileManagerMockApi
                 folders.sort((a, b) => a.name.localeCompare(b.name));
                 files.sort((a, b) => a.name.localeCompare(b.name));
 
-                // Figure out the path and attach it to the response
-                // Prepare the empty paths array
-                const pathItems = cloneDeep(this._items);
-                const path = [];
-
-                // Prepare the current folder
-                let currentFolder = null;
-
-                // Get the current folder and add it as the first entry
-                if ( folderId )
-                {
-                    currentFolder = pathItems.find(item => item.id === folderId);
-                    path.push(currentFolder);
-                }
-
-                // Start traversing and storing the folders as a path array
-                // until we hit null on the folder id
-                while ( currentFolder?.folderId )
-                {
-                    currentFolder = pathItems.find(item => item.id === currentFolder.folderId);
-                    if ( currentFolder )
-                    {
-                        path.unshift(currentFolder);
-                    }
-                }
-
                 return [
                     200,
                     {
                         folders,
-                        files,
-                        path
+                        files
                     }
                 ];
             });

src/app/mock-api/apps/file-manager/data.ts

@@ -2,7 +2,6 @@
 export const items = [
     {
         id         : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
-        folderId   : null,
         name       : 'Personal',
         createdBy  : 'Brian Hughes',
         createdAt  : 'April 24, 2018',
@@ -14,7 +13,6 @@ export const items = [
     },
     {
         id         : '6da8747f-b474-4c9a-9eba-5ef212285500',
-        folderId   : null,
         name       : 'Photos',
         createdBy  : 'Brian Hughes',
         createdAt  : 'November 01, 2021',
@@ -26,7 +24,6 @@ export const items = [
     },
     {
         id         : 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
-        folderId   : null,
         name       : 'Work',
         createdBy  : 'Brian Hughes',
         createdAt  : 'May 8, 2020',
@@ -38,7 +35,6 @@ export const items = [
     },
     {
         id         : '5cb66e32-d1ac-4b9a-8c34-5991ce25add2',
-        folderId   : null,
         name       : 'Contract #123',
         createdBy  : 'Brian Hughes',
         createdAt  : 'January 14, 2021',
@@ -50,7 +46,6 @@ export const items = [
     },
     {
         id         : '3ffc3d84-8f2d-4929-903a-ef6fc21657a7',
-        folderId   : null,
         name       : 'Estimated budget',
         createdBy  : 'Brian Hughes',
         createdAt  : 'December 14, 2020',
@@ -62,7 +57,6 @@ export const items = [
     },
     {
         id         : '157adb9a-14f8-4559-ac93-8be893c9f80a',
-        folderId   : null,
         name       : 'DMCA notice #42',
         createdBy  : 'Brian Hughes',
         createdAt  : 'May 8, 2021',
@@ -74,7 +68,6 @@ export const items = [
     },
     {
         id         : '4f64597a-df7e-461c-ad60-f33e5f7e0747',
-        folderId   : null,
         name       : 'Invoices',
         createdBy  : 'Brian Hughes',
         createdAt  : 'January 12, 2020',
@@ -86,7 +79,6 @@ export const items = [
     },
     {
         id         : 'e445c445-57b2-4476-8c62-b068e3774b8e',
-        folderId   : null,
         name       : 'Crash logs',
         createdBy  : 'Brian Hughes',
         createdAt  : 'June 8, 2020',
@@ -98,7 +90,6 @@ export const items = [
     },
     {
         id         : 'b482f93e-7847-4614-ad48-b78b78309f81',
-        folderId   : null,
         name       : 'System logs',
         createdBy  : 'Brian Hughes',
         createdAt  : 'June 8, 2020',
@@ -110,7 +101,6 @@ export const items = [
     },
     {
         id         : 'ec07a98d-2e5b-422c-a9b2-b5d1c0e263f5',
-        folderId   : null,
         name       : 'Personal projects',
         createdBy  : 'Brian Hughes',
         createdAt  : 'March 18, 2020',
@@ -122,7 +112,6 @@ export const items = [
     },
     {
         id         : 'ae908d59-07da-4dd8-aba0-124e50289295',
-        folderId   : null,
         name       : 'Biometric portrait',
         createdBy  : 'Brian Hughes',
         createdAt  : 'August 29, 2020',
@@ -134,7 +123,6 @@ export const items = [
     },
     {
         id         : '4038a5b6-5b1a-432d-907c-e037aeb817a8',
-        folderId   : null,
         name       : 'Scanned image 20201012-1',
         createdBy  : 'Brian Hughes',
         createdAt  : 'September 13, 2020',
@@ -146,7 +134,6 @@ export const items = [
     },
     {
         id         : '630d2e9a-d110-47a0-ac03-256073a0f56d',
-        folderId   : null,
         name       : 'Scanned image 20201012-2',
         createdBy  : 'Brian Hughes',
         createdAt  : 'September 14, 2020',
@@ -158,7 +145,6 @@ export const items = [
     },
     {
         id         : '1417d5ed-b616-4cff-bfab-286677b69d79',
-        folderId   : null,
         name       : 'Prices',
         createdBy  : 'Brian Hughes',
         createdAt  : 'April 07, 2020',
@@ -170,7 +156,6 @@ export const items = [
     },
     {
         id         : 'bd2817c7-6751-40dc-b252-b6b5634c0689',
-        folderId   : null,
         name       : 'Shopping list',
         createdBy  : 'Brian Hughes',
         createdAt  : 'March 26, 2021',
@@ -182,7 +167,6 @@ export const items = [
     },
     {
         id         : '14fb47c9-6eeb-4070-919c-07c8133285d1',
-        folderId   : null,
         name       : 'Summer budget',
         createdBy  : 'Brian Hughes',
         createdAt  : 'June 02, 2020',
@@ -191,67 +175,5 @@ export const items = [
         type       : 'XLS',
         contents   : null,
         description: null
-    },
-
-    {
-        id         : '894e8514-03d3-4f5e-bb28-f6c092501fae',
-        folderId   : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
-        name       : 'A personal file',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'June 02, 2020',
-        modifiedAt : 'June 02, 2020',
-        size       : '943 KB',
-        type       : 'XLS',
-        contents   : null,
-        description: null
-    },
-    {
-        id         : '74010810-16cf-441d-a1aa-c9fb620fceea',
-        folderId   : 'cd6897cb-acfd-4016-8b53-3f66a5b5fc68',
-        name       : 'A personal folder',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'November 01, 2021',
-        modifiedAt : 'November 01, 2021',
-        size       : '3015 MB',
-        type       : 'folder',
-        contents   : '907 files',
-        description: 'Personal photos; selfies, family, vacation and etc.'
-    },
-    {
-        id         : 'a8c73e5a-8114-436d-ab54-d900b50b3762',
-        folderId   : '74010810-16cf-441d-a1aa-c9fb620fceea',
-        name       : 'A personal file within the personal folder',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'June 02, 2020',
-        modifiedAt : 'June 02, 2020',
-        size       : '943 KB',
-        type       : 'XLS',
-        contents   : null,
-        description: null
-    },
-
-    {
-        id         : '12d851a8-4f60-473e-8a59-abe4b422ea99',
-        folderId   : '6da8747f-b474-4c9a-9eba-5ef212285500',
-        name       : 'Photos file',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'June 02, 2020',
-        modifiedAt : 'June 02, 2020',
-        size       : '943 KB',
-        type       : 'XLS',
-        contents   : null,
-        description: null
-    },
-    {
-        id         : '2836766d-27e1-4f40-a31a-5a8419105e7e',
-        folderId   : 'ed58add1-45a7-41db-887d-3ca7ee7f2719',
-        name       : 'Work file',
-        createdBy  : 'Brian Hughes',
-        createdAt  : 'June 02, 2020',
-        modifiedAt : 'June 02, 2020',
-        size       : '943 KB',
-        type       : 'XLS',
-        contents   : null,
-        description: null
     }
 ];

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_solid:star',
+        icon       : 'heroicons_outline: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_solid:mail',
+        icon       : 'heroicons_outline: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_solid:refresh',
+        icon       : 'heroicons_outline: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_solid:mail',
+        icon       : 'heroicons_outline: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_solid:star',
+        icon       : 'heroicons_outline: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_solid:refresh',
+        icon       : 'heroicons_outline: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/search/api.ts

@@ -4,7 +4,6 @@ import { FuseNavigationItem, FuseNavigationService } from '@fuse/components/navi
 import { FuseMockApiService } from '@fuse/lib/mock-api';
 import { defaultNavigation } from 'app/mock-api/common/navigation/data';
 import { contacts } from 'app/mock-api/apps/contacts/data';
-import { tasks } from 'app/mock-api/apps/tasks/data';
 
 @Injectable({
     providedIn: 'root'
@@ -13,7 +12,6 @@ export class SearchMockApi
 {
     private readonly _defaultNavigation: FuseNavigationItem[] = defaultNavigation;
     private readonly _contacts: any[] = contacts;
-    private readonly _tasks: any[] = tasks;
 
     /**
      * Constructor
@@ -56,75 +54,58 @@ export class SearchMockApi
                     return [200, {results: []}];
                 }
 
-                // Filter the contacts
-                const contactsResults = cloneDeep(this._contacts)
-                    .filter(contact => contact.name.toLowerCase().includes(query));
-
                 // Filter the navigation
-                const pagesResults = cloneDeep(flatNavigation)
-                    .filter(page => (page.title?.toLowerCase().includes(query) || (page.subtitle && page.subtitle.includes(query))));
+                const navigationResults = cloneDeep(flatNavigation).filter(item => (item.title?.toLowerCase().includes(query) || (item.subtitle && item.subtitle.includes(query))));
 
-                // Filter the tasks
-                const tasksResults = cloneDeep(this._tasks)
-                    .filter(task => task.title.toLowerCase().includes(query));
+                // Filter the contacts
+                const contactsResults = cloneDeep(this._contacts).filter(user => user.name.toLowerCase().includes(query));
 
-                // Prepare the results array
+                // Create the results array
                 const results = [];
 
+                // If there are navigation results...
+                if ( navigationResults.length > 0 )
+                {
+                    // Normalize the results while marking the found chars
+                    navigationResults.forEach((result: any) => {
+
+                        // Normalize
+                        result['hint'] = result.link;
+                        result['resultType'] = 'page';
+
+                        // Mark the found chars
+                        const re = new RegExp('(' + query.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ')', 'ig');
+                        result.title = result.title.replace(re, '<mark>$1</mark>');
+                    });
+
+                    // Add the results
+                    results.push(...navigationResults);
+                }
+
                 // If there are contacts results...
                 if ( contactsResults.length > 0 )
                 {
-                    // Normalize the results
+                    // Normalize the results while marking the found chars
                     contactsResults.forEach((result) => {
 
+                        // Normalize
+                        result.title = result.name;
+                        result.resultType = 'contact';
+
+                        // Make the found chars bold
+                        const re = new RegExp('(' + query.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&') + ')', 'ig');
+                        result.title = result.title.replace(re, '<mark>$1</mark>');
+
                         // Add a link
                         result.link = '/apps/contacts/' + result.id;
                     });
 
-                    // Add to the results
-                    results.push({
-                        id     : 'contacts',
-                        label  : 'Contacts',
-                        results: contactsResults
-                    });
-                }
-
-                // If there are page results...
-                if ( pagesResults.length > 0 )
-                {
-                    // Normalize the results
-                    pagesResults.forEach((result: any) => {
-
-                    });
-
-                    // Add to the results
-                    results.push({
-                        id     : 'pages',
-                        label  : 'Pages',
-                        results: pagesResults
-                    });
-                }
-
-                // If there are tasks results...
-                if ( tasksResults.length > 0 )
-                {
-                    // Normalize the results
-                    tasksResults.forEach((result) => {
-
-                        // Add a link
-                        result.link = '/apps/tasks/' + result.id;
-                    });
-
-                    // Add to the results
-                    results.push({
-                        id     : 'tasks',
-                        label  : 'Tasks',
-                        results: tasksResults
-                    });
+                    // Add the results to the results object
+                    results.push(...contactsResults);
                 }
 
                 // Return the response
-                return [200, results];
+                return [200, {results}];
             });
     }
 }

src/app/mock-api/common/shortcuts/data.ts

@@ -3,9 +3,9 @@ export const shortcuts = [
     {
         id         : 'a1ae91d3-e2cb-459b-9be9-a184694f548b',
         label      : 'Changelog',
-        description: 'List of changes',
+        description: 'Latest version: v1.2',
         icon       : 'heroicons_outline:clipboard-list',
-        link       : '/docs/changelog',
+        link       : '/dashboards/project',
         useRouter  : true
     },
     {
@@ -13,7 +13,7 @@ export const shortcuts = [
         label      : 'Documentation',
         description: 'Getting started',
         icon       : 'heroicons_outline:book-open',
-        link       : '/docs/guides/getting-started/introduction',
+        link       : '/dashboards/project',
         useRouter  : true
     },
     {
@@ -21,7 +21,7 @@ export const shortcuts = [
         label      : 'Help center',
         description: 'FAQs and guides',
         icon       : 'heroicons_outline:support',
-        link       : '/apps/help-center',
+        link       : '/pages/help-center',
         useRouter  : true
     },
     {
@@ -29,7 +29,7 @@ export const shortcuts = [
         label      : 'Dashboard',
         description: 'User analytics',
         icon       : 'heroicons_outline:chart-pie',
-        link       : '/dashboards/analytics',
+        link       : '/dashboards/project',
         useRouter  : true
     },
     {
@@ -67,7 +67,7 @@ export const shortcuts = [
     {
         id         : '0a240ab8-e19d-4503-bf68-20013030d526',
         label      : 'Reload',
-        description: 'Reload the app',
+        description: 'Restart the app',
         icon       : 'heroicons_outline:refresh',
         link       : '/dashboards/project',
         useRouter  : false

src/app/modules/admin/apps/academy/academy.component.html

@@ -1 +0,0 @@
-<router-outlet></router-outlet>

src/app/modules/admin/apps/academy/academy.component.ts

@@ -1,17 +0,0 @@
-import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-
-@Component({
-    selector       : 'academy',
-    templateUrl    : './academy.component.html',
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AcademyComponent
-{
-    /**
-     * Constructor
-     */
-    constructor()
-    {
-    }
-}

src/app/modules/admin/apps/academy/academy.module.ts

@@ -1,44 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { MatButtonModule } from '@angular/material/button';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { FuseFindByKeyPipeModule } from '@fuse/pipes/find-by-key';
-import { SharedModule } from 'app/shared/shared.module';
-import { academyRoutes } from 'app/modules/admin/apps/academy/academy.routing';
-import { AcademyComponent } from 'app/modules/admin/apps/academy/academy.component';
-import { AcademyDetailsComponent } from 'app/modules/admin/apps/academy/details/details.component';
-import { AcademyListComponent } from 'app/modules/admin/apps/academy/list/list.component';
-import { MatTabsModule } from '@angular/material/tabs';
-
-@NgModule({
-    declarations: [
-        AcademyComponent,
-        AcademyDetailsComponent,
-        AcademyListComponent
-    ],
-    imports     : [
-        RouterModule.forChild(academyRoutes),
-        MatButtonModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatProgressBarModule,
-        MatSelectModule,
-        MatSidenavModule,
-        MatSlideToggleModule,
-        MatTooltipModule,
-        FuseFindByKeyPipeModule,
-        SharedModule,
-        MatTabsModule
-    ]
-})
-export class AcademyModule
-{
-}

src/app/modules/admin/apps/academy/academy.resolvers.ts

@@ -1,110 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
-import { Observable, throwError } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
-import { AcademyService } from 'app/modules/admin/apps/academy/academy.service';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class AcademyCategoriesResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _academyService: AcademyService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Category[]>
-    {
-        return this._academyService.getCategories();
-    }
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class AcademyCoursesResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _academyService: AcademyService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course[]>
-    {
-        return this._academyService.getCourses();
-    }
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class AcademyCourseResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(
-        private _router: Router,
-        private _academyService: AcademyService
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Course>
-    {
-        return this._academyService.getCourseById(route.paramMap.get('id'))
-                   .pipe(
-                       // Error here means the requested task is not available
-                       catchError((error) => {
-
-                           // Log the error
-                           console.error(error);
-
-                           // Get the parent url
-                           const parentUrl = state.url.split('/').slice(0, -1).join('/');
-
-                           // Navigate to there
-                           this._router.navigateByUrl(parentUrl);
-
-                           // Throw an error
-                           return throwError(error);
-                       })
-                   );
-    }
-}

src/app/modules/admin/apps/academy/academy.routing.ts

@@ -1,32 +0,0 @@
-import { Route } from '@angular/router';
-import { AcademyComponent } from 'app/modules/admin/apps/academy/academy.component';
-import { AcademyListComponent } from 'app/modules/admin/apps/academy/list/list.component';
-import { AcademyDetailsComponent } from 'app/modules/admin/apps/academy/details/details.component';
-import { AcademyCategoriesResolver, AcademyCourseResolver, AcademyCoursesResolver } from 'app/modules/admin/apps/academy/academy.resolvers';
-
-export const academyRoutes: Route[] = [
-    {
-        path     : '',
-        component: AcademyComponent,
-        resolve  : {
-            categories: AcademyCategoriesResolver
-        },
-        children : [
-            {
-                path     : '',
-                pathMatch: 'full',
-                component: AcademyListComponent,
-                resolve  : {
-                    courses: AcademyCoursesResolver
-                }
-            },
-            {
-                path     : ':id',
-                component: AcademyDetailsComponent,
-                resolve  : {
-                    course: AcademyCourseResolver
-                }
-            }
-        ]
-    }
-];

src/app/modules/admin/apps/academy/academy.service.ts

@@ -1,105 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { BehaviorSubject, Observable, of, throwError } from 'rxjs';
-import { map, switchMap, tap } from 'rxjs/operators';
-import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class AcademyService
-{
-    // Private
-    private _categories: BehaviorSubject<Category[] | null> = new BehaviorSubject(null);
-    private _course: BehaviorSubject<Course | null> = new BehaviorSubject(null);
-    private _courses: BehaviorSubject<Course[] | null> = new BehaviorSubject(null);
-
-    /**
-     * Constructor
-     */
-    constructor(private _httpClient: HttpClient)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Getter for categories
-     */
-    get categories$(): Observable<Category[]>
-    {
-        return this._categories.asObservable();
-    }
-
-    /**
-     * Getter for courses
-     */
-    get courses$(): Observable<Course[]>
-    {
-        return this._courses.asObservable();
-    }
-
-    /**
-     * Getter for course
-     */
-    get course$(): Observable<Course>
-    {
-        return this._course.asObservable();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Get categories
-     */
-    getCategories(): Observable<Category[]>
-    {
-        return this._httpClient.get<Category[]>('api/apps/academy/categories').pipe(
-            tap((response: any) => {
-                this._categories.next(response);
-            })
-        );
-    }
-
-    /**
-     * Get courses
-     */
-    getCourses(): Observable<Course[]>
-    {
-        return this._httpClient.get<Course[]>('api/apps/academy/courses').pipe(
-            tap((response: any) => {
-                this._courses.next(response);
-            })
-        );
-    }
-
-    /**
-     * Get course by id
-     */
-    getCourseById(id: string): Observable<Course>
-    {
-        return this._httpClient.get<Course>('api/apps/academy/courses/course', {params: {id}}).pipe(
-            map((course) => {
-
-                // Update the course
-                this._course.next(course);
-
-                // Return the course
-                return course;
-            }),
-            switchMap((course) => {
-
-                if ( !course )
-                {
-                    return throwError('Could not found course with id of ' + id + '!');
-                }
-
-                return of(course);
-            })
-        );
-    }
-}

src/app/modules/admin/apps/academy/academy.types.ts

@@ -1,29 +0,0 @@
-export interface Category
-{
-    id?: string;
-    title?: string;
-    slug?: string;
-}
-
-export interface Course
-{
-    id?: string;
-    title?: string;
-    slug?: string;
-    description?: string;
-    category?: string;
-    duration?: number;
-    steps?: {
-        order?: number;
-        title?: string;
-        subtitle?: string;
-        content?: string;
-    }[];
-    totalSteps?: number;
-    updatedAt?: number;
-    featured?: boolean;
-    progress?: {
-        currentStep?: number;
-        completed?: number;
-    };
-}

src/app/modules/admin/apps/academy/details/details.component.html

@@ -1,201 +0,0 @@
-<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden">
-
-    <mat-drawer-container class="flex-auto h-full">
-
-        <!-- Drawer -->
-        <mat-drawer
-            class="w-90 dark:bg-gray-900"
-            [autoFocus]="false"
-            [mode]="drawerMode"
-            [opened]="drawerOpened"
-            #matDrawer>
-            <div class="flex flex-col items-start p-8 border-b">
-                <!-- Back to courses -->
-                <a
-                    class="inline-flex items-center leading-6 text-primary hover:underline"
-                    [routerLink]="['..']">
-                    <span class="inline-flex items-center">
-                        <mat-icon
-                            class="icon-size-5 text-current"
-                            [svgIcon]="'heroicons_solid:arrow-sm-left'"></mat-icon>
-                        <span class="ml-1.5 font-medium leading-5">Back to courses</span>
-                    </span>
-                </a>
-                <!-- Course category -->
-                <ng-container *ngIf="(course.category | fuseFindByKey:'slug':categories) as category">
-                    <div
-                        class="mt-7 py-0.5 px-3 rounded-full text-sm font-semibold"
-                        [ngClass]="{'text-blue-800 bg-blue-100 dark:text-blue-50 dark:bg-blue-500': category.slug === 'web',
-                                    'text-green-800 bg-green-100 dark:text-green-50 dark:bg-green-500': category.slug === 'android',
-                                    'text-pink-800 bg-pink-100 dark:text-pink-50 dark:bg-pink-500': category.slug === 'cloud',
-                                    'text-amber-800 bg-amber-100 dark:text-amber-50 dark:bg-amber-500': category.slug === 'firebase'}">
-                        {{category.title}}
-                    </div>
-                </ng-container>
-                <!-- Course title & description -->
-                <div class="mt-3 text-2xl font-semibold">{{course.title}}</div>
-                <div class="text-secondary">{{course.description}}</div>
-                <!-- Course time -->
-                <div class="mt-6 flex items-center leading-5 text-md text-secondary">
-                    <mat-icon
-                        class="icon-size-5 text-hint"
-                        [svgIcon]="'heroicons_solid:clock'"></mat-icon>
-                    <div class="ml-1.5">{{course.duration}} minutes</div>
-                </div>
-            </div>
-
-            <!-- Steps -->
-            <div class="py-2 px-8">
-                <ol>
-                    <ng-container *ngFor="let step of course.steps; let last = last; trackBy: trackByFn">
-                        <li
-                            class="relative group py-6"
-                            [class.current-step]="step.order === currentStep">
-                            <ng-container *ngIf="!last">
-                                <div
-                                    class="absolute top-6 left-4 w-0.5 h-full -ml-px"
-                                    [ngClass]="{'bg-primary': step.order < currentStep,
-                                                'bg-gray-300 dark:bg-gray-600': step.order >= currentStep}"></div>
-                            </ng-container>
-                            <div
-                                class="relative flex items-start cursor-pointer"
-                                (click)="goToStep(step.order)">
-                                <div
-                                    class="flex flex-0 items-center justify-center w-8 h-8 rounded-full ring-2 ring-inset ring-transparent bg-card dark:bg-default"
-                                    [ngClass]="{'bg-primary dark:bg-primary text-on-primary group-hover:bg-primary-800': step.order < currentStep,
-                                                'ring-primary': step.order === currentStep,
-                                                'ring-gray-300 dark:ring-gray-600 group-hover:ring-gray-400': step.order > currentStep}">
-                                    <!-- Check icon, show if the step is completed -->
-                                    <ng-container *ngIf="step.order < currentStep">
-                                        <mat-icon
-                                            class="icon-size-5 text-current"
-                                            [svgIcon]="'heroicons_solid:check'"></mat-icon>
-                                    </ng-container>
-                                    <!-- Step order, show if the step is the current step -->
-                                    <ng-container *ngIf="step.order === currentStep">
-                                        <div class="text-md font-semibold text-primary dark:text-primary-500">{{step.order + 1}}</div>
-                                    </ng-container>
-                                    <!-- Step order, show if the step is not completed -->
-                                    <ng-container *ngIf="step.order > currentStep">
-                                        <div class="text-md font-semibold text-hint group-hover:text-secondary">{{step.order + 1}}</div>
-                                    </ng-container>
-                                </div>
-                                <div class="ml-4">
-                                    <div class="font-medium leading-4">{{step.title}}</div>
-                                    <div class="mt-1.5 text-md leading-4 text-secondary">{{step.subtitle}}</div>
-                                </div>
-                            </div>
-                        </li>
-                    </ng-container>
-                </ol>
-            </div>
-
-        </mat-drawer>
-
-        <!-- Drawer content -->
-        <mat-drawer-content class="flex flex-col overflow-hidden">
-
-            <!-- Header -->
-            <div class="lg:hidden flex flex-0 items-center py-2 pl-4 pr-6 sm:py-4 md:pl-6 md:pr-8 border-b lg:border-b-0 bg-card dark:bg-transparent">
-                <!-- Title & Actions -->
-                <button
-                    mat-icon-button
-                    [routerLink]="['..']">
-                    <mat-icon [svgIcon]="'heroicons_outline:arrow-sm-left'"></mat-icon>
-                </button>
-                <h2 class="ml-2.5 text-md sm:text-xl font-medium tracking-tight truncate">
-                    {{course.title}}
-                </h2>
-            </div>
-            <mat-progress-bar
-                class="hidden lg:block flex-0 h-0.5 w-full"
-                [value]="100 * (currentStep + 1) / course.totalSteps"></mat-progress-bar>
-
-            <!-- Main -->
-            <div
-                class="flex-auto overflow-y-auto"
-                cdkScrollable>
-
-                <!-- Steps -->
-                <mat-tab-group
-                    class="fuse-mat-no-header"
-                    [animationDuration]="'200'"
-                    #courseSteps>
-                    <ng-container *ngFor="let step of course.steps; trackBy: trackByFn">
-                        <mat-tab>
-                            <ng-template matTabContent>
-                                <div
-                                    class="prose prose-sm max-w-3xl mx-auto sm:my-2 lg:mt-4 p-6 sm:p-10 sm:py-12 rounded-2xl shadow overflow-hidden bg-card"
-                                    [innerHTML]="step.content"></div>
-                            </ng-template>
-                        </mat-tab>
-                    </ng-container>
-                </mat-tab-group>
-
-                <!-- Navigation - Desktop -->
-                <div class="z-10 sticky hidden lg:flex bottom-4 p-4">
-                    <div class="flex items-center justify-center mx-auto p-2 rounded-full shadow-lg bg-primary">
-                        <button
-                            class="flex-0"
-                            mat-flat-button
-                            [color]="'primary'"
-                            (click)="goToPreviousStep()">
-                            <mat-icon
-                                class="mr-2"
-                                [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
-                            <span class="mr-1">Prev</span>
-                        </button>
-                        <div class="flex items-center justify-center mx-2.5 font-medium leading-5 text-on-primary">
-                            <span>{{currentStep + 1}}</span>
-                            <span class="mx-0.5 text-hint">/</span>
-                            <span>{{course.totalSteps}}</span>
-                        </div>
-                        <button
-                            class="flex-0"
-                            mat-flat-button
-                            [color]="'primary'"
-                            (click)="goToNextStep()">
-                            <span class="ml-1">Next</span>
-                            <mat-icon
-                                class="ml-2"
-                                [svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
-                        </button>
-                    </div>
-                </div>
-
-            </div>
-
-            <!-- Progress & Navigation - Mobile -->
-            <div class="lg:hidden flex items-center p-4 border-t bg-card">
-                <button
-                    mat-icon-button
-                    (click)="matDrawer.toggle()">
-                    <mat-icon [svgIcon]="'heroicons_outline:view-list'"></mat-icon>
-                </button>
-                <div class="flex items-center justify-center ml-1 lg:ml-2 font-medium leading-5">
-                    <span>{{currentStep + 1}}</span>
-                    <span class="mx-0.5 text-hint">/</span>
-                    <span>{{course.totalSteps}}</span>
-                </div>
-                <mat-progress-bar
-                    class="flex-auto ml-6 rounded-full"
-                    [value]="100 * (currentStep + 1) / course.totalSteps"></mat-progress-bar>
-                <button
-                    class="ml-4"
-                    mat-icon-button
-                    (click)="goToPreviousStep()">
-                    <mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-left'"></mat-icon>
-                </button>
-                <button
-                    class="ml-0.5"
-                    mat-icon-button
-                    (click)="goToNextStep()">
-                    <mat-icon [svgIcon]="'heroicons_outline:arrow-narrow-right'"></mat-icon>
-                </button>
-            </div>
-
-        </mat-drawer-content>
-
-    </mat-drawer-container>
-
-</div>

src/app/modules/admin/apps/academy/details/details.component.ts

@@ -1,204 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { MatTabGroup } from '@angular/material/tabs';
-import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { FuseMediaWatcherService } from '@fuse/services/media-watcher';
-import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
-import { AcademyService } from 'app/modules/admin/apps/academy/academy.service';
-
-@Component({
-    selector       : 'academy-details',
-    templateUrl    : './details.component.html',
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AcademyDetailsComponent implements OnInit, OnDestroy
-{
-    @ViewChild('courseSteps', {static: true}) courseSteps: MatTabGroup;
-    categories: Category[];
-    course: Course;
-    currentStep: number = 0;
-    drawerMode: 'over' | 'side' = 'side';
-    drawerOpened: boolean = true;
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(
-        @Inject(DOCUMENT) private _document: Document,
-        private _academyService: AcademyService,
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _elementRef: ElementRef,
-        private _fuseMediaWatcherService: FuseMediaWatcherService
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Get the categories
-        this._academyService.categories$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((categories: Category[]) => {
-
-                // Get the categories
-                this.categories = categories;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Get the course
-        this._academyService.course$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((course: Course) => {
-
-                // Get the course
-                this.course = course;
-
-                // Go to step
-                this.goToStep(course.progress.currentStep);
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Subscribe to media changes
-        this._fuseMediaWatcherService.onMediaChange$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe(({matchingAliases}) => {
-
-                // Set the drawerMode and drawerOpened
-                if ( matchingAliases.includes('lg') )
-                {
-                    this.drawerMode = 'side';
-                    this.drawerOpened = true;
-                }
-                else
-                {
-                    this.drawerMode = 'over';
-                    this.drawerOpened = false;
-                }
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Go to given step
-     *
-     * @param step
-     */
-    goToStep(step: number): void
-    {
-        // Set the current step
-        this.currentStep = step;
-
-        // Go to the step
-        this.courseSteps.selectedIndex = this.currentStep;
-
-        // Mark for check
-        this._changeDetectorRef.markForCheck();
-    }
-
-    /**
-     * Go to previous step
-     */
-    goToPreviousStep(): void
-    {
-        // Return if we already on the first step
-        if ( this.currentStep === 0 )
-        {
-            return;
-        }
-
-        // Go to step
-        this.goToStep(this.currentStep - 1);
-
-        // Scroll the current step selector from sidenav into view
-        this._scrollCurrentStepElementIntoView();
-    }
-
-    /**
-     * Go to next step
-     */
-    goToNextStep(): void
-    {
-        // Return if we already on the last step
-        if ( this.currentStep === this.course.totalSteps - 1 )
-        {
-            return;
-        }
-
-        // Go to step
-        this.goToStep(this.currentStep + 1);
-
-        // Scroll the current step selector from sidenav into view
-        this._scrollCurrentStepElementIntoView();
-    }
-
-    /**
-     * Track by function for ngFor loops
-     *
-     * @param index
-     * @param item
-     */
-    trackByFn(index: number, item: any): any
-    {
-        return item.id || index;
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Private methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Scrolls the current step element from
-     * sidenav into the view. This only happens when
-     * previous/next buttons pressed as we don't want
-     * to change the scroll position of the sidebar
-     * when the user actually clicks around the sidebar.
-     *
-     * @private
-     */
-    private _scrollCurrentStepElementIntoView(): void
-    {
-        // Wrap everything into setTimeout so we can make sure that the 'current-step' class points to correct element
-        setTimeout(() => {
-
-            // Get the current step element and scroll it into view
-            const currentStepElement = this._document.getElementsByClassName('current-step')[0];
-            if ( currentStepElement )
-            {
-                currentStepElement.scrollIntoView({
-                    behavior: 'smooth',
-                    block   : 'start'
-                });
-            }
-        });
-    }
-}

src/app/modules/admin/apps/academy/list/list.component.html

@@ -1,196 +0,0 @@
-<div
-    class="absolute inset-0 flex flex-col min-w-0 overflow-y-auto"
-    cdkScrollable>
-
-    <!-- Header -->
-    <div class="relative flex-0 py-8 px-4 sm:p-16 overflow-hidden bg-gray-800 dark">
-        <!-- Background - @formatter:off -->
-        <!-- Rings -->
-        <svg class="absolute inset-0 pointer-events-none"
-             viewBox="0 0 960 540" width="100%" height="100%" preserveAspectRatio="xMidYMax slice" xmlns="http://www.w3.org/2000/svg">
-            <g class="text-gray-700 opacity-25" fill="none" stroke="currentColor" stroke-width="100">
-                <circle r="234" cx="196" cy="23"></circle>
-                <circle r="234" cx="790" cy="491"></circle>
-            </g>
-        </svg>
-        <!-- @formatter:on -->
-        <div class="z-10 relative flex flex-col items-center">
-            <h2 class="text-xl font-semibold">FUSE ACADEMY</h2>
-            <div class="mt-1 text-4xl sm:text-7xl font-extrabold tracking-tight leading-tight text-center">
-                What do you want to learn today?
-            </div>
-            <div class="max-w-2xl mt-6 sm:text-2xl text-center tracking-tight text-secondary">
-                Our courses will step you through the process of a building small applications, or adding new features to existing applications.
-            </div>
-        </div>
-    </div>
-
-    <!-- Main -->
-    <div class="flex flex-auto p-6 sm:p-10">
-
-        <div class="flex flex-col flex-auto w-full max-w-xs sm:max-w-5xl mx-auto">
-            <!-- Filters -->
-            <div class="flex flex-col sm:flex-row items-center justify-between w-full max-w-xs sm:max-w-none">
-                <mat-form-field class="fuse-mat-no-subscript w-full sm:w-36">
-                    <mat-select
-                        [value]="'all'"
-                        (selectionChange)="filterByCategory($event)">
-                        <mat-option [value]="'all'">All</mat-option>
-                        <ng-container *ngFor="let category of categories; trackBy: trackByFn">
-                            <mat-option [value]="category.slug">{{category.title}}</mat-option>
-                        </ng-container>
-                    </mat-select>
-                </mat-form-field>
-                <mat-form-field
-                    class="fuse-mat-no-subscript w-full sm:w-72 mt-4 sm:mt-0 sm:ml-4"
-                    [floatLabel]="'always'">
-                    <mat-icon
-                        matPrefix
-                        class="icon-size-5"
-                        [svgIcon]="'heroicons_solid:search'"></mat-icon>
-                    <input
-                        (input)="filterByQuery(query.value)"
-                        placeholder="Search by title or description"
-                        matInput
-                        #query>
-                </mat-form-field>
-                <mat-slide-toggle
-                    class="mt-8 sm:mt-0 sm:ml-auto"
-                    [color]="'primary'"
-                    (change)="toggleCompleted($event)">
-                    Hide completed
-                </mat-slide-toggle>
-            </div>
-            <!-- Courses -->
-            <ng-container *ngIf="this.filteredCourses.length; else noCourses">
-                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mt-8 sm:mt-10">
-                    <ng-container *ngFor="let course of filteredCourses; trackBy: trackByFn">
-                        <!-- Course -->
-                        <div class="flex flex-col h-96 shadow rounded-2xl overflow-hidden bg-card">
-                            <div class="flex flex-col p-6">
-                                <div class="flex items-center justify-between">
-                                    <!-- Course category -->
-                                    <ng-container *ngIf="(course.category | fuseFindByKey:'slug':categories) as category">
-                                        <div
-                                            class="py-0.5 px-3 rounded-full text-sm font-semibold"
-                                            [ngClass]="{'text-blue-800 bg-blue-100 dark:text-blue-50 dark:bg-blue-500': category.slug === 'web',
-                                                        'text-green-800 bg-green-100 dark:text-green-50 dark:bg-green-500': category.slug === 'android',
-                                                        'text-pink-800 bg-pink-100 dark:text-pink-50 dark:bg-pink-500': category.slug === 'cloud',
-                                                        'text-amber-800 bg-amber-100 dark:text-amber-50 dark:bg-amber-500': category.slug === 'firebase'}">
-                                            {{category.title}}
-                                        </div>
-                                    </ng-container>
-                                    <!-- Completed at least once -->
-                                    <div class="flex items-center">
-                                        <ng-container *ngIf="course.progress.completed > 0">
-                                            <mat-icon
-                                                class="icon-size-5 text-green-600"
-                                                [svgIcon]="'heroicons_solid:badge-check'"
-                                                [matTooltip]="'You completed this course at least once'"></mat-icon>
-                                        </ng-container>
-                                    </div>
-                                </div>
-                                <!-- Course title & description -->
-                                <div class="mt-4 text-lg font-medium">{{course.title}}</div>
-                                <div class="mt-0.5 line-clamp-2 text-secondary">{{course.description}}</div>
-                                <div class="w-12 h-1 my-6 border-t-2"></div>
-                                <!-- Course time -->
-                                <div class="flex items-center leading-5 text-md text-secondary">
-                                    <mat-icon
-                                        class="icon-size-5 text-hint"
-                                        [svgIcon]="'heroicons_solid:clock'"></mat-icon>
-                                    <div class="ml-1.5">{{course.duration}} minutes</div>
-                                </div>
-                                <!-- Course completion -->
-                                <div class="flex items-center mt-2 leading-5 text-md text-secondary">
-                                    <mat-icon
-                                        class="icon-size-5 text-hint"
-                                        [svgIcon]="'heroicons_solid:academic-cap'"></mat-icon>
-                                    <ng-container *ngIf="course.progress.completed === 0">
-                                        <div class="ml-1.5">Never completed</div>
-                                    </ng-container>
-                                    <ng-container *ngIf="course.progress.completed > 0">
-                                        <div class="ml-1.5">
-                                            <span>Completed</span>
-                                            <span class="ml-1">
-                                                <!-- Once -->
-                                                <ng-container *ngIf="course.progress.completed === 1">once</ng-container>
-                                                <!-- Twice -->
-                                                <ng-container *ngIf="course.progress.completed === 2">twice</ng-container>
-                                                <!-- Others -->
-                                                <ng-container *ngIf="course.progress.completed > 2">{{course.progress.completed}}
-                                                    {{course.progress.completed | i18nPlural: {
-                                                        '=0'   : 'time',
-                                                        '=1'   : 'time',
-                                                        'other': 'times'
-                                                    } }}
-                                                </ng-container>
-                                            </span>
-                                        </div>
-                                    </ng-container>
-                                </div>
-                            </div>
-                            <!-- Footer -->
-                            <div class="flex flex-col w-full mt-auto">
-                                <!-- Course progress -->
-                                <div class="relative h-0.5">
-                                    <div
-                                        class="z-10 absolute inset-x-0 h-6 -mt-3"
-                                        [matTooltip]="course.progress.currentStep / course.totalSteps | percent"
-                                        [matTooltipPosition]="'above'"
-                                        [matTooltipClass]="'-mb-0.5'"></div>
-                                    <mat-progress-bar
-                                        class="h-0.5"
-                                        [value]="(100 * course.progress.currentStep) / course.totalSteps"></mat-progress-bar>
-                                </div>
-
-                                <!-- Course launch button -->
-                                <div class="px-6 py-4 text-right bg-gray-50 dark:bg-transparent">
-                                    <button
-                                        mat-stroked-button
-                                        [routerLink]="[course.id]">
-                                        <span class="inline-flex items-center">
-
-                                            <!-- Not started -->
-                                            <ng-container *ngIf="course.progress.currentStep === 0">
-                                                <!-- Never completed -->
-                                                <ng-container *ngIf="course.progress.completed === 0">
-                                                    <span>Start</span>
-                                                </ng-container>
-                                                <!-- Completed before -->
-                                                <ng-container *ngIf="course.progress.completed > 0">
-                                                    <span>Start again</span>
-                                                </ng-container>
-                                            </ng-container>
-
-                                            <!-- Started -->
-                                            <ng-container *ngIf="course.progress.currentStep > 0">
-                                                <span>Continue</span>
-                                            </ng-container>
-
-                                            <mat-icon
-                                                class="ml-1.5 icon-size-5"
-                                                [svgIcon]="'heroicons_solid:arrow-sm-right'"></mat-icon>
-                                        </span>
-                                    </button>
-                                </div>
-                            </div>
-                        </div>
-                    </ng-container>
-                </div>
-            </ng-container>
-
-            <!-- No courses -->
-            <ng-template #noCourses>
-                <div class="flex flex-auto flex-col items-center justify-center bg-gray-100 dark:bg-transparent">
-                    <mat-icon
-                        class="icon-size-20"
-                        [svgIcon]="'iconsmind:file_search'"></mat-icon>
-                    <div class="mt-6 text-2xl font-semibold tracking-tight text-secondary">No courses found!</div>
-                </div>
-            </ng-template>
-        </div>
-
-    </div>
-
-</div>

src/app/modules/admin/apps/academy/list/list.component.ts

@@ -1,157 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { MatSelectChange } from '@angular/material/select';
-import { MatSlideToggleChange } from '@angular/material/slide-toggle';
-import { BehaviorSubject, combineLatest, Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
-import { AcademyService } from 'app/modules/admin/apps/academy/academy.service';
-import { Category, Course } from 'app/modules/admin/apps/academy/academy.types';
-
-@Component({
-    selector       : 'academy-list',
-    templateUrl    : './list.component.html',
-    encapsulation  : ViewEncapsulation.None,
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AcademyListComponent implements OnInit, OnDestroy
-{
-    categories: Category[];
-    courses: Course[];
-    filteredCourses: Course[];
-    filters: {
-        categorySlug$: BehaviorSubject<string>;
-        query$: BehaviorSubject<string>;
-        hideCompleted$: BehaviorSubject<boolean>;
-    } = {
-        categorySlug$ : new BehaviorSubject('all'),
-        query$        : new BehaviorSubject(''),
-        hideCompleted$: new BehaviorSubject(false)
-    };
-
-    private _unsubscribeAll: Subject<any> = new Subject<any>();
-
-    /**
-     * Constructor
-     */
-    constructor(
-        private _activatedRoute: ActivatedRoute,
-        private _changeDetectorRef: ChangeDetectorRef,
-        private _router: Router,
-        private _academyService: AcademyService
-    )
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Lifecycle hooks
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * On init
-     */
-    ngOnInit(): void
-    {
-        // Get the categories
-        this._academyService.categories$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((categories: Category[]) => {
-                this.categories = categories;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Get the courses
-        this._academyService.courses$
-            .pipe(takeUntil(this._unsubscribeAll))
-            .subscribe((courses: Course[]) => {
-                this.courses = this.filteredCourses = courses;
-
-                // Mark for check
-                this._changeDetectorRef.markForCheck();
-            });
-
-        // Filter the courses
-        combineLatest([this.filters.categorySlug$, this.filters.query$, this.filters.hideCompleted$])
-            .subscribe(([categorySlug, query, hideCompleted]) => {
-
-                // Reset the filtered courses
-                this.filteredCourses = this.courses;
-
-                // Filter by category
-                if ( categorySlug !== 'all' )
-                {
-                    this.filteredCourses = this.filteredCourses.filter(course => course.category === categorySlug);
-                }
-
-                // Filter by search query
-                if ( query !== '' )
-                {
-                    this.filteredCourses = this.filteredCourses.filter(course => course.title.toLowerCase().includes(query.toLowerCase())
-                        || course.description.toLowerCase().includes(query.toLowerCase())
-                        || course.category.toLowerCase().includes(query.toLowerCase()));
-                }
-
-                // Filter by completed
-                if ( hideCompleted )
-                {
-                    this.filteredCourses = this.filteredCourses.filter(course => course.progress.completed === 0);
-                }
-            });
-    }
-
-    /**
-     * On destroy
-     */
-    ngOnDestroy(): void
-    {
-        // Unsubscribe from all subscriptions
-        this._unsubscribeAll.next();
-        this._unsubscribeAll.complete();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Filter by search query
-     *
-     * @param query
-     */
-    filterByQuery(query: string): void
-    {
-        this.filters.query$.next(query);
-    }
-
-    /**
-     * Filter by category
-     *
-     * @param change
-     */
-    filterByCategory(change: MatSelectChange): void
-    {
-        this.filters.categorySlug$.next(change.value);
-    }
-
-    /**
-     * Show/hide completed courses
-     *
-     * @param change
-     */
-    toggleCompleted(change: MatSlideToggleChange): void
-    {
-        this.filters.hideCompleted$.next(change.checked);
-    }
-
-    /**
-     * Track by function for ngFor loops
-     *
-     * @param index
-     * @param item
-     */
-    trackByFn(index: number, item: any): any
-    {
-        return item.id || index;
-    }
-}

src/app/modules/admin/apps/calendar/calendar.component.html

@@ -1,386 +0,0 @@
-<div class="absolute inset-0 flex flex-col min-w-0 overflow-hidden dark:bg-gray-900">
-
-    <mat-drawer-container class="flex-auto h-full bg-transparent">
-
-        <!-- Drawer -->
-        <mat-drawer
-            class="w-60 dark:bg-gray-900"
-            [autoFocus]="false"
-            [mode]="drawerMode"
-            [opened]="drawerOpened"
-            #drawer>
-            <calendar-sidebar (calendarUpdated)="onCalendarUpdated($event)"></calendar-sidebar>
-        </mat-drawer>
-
-        <mat-drawer-content class="flex">
-
-            <!-- Main -->
-            <div class="flex flex-col flex-auto">
-
-                <!-- Header -->
-                <div class="flex flex-0 flex-wrap items-center p-4 border-b bg-card">
-
-                    <button
-                        mat-icon-button
-                        (click)="toggleDrawer()">
-                        <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
-                    </button>
-
-                    <div class="ml-4 text-2xl font-semibold tracking-tight whitespace-nowrap">
-                        {{viewTitle}}
-                    </div>
-
-                    <button
-                        class="ml-5"
-                        mat-icon-button
-                        (click)="previous()">
-                        <mat-icon
-                            class="icon-size-5"
-                            [svgIcon]="'heroicons_solid:chevron-left'"></mat-icon>
-                    </button>
-
-                    <button
-                        mat-icon-button
-                        (click)="next()">
-                        <mat-icon
-                            class="icon-size-5"
-                            [svgIcon]="'heroicons_solid:chevron-right'"></mat-icon>
-                    </button>
-
-                    <button
-                        class="hidden md:inline-flex"
-                        mat-icon-button
-                        (click)="today()">
-                        <mat-icon [svgIcon]="'heroicons_outline:calendar'"></mat-icon>
-                    </button>
-
-                    <div class="hidden md:block ml-auto">
-                        <mat-form-field class="fuse-mat-dense fuse-mat-no-subscript w-30 ml-2">
-                            <mat-select
-                                (selectionChange)="changeView(viewChanger.value)"
-                                [value]="view"
-                                #viewChanger="matSelect">
-                                <mat-option [value]="'dayGridMonth'">Month</mat-option>
-                                <mat-option [value]="'timeGridWeek'">Week</mat-option>
-                                <mat-option [value]="'timeGridDay'">Day</mat-option>
-                                <mat-option [value]="'listYear'">Schedule</mat-option>
-                            </mat-select>
-                        </mat-form-field>
-                    </div>
-
-                    <!-- Mobile menu -->
-                    <div class="md:hidden ml-auto">
-                        <button
-                            class=""
-                            [matMenuTriggerFor]="actionsMenu"
-                            mat-icon-button>
-                            <mat-icon [svgIcon]="'heroicons_outline:dots-vertical'"></mat-icon>
-
-                            <mat-menu #actionsMenu="matMenu">
-                                <button
-                                    mat-menu-item
-                                    (click)="today()">
-                                    <mat-icon [svgIcon]="'heroicons_outline:calendar'"></mat-icon>
-                                    <span>Go to today</span>
-                                </button>
-                                <button
-                                    [matMenuTriggerFor]="actionsViewsMenu"
-                                    mat-menu-item>
-                                    <mat-icon [svgIcon]="'heroicons_outline:view-grid'"></mat-icon>
-                                    <span>View</span>
-                                </button>
-                            </mat-menu>
-
-                            <mat-menu #actionsViewsMenu="matMenu">
-                                <button
-                                    mat-menu-item
-                                    [disabled]="view === 'dayGridMonth'"
-                                    (click)="changeView('dayGridMonth')">
-                                    <span>Month</span>
-                                </button>
-                                <button
-                                    mat-menu-item
-                                    [disabled]="view === 'timeGridWeek'"
-                                    (click)="changeView('timeGridWeek')">
-                                    <span>Week</span>
-                                </button>
-                                <button
-                                    mat-menu-item
-                                    [disabled]="view === 'timeGridDay'"
-                                    (click)="changeView('timeGridDay')">
-                                    <span>Day</span>
-                                </button>
-                                <button
-                                    mat-menu-item
-                                    [disabled]="view === 'listYear'"
-                                    (click)="changeView('listYear')">
-                                    <span>Schedule</span>
-                                </button>
-                            </mat-menu>
-                        </button>
-                    </div>
-                </div>
-
-                <!-- FullCalendar -->
-                <div class="flex flex-col flex-auto">
-                    <full-calendar
-                        [defaultView]="view"
-                        [events]="events"
-                        [firstDay]="settings.startWeekOn"
-                        [handleWindowResize]="false"
-                        [header]="false"
-                        [height]="'parent'"
-                        [plugins]="calendarPlugins"
-                        [views]="views"
-                        (dateClick)="onDateClick($event)"
-                        (eventClick)="onEventClick($event)"
-                        (eventRender)="onEventRender($event)"
-                        #fullCalendar></full-calendar>
-                </div>
-
-                <!-- Event panel -->
-                <ng-template #eventPanel>
-
-                    <!-- Preview mode -->
-                    <ng-container *ngIf="panelMode === 'view'">
-                        <div class="flex-auto p-8">
-                            <!-- Info -->
-                            <div class="flex">
-                                <mat-icon [svgIcon]="'heroicons_outline:information-circle'"></mat-icon>
-                                <div class="flex flex-auto justify-between ml-6">
-                                    <!-- Info -->
-                                    <div>
-                                        <div class="text-3xl font-semibold tracking-tight leading-none">{{event.title || '(No title)'}}</div>
-                                        <div class="mt-0.5 text-secondary">{{event.start | date:'EEEE, MMMM d'}}</div>
-                                        <div class="text-secondary">{{recurrenceStatus}}</div>
-                                    </div>
-                                    <!-- Actions -->
-                                    <div class="flex -mt-2 -mr-2 ml-10">
-
-                                        <!-- Non-recurring event -->
-                                        <ng-container *ngIf="!event.recurrence">
-                                            <!-- Edit -->
-                                            <button
-                                                mat-icon-button
-                                                (click)="changeEventPanelMode('edit', 'single')">
-                                                <mat-icon [svgIcon]="'heroicons_outline:pencil-alt'"></mat-icon>
-                                            </button>
-                                            <!-- Delete -->
-                                            <button
-                                                mat-icon-button
-                                                (click)="deleteEvent(event)">
-                                                <mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
-                                            </button>
-                                        </ng-container>
-
-                                        <!-- Recurring event -->
-                                        <ng-container *ngIf="event.recurrence">
-                                            <!-- Edit -->
-                                            <button
-                                                mat-icon-button
-                                                [matMenuTriggerFor]="editMenu">
-                                                <mat-icon [svgIcon]="'heroicons_outline:pencil-alt'"></mat-icon>
-                                            </button>
-                                            <mat-menu #editMenu="matMenu">
-                                                <button
-                                                    mat-menu-item
-                                                    (click)="changeEventPanelMode('edit', 'single')">
-                                                    This event
-                                                </button>
-                                                <button
-                                                    mat-menu-item
-                                                    *ngIf="!event.isFirstInstance"
-                                                    (click)="changeEventPanelMode('edit', 'future')">
-                                                    This and following events
-                                                </button>
-                                                <button
-                                                    mat-menu-item
-                                                    (click)="changeEventPanelMode('edit', 'all')">
-                                                    All events
-                                                </button>
-                                            </mat-menu>
-                                            <!-- Delete -->
-                                            <button
-                                                mat-icon-button
-                                                [matMenuTriggerFor]="deleteMenu">
-                                                <mat-icon [svgIcon]="'heroicons_outline:trash'"></mat-icon>
-                                            </button>
-                                            <mat-menu #deleteMenu="matMenu">
-                                                <button
-                                                    mat-menu-item
-                                                    (click)="deleteEvent(event, 'single')">
-                                                    This event
-                                                </button>
-                                                <button
-                                                    mat-menu-item
-                                                    *ngIf="!event.isFirstInstance"
-                                                    (click)="deleteEvent(event, 'future')">
-                                                    This and following events
-                                                </button>
-                                                <button
-                                                    mat-menu-item
-                                                    (click)="deleteEvent(event, 'all')">
-                                                    All events
-                                                </button>
-                                            </mat-menu>
-                                        </ng-container>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Description -->
-                            <div
-                                class="flex mt-6"
-                                *ngIf="event.description">
-                                <mat-icon [svgIcon]="'heroicons_outline:menu-alt-2'"></mat-icon>
-                                <div class="flex-auto ml-6">{{event.description}}</div>
-                            </div>
-
-                            <!-- Calendar -->
-                            <div class="flex mt-6">
-                                <mat-icon [svgIcon]="'heroicons_outline:calendar'"></mat-icon>
-                                <div class="flex flex-auto items-center ml-6">
-                                    <div
-                                        class="w-2 h-2 rounded-full"
-                                        [ngClass]="getCalendar(event.calendarId).color"></div>
-                                    <div class="ml-3 leading-none">{{getCalendar(event.calendarId).title}}</div>
-                                </div>
-                            </div>
-                        </div>
-                    </ng-container>
-
-                    <!-- Add / Edit mode -->
-                    <ng-container *ngIf="panelMode === 'add' || panelMode === 'edit'">
-                        <form
-                            class="flex flex-col w-full p-6 pt-8 sm:pt-10 sm:pr-8"
-                            [formGroup]="eventForm">
-
-                            <!-- Title -->
-                            <div class="flex items-center">
-                                <mat-icon
-                                    class="hidden sm:inline-flex mr-6"
-                                    [svgIcon]="'heroicons_outline:pencil-alt'"></mat-icon>
-                                <mat-form-field class="fuse-mat-no-subscript flex-auto">
-                                    <input
-                                        matInput
-                                        [formControlName]="'title'"
-                                        [placeholder]="'Event title'">
-                                </mat-form-field>
-                            </div>
-
-                            <!-- Dates -->
-                            <div class="flex items-start mt-6">
-                                <mat-icon
-                                    class="hidden sm:inline-flex mt-3 mr-6"
-                                    [svgIcon]="'heroicons_outline:calendar'"></mat-icon>
-                                <div class="flex-auto">
-                                    <fuse-date-range
-                                        [formControlName]="'range'"
-                                        [dateFormat]="settings.dateFormat"
-                                        [timeRange]="!eventForm.get('allDay').value"
-                                        [timeFormat]="settings.timeFormat"></fuse-date-range>
-                                    <mat-checkbox
-                                        class="mt-4"
-                                        [color]="'primary'"
-                                        [formControlName]="'allDay'">
-                                        All day
-                                    </mat-checkbox>
-                                </div>
-                            </div>
-
-                            <!-- Recurrence -->
-                            <div
-                                class="flex items-center mt-6"
-                                *ngIf="!event.recurrence || eventEditMode !== 'single'">
-                                <mat-icon
-                                    class="hidden sm:inline-flex mr-6 transform -scale-x-1"
-                                    [svgIcon]="'heroicons_outline:refresh'"></mat-icon>
-                                <div
-                                    class="flex flex-auto items-center h-12 px-4 rounded-md border cursor-pointer shadow-sm border-gray-300 dark:bg-black dark:bg-opacity-5 dark:border-gray-500"
-                                    (click)="openRecurrenceDialog()">
-                                    <div class="flex-auto">
-                                        {{recurrenceStatus || 'Does not repeat'}}
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Calendar -->
-                            <div class="flex items-center mt-6">
-                                <mat-icon
-                                    class="hidden sm:inline-flex mr-6"
-                                    [svgIcon]="'heroicons_outline:tag'"></mat-icon>
-                                <mat-form-field class="fuse-mat-no-subscript flex-auto">
-                                    <mat-select
-                                        [formControlName]="'calendarId'"
-                                        (change)="$event.stopImmediatePropagation()">
-                                        <mat-select-trigger class="inline-flex items-center leading-none">
-                                            <span
-                                                class="w-3 h-3 rounded-full"
-                                                [ngClass]="getCalendar(eventForm.get('calendarId').value)?.color"></span>
-                                            <span class="ml-3">{{getCalendar(eventForm.get('calendarId').value)?.title}}</span>
-                                        </mat-select-trigger>
-                                        <ng-container *ngFor="let calendar of calendars">
-                                            <mat-option [value]="calendar.id">
-                                                <div class="inline-flex items-center">
-                                                    <span
-                                                        class="w-3 h-3 rounded-full"
-                                                        [ngClass]="calendar.color"></span>
-                                                    <span class="ml-3">{{calendar.title}}</span>
-                                                </div>
-                                            </mat-option>
-                                        </ng-container>
-                                    </mat-select>
-                                </mat-form-field>
-                            </div>
-
-                            <!-- Description -->
-                            <div class="flex items-start mt-6">
-                                <mat-icon
-                                    class="hidden sm:inline-flex mr-6 mt-3"
-                                    [svgIcon]="'heroicons_outline:menu-alt-2'"></mat-icon>
-                                <mat-form-field class="fuse-mat-textarea fuse-mat-no-subscript flex-auto">
-                                    <textarea
-                                        matInput
-                                        matTextareaAutosize
-                                        [matAutosizeMinRows]="1"
-                                        [formControlName]="'description'"
-                                        [placeholder]="'Event description'">
-                                    </textarea>
-                                </mat-form-field>
-                            </div>
-
-                            <!-- Actions -->
-                            <div class="ml-auto mt-6">
-                                <button
-                                    class="add"
-                                    *ngIf="panelMode === 'add'"
-                                    mat-flat-button
-                                    type="button"
-                                    [color]="'primary'"
-                                    (click)="addEvent()">
-                                    Add
-                                </button>
-                                <button
-                                    class="save"
-                                    *ngIf="panelMode === 'edit'"
-                                    mat-flat-button
-                                    type="button"
-                                    [color]="'primary'"
-                                    (click)="updateEvent()">
-                                    Save
-                                </button>
-                            </div>
-                        </form>
-                    </ng-container>
-
-                </ng-template>
-
-            </div>
-
-        </mat-drawer-content>
-
-    </mat-drawer-container>
-
-</div>
-
-

src/app/modules/admin/apps/calendar/calendar.component.scss

@@ -1,121 +0,0 @@
-calendar {
-
-    /* Tweak: FullCalendar CSS only height to improve resize performance */
-    /* With this tweak, we can disable "handleWindowResize" option of FullCalendar */
-    /* which disables the height calculations on window resize and increases the */
-    /* overall performance. */
-    /* This tweak only affects the Calendar app's FullCalendar. */
-    full-calendar {
-        display: flex;
-        flex-direction: column;
-        flex: 1 0 auto;
-        width: 100%;
-        height: 100%;
-
-        .fc-view-container {
-            display: flex;
-            flex-direction: column;
-            flex: 1 0 auto;
-            width: 100%;
-            height: 100%;
-
-            .fc-view {
-
-                /* Day grid - Month view */
-                /* Time grid - Week view */
-                /* Time grid - Day view */
-                &.fc-dayGridMonth-view,
-                &.fc-timeGridWeek-view,
-                &.fc-timeGridDay-view {
-                    display: flex;
-                    flex-direction: column;
-                    flex: 1 0 auto;
-                    width: 100%;
-                    height: 100%;
-
-                    > table {
-                        display: flex;
-                        flex-direction: column;
-                        flex: 1 0 auto;
-                        height: 100%;
-
-                        > thead {
-                            display: flex;
-                        }
-
-                        > tbody {
-                            display: flex;
-                            flex: 1 1 auto;
-                            overflow: hidden;
-
-                            > tr {
-                                display: flex;
-
-                                > td {
-                                    display: flex;
-                                    flex-direction: column;
-
-                                    .fc-scroller {
-                                        flex: 1 1 auto;
-                                        overflow: hidden scroll !important;
-                                        height: auto !important;
-
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-
-                /* Day grid - Month view */
-                &.fc-dayGridMonth-view {
-
-                    > table {
-
-                        > tbody {
-
-                            > tr {
-
-                                > td {
-
-                                    .fc-scroller {
-                                        display: flex;
-
-                                        > .fc-day-grid {
-                                            display: flex;
-                                            flex-direction: column;
-                                            min-height: 580px;
-
-                                            > .fc-row {
-                                                flex: 1 0 0;
-                                                height: auto !important;
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-
-                /* List - Year view */
-                &.fc-listYear-view {
-                    width: 100%;
-                    height: 100%;
-
-                    .fc-scroller {
-                        width: 100%;
-                        height: 100% !important;
-                        overflow: hidden !important;
-                    }
-                }
-            }
-        }
-    }
-}
-
-/* Event panel */
-.calendar-event-panel {
-    border-radius: 8px;
-    @apply shadow-2xl bg-card;
-}

src/app/modules/admin/apps/calendar/calendar.module.ts

@@ -1,75 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { ScrollingModule } from '@angular/cdk/scrolling';
-import { MAT_DATE_FORMATS } from '@angular/material/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatMomentDateModule } from '@angular/material-moment-adapter';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { FullCalendarModule } from '@fullcalendar/angular';
-import { FuseDateRangeModule } from '@fuse/components/date-range';
-import { SharedModule } from 'app/shared/shared.module';
-import { CalendarComponent } from 'app/modules/admin/apps/calendar/calendar.component';
-import { CalendarRecurrenceComponent } from 'app/modules/admin/apps/calendar/recurrence/recurrence.component';
-import { CalendarSettingsComponent } from 'app/modules/admin/apps/calendar/settings/settings.component';
-import { CalendarSidebarComponent } from 'app/modules/admin/apps/calendar/sidebar/sidebar.component';
-import { calendarRoutes } from 'app/modules/admin/apps/calendar/calendar.routing';
-
-@NgModule({
-    declarations: [
-        CalendarComponent,
-        CalendarRecurrenceComponent,
-        CalendarSettingsComponent,
-        CalendarSidebarComponent
-    ],
-    imports     : [
-        RouterModule.forChild(calendarRoutes),
-        ScrollingModule,
-        MatButtonModule,
-        MatButtonToggleModule,
-        MatCheckboxModule,
-        MatDatepickerModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatMenuModule,
-        MatMomentDateModule,
-        MatRadioModule,
-        MatSelectModule,
-        MatSidenavModule,
-        MatTooltipModule,
-        FullCalendarModule,
-        FuseDateRangeModule,
-        SharedModule
-    ],
-    providers   : [
-        {
-            provide : MAT_DATE_FORMATS,
-            useValue: {
-                parse  : {
-                    dateInput: 'DD.MM.YYYY'
-                },
-                display: {
-                    dateInput         : 'DD.MM.YYYY',
-                    monthYearLabel    : 'MMM YYYY',
-                    dateA11yLabel     : 'DD.MM.YYYY',
-                    monthYearA11yLabel: 'MMMM YYYY'
-                }
-            }
-        }
-    ]
-})
-export class CalendarModule
-{
-}

src/app/modules/admin/apps/calendar/calendar.resolvers.ts

@@ -1,89 +0,0 @@
-import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { Observable } from 'rxjs';
-import { CalendarService } from 'app/modules/admin/apps/calendar/calendar.service';
-import { Calendar, CalendarSettings, CalendarWeekday } from 'app/modules/admin/apps/calendar/calendar.types';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class CalendarCalendarsResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _calendarService: CalendarService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Calendar[]>
-    {
-        return this._calendarService.getCalendars();
-    }
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class CalendarSettingsResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _calendarService: CalendarService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<CalendarSettings>
-    {
-        return this._calendarService.getSettings();
-    }
-}
-
-@Injectable({
-    providedIn: 'root'
-})
-export class CalendarWeekdaysResolver implements Resolve<any>
-{
-    /**
-     * Constructor
-     */
-    constructor(private _calendarService: CalendarService)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Resolver
-     *
-     * @param route
-     * @param state
-     */
-    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<CalendarWeekday[]>
-    {
-        return this._calendarService.getWeekdays();
-    }
-}

src/app/modules/admin/apps/calendar/calendar.routing.ts

@@ -1,23 +0,0 @@
-import { Route } from '@angular/router';
-import { CalendarComponent } from 'app/modules/admin/apps/calendar/calendar.component';
-import { CalendarSettingsComponent } from 'app/modules/admin/apps/calendar/settings/settings.component';
-import { CalendarCalendarsResolver, CalendarSettingsResolver, CalendarWeekdaysResolver } from 'app/modules/admin/apps/calendar/calendar.resolvers';
-
-export const calendarRoutes: Route[] = [
-    {
-        path     : '',
-        component: CalendarComponent,
-        resolve  : {
-            calendars: CalendarCalendarsResolver,
-            settings : CalendarSettingsResolver,
-            weekdays : CalendarWeekdaysResolver
-        }
-    },
-    {
-        path     : 'settings',
-        component: CalendarSettingsComponent,
-        resolve  : {
-            settings: CalendarSettingsResolver
-        }
-    }
-];

src/app/modules/admin/apps/calendar/calendar.service.ts

@@ -1,475 +0,0 @@
-import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { BehaviorSubject, Observable, of } from 'rxjs';
-import { map, switchMap, take, tap } from 'rxjs/operators';
-import { Moment } from 'moment';
-import { Calendar, CalendarEvent, CalendarEventEditMode, CalendarSettings, CalendarWeekday } from 'app/modules/admin/apps/calendar/calendar.types';
-
-@Injectable({
-    providedIn: 'root'
-})
-export class CalendarService
-{
-    // Private
-    private _calendars: BehaviorSubject<Calendar[] | null> = new BehaviorSubject(null);
-    private _events: BehaviorSubject<CalendarEvent[] | null> = new BehaviorSubject(null);
-    private _loadedEventsRange: { start: Moment | null; end: Moment | null } = {
-        start: null,
-        end  : null
-    };
-    private readonly _numberOfDaysToPrefetch = 60;
-    private _settings: BehaviorSubject<CalendarSettings | null> = new BehaviorSubject(null);
-    private _weekdays: BehaviorSubject<CalendarWeekday[] | null> = new BehaviorSubject(null);
-
-    /**
-     * Constructor
-     */
-    constructor(private _httpClient: HttpClient)
-    {
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Accessors
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Getter for calendars
-     */
-    get calendars$(): Observable<Calendar[]>
-    {
-        return this._calendars.asObservable();
-    }
-
-    /**
-     * Getter for events
-     */
-    get events$(): Observable<CalendarEvent[]>
-    {
-        return this._events.asObservable();
-    }
-
-    /**
-     * Getter for settings
-     */
-    get settings$(): Observable<CalendarSettings>
-    {
-        return this._settings.asObservable();
-    }
-
-    /**
-     * Getter for weekdays
-     */
-    get weekdays$(): Observable<CalendarWeekday[]>
-    {
-        return this._weekdays.asObservable();
-    }
-
-    // -----------------------------------------------------------------------------------------------------
-    // @ Public methods
-    // -----------------------------------------------------------------------------------------------------
-
-    /**
-     * Get calendars
-     */
-    getCalendars(): Observable<Calendar[]>
-    {
-        return this._httpClient.get<Calendar[]>('api/apps/calendar/calendars').pipe(
-            tap((response) => {
-                this._calendars.next(response);
-            })
-        );
-    }
-
-    /**
-     * Add calendar
-     *
-     * @param calendar
-     */
-    addCalendar(calendar: Calendar): Observable<Calendar>
-    {
-        return this.calendars$.pipe(
-            take(1),
-            switchMap(calendars => this._httpClient.post<Calendar>('api/apps/calendar/calendars', {
-                calendar
-            }).pipe(
-                map((addedCalendar) => {
-
-                    // Add the calendar
-                    calendars.push(addedCalendar);
-
-                    // Update the calendars
-                    this._calendars.next(calendars);
-
-                    // Return the added calendar
-                    return addedCalendar;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Update calendar
-     *
-     * @param id
-     * @param calendar
-     */
-    updateCalendar(id: string, calendar: Calendar): Observable<Calendar>
-    {
-        return this.calendars$.pipe(
-            take(1),
-            switchMap(calendars => this._httpClient.patch<Calendar>('api/apps/calendar/calendars', {
-                id,
-                calendar
-            }).pipe(
-                map((updatedCalendar) => {
-
-                    // Find the index of the updated calendar
-                    const index = calendars.findIndex(item => item.id === id);
-
-                    // Update the calendar
-                    calendars[index] = updatedCalendar;
-
-                    // Update the calendars
-                    this._calendars.next(calendars);
-
-                    // Return the updated calendar
-                    return updatedCalendar;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Delete calendar
-     *
-     * @param id
-     */
-    deleteCalendar(id: string): Observable<any>
-    {
-        return this.calendars$.pipe(
-            take(1),
-            switchMap(calendars => this._httpClient.delete<Calendar>('api/apps/calendar/calendars', {
-                params: {id}
-            }).pipe(
-                map((isDeleted) => {
-
-                    // Find the index of the deleted calendar
-                    const index = calendars.findIndex(item => item.id === id);
-
-                    // Delete the calendar
-                    calendars.splice(index, 1);
-
-                    // Update the calendars
-                    this._calendars.next(calendars);
-
-                    // Remove the events belong to deleted calendar
-                    const events = this._events.value.filter(event => event.calendarId !== id);
-
-                    // Update the events
-                    this._events.next(events);
-
-                    // Return the deleted status
-                    return isDeleted;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Get events
-     *
-     * @param start
-     * @param end
-     * @param replace
-     */
-    getEvents(start: Moment, end: Moment, replace = false): Observable<CalendarEvent[]>
-    {
-        // Set the new start date for loaded events
-        if ( replace || !this._loadedEventsRange.start || start.isBefore(this._loadedEventsRange.start) )
-        {
-            this._loadedEventsRange.start = start;
-        }
-
-        // Set the new end date for loaded events
-        if ( replace || !this._loadedEventsRange.end || end.isAfter(this._loadedEventsRange.end) )
-        {
-            this._loadedEventsRange.end = end;
-        }
-
-        // Get the events
-        return this._httpClient.get<CalendarEvent[]>('api/apps/calendar/events', {
-            params: {
-                start: start.toISOString(true),
-                end  : end.toISOString(true)
-            }
-        }).pipe(
-            switchMap(response => this._events.pipe(
-                take(1),
-                map((events) => {
-
-                    // If replace...
-                    if ( replace )
-                    {
-                        // Execute the observable with the response replacing the events object
-                        this._events.next(response);
-                    }
-                    // Otherwise...
-                    else
-                    {
-                        // If events is null, replace it with an empty array
-                        events = events || [];
-
-                        // Execute the observable by appending the response to the current events
-                        this._events.next([...events, ...response]);
-                    }
-
-                    // Return the response
-                    return response;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Reload events using the loaded events range
-     */
-    reloadEvents(): Observable<CalendarEvent[]>
-    {
-        // Get the events
-        return this._httpClient.get<CalendarEvent[]>('api/apps/calendar/events', {
-            params: {
-                start: this._loadedEventsRange.start.toISOString(),
-                end  : this._loadedEventsRange.end.toISOString()
-            }
-        }).pipe(
-            map((response) => {
-
-                // Execute the observable with the response replacing the events object
-                this._events.next(response);
-
-                // Return the response
-                return response;
-            })
-        );
-    }
-
-    /**
-     * Prefetch future events
-     *
-     * @param end
-     */
-    prefetchFutureEvents(end: Moment): Observable<CalendarEvent[]>
-    {
-        // Calculate the remaining prefetched days
-        const remainingDays = this._loadedEventsRange.end.diff(end, 'days');
-
-        // Return if remaining days is bigger than the number
-        // of days to prefetch. This means we were already been
-        // there and fetched the events data so no need for doing
-        // it again.
-        if ( remainingDays >= this._numberOfDaysToPrefetch )
-        {
-            return of([]);
-        }
-
-        // Figure out the start and end dates
-        const start = this._loadedEventsRange.end.clone().add(1, 'day');
-        end = this._loadedEventsRange.end.clone().add(this._numberOfDaysToPrefetch - remainingDays, 'days');
-
-        // Prefetch the events
-        return this.getEvents(start, end);
-    }
-
-    /**
-     * Prefetch past events
-     *
-     * @param start
-     */
-    prefetchPastEvents(start: Moment): Observable<CalendarEvent[]>
-    {
-        // Calculate the remaining prefetched days
-        const remainingDays = start.diff(this._loadedEventsRange.start, 'days');
-
-        // Return if remaining days is bigger than the number
-        // of days to prefetch. This means we were already been
-        // there and fetched the events data so no need for doing
-        // it again.
-        if ( remainingDays >= this._numberOfDaysToPrefetch )
-        {
-            return of([]);
-        }
-
-        // Figure out the start and end dates
-        start = this._loadedEventsRange.start.clone().subtract(this._numberOfDaysToPrefetch - remainingDays, 'days');
-        const end = this._loadedEventsRange.start.clone().subtract(1, 'day');
-
-        // Prefetch the events
-        return this.getEvents(start, end);
-    }
-
-    /**
-     * Add event
-     *
-     * @param event
-     */
-    addEvent(event): Observable<CalendarEvent>
-    {
-        return this.events$.pipe(
-            take(1),
-            switchMap(events => this._httpClient.post<CalendarEvent>('api/apps/calendar/event', {
-                event
-            }).pipe(
-                map((addedEvent) => {
-
-                    // Update the events
-                    this._events.next(events);
-
-                    // Return the added event
-                    return addedEvent;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Update event
-     *
-     * @param id
-     * @param event
-     */
-    updateEvent(id: string, event): Observable<CalendarEvent>
-    {
-        return this.events$.pipe(
-            take(1),
-            switchMap(events => this._httpClient.patch<CalendarEvent>('api/apps/calendar/event', {
-                id,
-                event
-            }).pipe(
-                map((updatedEvent) => {
-
-                    // Find the index of the updated event
-                    const index = events.findIndex(item => item.id === id);
-
-                    // Update the event
-                    events[index] = updatedEvent;
-
-                    // Update the events
-                    this._events.next(events);
-
-                    // Return the updated event
-                    return updatedEvent;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Update recurring event
-     *
-     * @param event
-     * @param originalEvent
-     * @param mode
-     */
-    updateRecurringEvent(event, originalEvent, mode: CalendarEventEditMode): Observable<boolean>
-    {
-        return this._httpClient.patch<boolean>('api/apps/calendar/recurring-event', {
-            event,
-            originalEvent,
-            mode
-        });
-    }
-
-    /**
-     * Delete event
-     *
-     * @param id
-     */
-    deleteEvent(id: string): Observable<CalendarEvent>
-    {
-        return this.events$.pipe(
-            take(1),
-            switchMap(events => this._httpClient.delete<CalendarEvent>('api/apps/calendar/event', {params: {id}}).pipe(
-                map((isDeleted) => {
-
-                    // Find the index of the deleted event
-                    const index = events.findIndex(item => item.id === id);
-
-                    // Delete the event
-                    events.splice(index, 1);
-
-                    // Update the events
-                    this._events.next(events);
-
-                    // Return the deleted status
-                    return isDeleted;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Delete recurring event
-     *
-     * @param event
-     * @param mode
-     */
-    deleteRecurringEvent(event, mode: CalendarEventEditMode): Observable<boolean>
-    {
-        return this._httpClient.delete<boolean>('api/apps/calendar/recurring-event', {
-            params: {
-                event: JSON.stringify(event),
-                mode
-            }
-        });
-    }
-
-    /**
-     * Get settings
-     */
-    getSettings(): Observable<CalendarSettings>
-    {
-        return this._httpClient.get<CalendarSettings>('api/apps/calendar/settings').pipe(
-            tap((response) => {
-                this._settings.next(response);
-            })
-        );
-    }
-
-    /**
-     * Update settings
-     */
-    updateSettings(settings: CalendarSettings): Observable<CalendarSettings>
-    {
-        return this.events$.pipe(
-            take(1),
-            switchMap(events => this._httpClient.patch<CalendarSettings>('api/apps/calendar/settings', {
-                settings
-            }).pipe(
-                map((updatedSettings) => {
-
-                    // Update the settings
-                    this._settings.next(settings);
-
-                    // Get weekdays again to get them in correct order
-                    // in case the startWeekOn setting changes
-                    this.getWeekdays().subscribe();
-
-                    // Return the updated settings
-                    return updatedSettings;
-                })
-            ))
-        );
-    }
-
-    /**
-     * Get weekdays
-     */
-    getWeekdays(): Observable<CalendarWeekday[]>
-    {
-        return this._httpClient.get<CalendarWeekday[]>('api/apps/calendar/weekdays').pipe(
-            tap((response) => {
-                this._weekdays.next(response);
-            })
-        );
-    }
-}

src/app/modules/admin/apps/calendar/calendar.types.ts

@@ -1,47 +0,0 @@
-export interface Calendar
-{
-    id: string;
-    title: string;
-    color: string;
-    visible: boolean;
-}
-
-export type CalendarDrawerMode = 'over' | 'side';
-
-export interface CalendarEvent
-{
-    id: string;
-    calendarId: string;
-    recurringEventId: string | null;
-    isFirstInstance: boolean;
-    title: string;
-    description: string;
-    start: string | null;
-    end: string | null;
-    allDay: boolean;
-    recurrence: string;
-}
-
-export interface CalendarEventException
-{
-    id: string;
-    eventId: string;
-    exdate: string;
-}
-
-export type CalendarEventPanelMode = 'view' | 'add' | 'edit';
-export type CalendarEventEditMode = 'single' | 'future' | 'all';
-
-export interface CalendarSettings
-{
-    dateFormat: 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY-MM-DD' | 'll';
-    timeFormat: '12' | '24';
-    startWeekOn: 6 | 0 | 1;
-}
-
-export interface CalendarWeekday
-{
-    abbr: string;
-    label: string;
-    value: string;
-}

src/app/modules/admin/apps/calendar/recurrence/recurrence.component.html

@@ -1,121 +0,0 @@
-<form
-    class="flex flex-col w-full"
-    [formGroup]="recurrenceForm">
-
-    <div class="text-2xl font-semibold tracking-tight">Recurrence rules</div>
-
-    <!-- Interval and frequency -->
-    <div class="flex mt-12">
-        <mat-form-field class="fuse-mat-no-subscript w-24 -mt-6">
-            <mat-label>Repeat every</mat-label>
-            <input
-                type="number"
-                matInput
-                [autocomplete]="'off'"
-                [formControlName]="'interval'"
-                [min]="1">
-        </mat-form-field>
-        <mat-form-field class="fuse-mat-no-subscript w-40 ml-4">
-            <mat-select [formControlName]="'freq'">
-                <mat-option [value]="'DAILY'">day(s)</mat-option>
-                <mat-option [value]="'WEEKLY'">week(s)</mat-option>
-                <mat-option [value]="'MONTHLY'">month(s)</mat-option>
-                <mat-option [value]="'YEARLY'">year(s)</mat-option>
-            </mat-select>
-        </mat-form-field>
-    </div>
-
-    <!-- Weekly repeat options -->
-    <div
-        class="flex flex-col mt-6"
-        [formGroupName]="'weekly'"
-        *ngIf="recurrenceForm.get('freq').value === 'WEEKLY'">
-        <div class="font-medium">Repeat on</div>
-        <mat-button-toggle-group
-            class="mt-1.5 border-0 space-x-1"
-            [formControlName]="'byDay'"
-            [multiple]="true">
-            <ng-container *ngFor="let weekday of weekdays">
-                <mat-button-toggle
-                    class="w-10 h-10 border-0 rounded-full"
-                    [disableRipple]="true"
-                    [value]="weekday.value"
-                    [matTooltip]="weekday.label">
-                    {{weekday.abbr}}
-                </mat-button-toggle>
-            </ng-container>
-        </mat-button-toggle-group>
-    </div>
-
-    <!-- Monthly repeat options -->
-    <div
-        class="flex mt-6"
-        [formGroupName]="'monthly'"
-        *ngIf="recurrenceForm.get('freq').value === 'MONTHLY'">
-        <mat-form-field class="fuse-mat-no-subscript w-full">
-            <mat-label>Repeat on</mat-label>
-            <mat-select [formControlName]="'repeatOn'">
-                <mat-option [value]="'date'">Monthly on day {{recurrenceForm.get('monthly.date').value}}</mat-option>
-                <mat-option [value]="'nthWeekday'">Monthly on the {{nthWeekdayText}}</mat-option>
-            </mat-select>
-        </mat-form-field>
-    </div>
-
-    <!-- Ends -->
-    <div
-        class="flex flex-col mt-12"
-        [formGroupName]="'end'">
-        <div class="flex items-center">
-            <mat-form-field class="fuse-mat-no-subscript w-24 -mt-6">
-                <mat-label>Ends</mat-label>
-                <mat-select [formControlName]="'type'">
-                    <mat-option [value]="'never'">Never</mat-option>
-                    <mat-option [value]="'until'">On</mat-option>
-                    <mat-option [value]="'count'">After</mat-option>
-                </mat-select>
-            </mat-form-field>
-            <mat-form-field
-                class="fuse-mat-no-subscript w-40 ml-4"
-                *ngIf="recurrenceForm.get('end.type').value === 'until'">
-                <input
-                    matInput
-                    [matDatepicker]="untilDatePicker"
-                    [formControlName]="'until'">
-                <mat-datepicker-toggle
-                    matSuffix
-                    [for]="untilDatePicker"></mat-datepicker-toggle>
-                <mat-datepicker #untilDatePicker></mat-datepicker>
-            </mat-form-field>
-            <mat-form-field
-                class="fuse-mat-no-subscript w-40 ml-4"
-                *ngIf="recurrenceForm.get('end.type').value === 'count'">
-                <input
-                    type="number"
-                    matInput
-                    [autocomplete]="'off'"
-                    [formControlName]="'count'"
-                    [min]="1">
-                <span matSuffix>occurrence(s)</span>
-            </mat-form-field>
-        </div>
-    </div>
-
-    <!-- Actions -->
-    <div class="ml-auto mt-8">
-        <button
-            class="clear"
-            mat-button
-            [color]="'primary'"
-            (click)="clear()">
-            Clear
-        </button>
-        <button
-            mat-flat-button
-            [disabled]="recurrenceForm.invalid"
-            [color]="'primary'"
-            (click)="done()">
-            Done
-        </button>
-    </div>
-
-</form>