First Commit

.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,50 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/build
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+sassdoc
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
+
+theme.css
+src/assets/theme/*/theme-*.css
+src/assets/layout/css/*.css
+src/assets/sass/theme/designer

CHANGELOG.md

@@ -0,0 +1,265 @@
+# Changelog
+
+## 12.2.0
+**Migration Guide**
+- Update theme files and layout files.
+
+**Implemented New Features and Enhancements:**
+
+- Styles of new PrimeNG components
+
+## 12.0.0
+**Migration Guide**
+- Update your project to Angular 12.
+- Update app.* components
+- Update theme files and layout files.
+
+**Implemented New Features and Enhancements:**
+
+- Upgrade to Angular and PrimeNG 12
+- Styles of new PrimeNG components
+- PrimeFlex 3+ support
+
+## 11.0.1
+**Migration Guide**
+- Update theme files and layout files.
+
+**Fixed bugs:**
+
+- Search panel is not visible (dark mode)
+
+## 11.0.0
+**Migration Guide**
+- Update your project to Angular 11.
+- Update app.main.component.ts and app.component.ts
+- Update app.menu.component.ts and app.menuitem.component.ts
+- Update theme files and layout files.
+
+**Implemented New Features and Enhancements:**
+
+- Upgrade to Angular and PrimeNG 11
+- Styles of new PrimeNG components
+
+## 10.1.0
+
+**Migration Guide**
+- Update theme files and layout files.
+- Update app.* components
+- Use app.inlinemenu.component instead of app.profile.component
+
+**Implemented New Features and Enhancements:**
+
+- Implemented new Ultima design
+- Added dark mode, topbar and menu colors
+
+## 10.0.1
+
+**Migration Guide**
+- Update app.component.ts and app.main.component.ts
+- Update app.login.component.html
+- Update layout css files.
+- Update theme css files.
+
+**Fixed bugs:**
+
+- Ripple effect is not working outside of the main application
+- Ripple effect is not working on Login page
+
+## 10.0.0
+
+**Migration Guide**
+- Update your project to Angular 10.
+- Update theme files and layout files.
+
+**Implemented New Features and Enhancements:**
+
+- Migrate to PrimeOne Design Architecture
+- Upgrade to Angular and PrimeNG 10
+
+## 8.0.1 to 9.0.0
+
+Angular 9 and PrimeNG 9
+
+- Update dependencies with [ng update](https://angular.io/cli/update).
+- Update theme.css and layout.css files.
+- Update app.menu.component.ts while retaining your MenuModel.
+- Include app.menuitem.component.ts under app folder and define it app.module.ts with declarations property.
+- Include app.menu.service.ts under app folder and define it app.module.ts with providers property.
+
+## 8.0.0 to 8.0.1
+
+- Update layout css files.
+- Update theme css files.
+
+## 7.1.1 to 8.0.0
+
+- Update your project to Angular 8 with ng update. View the official update guide -[https://update.angular.io/](https://update.angular.io/)- for more information.
+- Update app.main.component.ts.
+- Update app.menu.component.ts.
+- Update app.rightpanel.component.ts.
+- Update layout css files.
+- Update theme css files.
+
+## 7.1.0 to 7.1.1
+
+- Update layout css files.
+- Update theme css files.
+
+## 7.0.1 to 7.1.0
+
+- Update layout css files.
+- Update theme css files.
+
+## 7.0.0 to 7.0.1
+
+- Update theme css files.
+
+## 6.1.1 to 7.0.0
+
+- Update layout css files.
+- Update theme css files.
+
+## 6.1.0 to 6.1.1
+
+- Update layout css files.
+- Update theme css files.
+
+## 6.0.0 to 6.1.0
+
+Adds support for new features in PrimeNG 6.1.x
+
+- Update theme css files.
+
+## 5.2.4 to 6.0.0
+
+Brings support for Angular 6 and RxJS 6, adds theming for new components in PrimeNG such as the new TreeTable and improves behaviors of the layout menus.
+
+- Update app.module.ts and app.component.ts.
+- Update app.topbar.component.ts.
+- Update app.profile.component.ts.
+- Update app.menu.component.ts.
+- Update app.breadcrumb.component.ts and app.breadcrumb.service.ts.
+- Update layout css files.
+- Update theme css files.
+
+## 5.2.3 to 5.2.4
+
+- Update theme css files.
+
+## 5.2.2 to 5.2.3
+
+- Update layout css files.
+- Update theme css files.
+
+## 5.2.1 to 5.2.2
+
+- Update layout css files.
+- Update theme css files.
+
+## 5.2.0 to 5.2.1
+
+Aligns input focus animation with the Material specs.
+
+- Update layout css files.
+- Update theme css files.
+
+## 5.0.0 to 5.2.0
+
+Adds support for PrimeNG 5.2.0 (e.g. TurboTable), replaces nanoscroller with PrimeNG ScrollPanel and reimplements ripple effect to run outside of NgZone for better performance.
+
+- Remove nanoscroller as it is replaced by ScrollPanel component of PrimeNG.
+- Update app.component.ts and app.component.html.
+- Update app.menu.component.ts.
+- Update app.rightpanel.component.ts.
+- Update layout css files.
+- Update theme css files.
+
+## 4.3.0 to 5.0.0
+
+- Update app.component.ts and app.component.html.
+- Define breadcrumbservice as a provider in your app.module
+- Update layout css files.
+- Update theme css files.
+
+## 4.2.0 to 4.3.0
+
+- Update theme css files.
+
+## 4.1.1 to 4.2.0
+
+- Update app.*.ts and app.*.html files under app folder.
+- Update theme css and layout css files.
+
+## 4.0.1 to 4.1.0
+
+- Update layout css files.
+- Update theme css files.
+- Update AppSubmenu component in app.menu.component.ts.
+
+## 4.0.0 to 4.0.1
+
+- Update layout css files.
+
+## 2.1 to 4.0.0
+
+- Includes version updates to PrimeNG 4 and Angular 4.
+- Update theme css files.
+
+## 2.0.5 to 2.1.0
+
+- Project is updated to CLI RC2, Angular 4-RC3 and PrimeNG 4-RC1.
+- Add _import {trigger,state,style,transition,animate} from '@angular/animations';_ to app.menu.components.ts and remove these imports from 'angular/core'.
+- Add _import {BrowserAnimationsModule} from '@angular/platform-browser/animations';_ to app.module.ts and import the module to your application.
+- Update theme css files, there are no changes to the layout.
+
+## 2.0.4 to 2.0.5
+
+- No change required, missing .angular-cli.json file in 2.0.4 is added.
+
+## 2.0.3 to 2.0.4
+
+- No change required, only CLI version is updated to RC
+
+## 2.0.2 to 2.0.3
+
+- Update AppSubmenu component in app.menu.component.ts by replacing the itemClick method implementation.
+- Update layout css files, there are no changes on themes.
+- Update app.component.ts by changing onTopbarMenuButtonClick method implementation to add _event.preventDefault()_ at the end.
+- Remove [ngClass]="{'menu-button-rotate': app.rotateMenuButton}" from menu-button in app.topbar.component.ts.
+
+## 2.0.1 to 2.0.2
+
+- Update AppSubmenu component in app.menu.component.ts
+- Update layout css files, there are no changes on themes.
+- Update app.component.ts.
+- Add pInputText to search input at app.topbar.component.ts
+
+## 2.0.0 to 2.0.1
+
+- Update AppSubmenu component in app.menu.component.ts
+- Update layout css and theme css files.
+- Update app.component.ts.
+
+## 1.1.0 to 2.0.0
+
+- Update PrimeNG to at least 2.0.
+- Replace app.component.ts and app.component.html
+- Remove layout.js
+- Update the scripts and styles section at angular-cli.json
+- Define menu using PrimeNG MenuModel
+
+## 1.0.3 to 1.1.0
+
+- Update css files of layout and theme.
+
+## 1.0.2 to 1.0.3
+
+- Update css files of layout and theme.
+
+## 1.0.1 to 1.0.2
+
+- Update layout.js
+
+## 1.0.0 to 1.0.1
+
+- Update layout.js

README.md

@@ -1,2 +1,2 @@
-# ealexondoa
+# oussamaakallouch
 

angular.json

@@ -0,0 +1,134 @@
+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "ultima-cli": {
+            "projectType": "application",
+            "schematics": {
+                "@schematics/angular:component": {
+                    "style": "scss"
+                }
+            },
+            "root": "",
+            "sourceRoot": "src",
+            "prefix": "app",
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/ultima",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.app.json",
+                        "aot": true,
+                        "assets": [
+                            "src/assets",
+                            "src/upload.php"
+                        ],
+                        "styles": [
+                            "src/styles.scss"
+                        ],
+                        "scripts": [
+                            "node_modules/prismjs/prism.js",
+                            "node_modules/prismjs/components/prism-typescript.js"
+                        ],
+                        "allowedCommonJsDependencies": [
+                            "@fullcalendar/daygrid",
+                            "@fullcalendar/timegrid",
+                            "@fullcalendar/interaction",
+                            "chart.js"
+                        ]
+                    },
+                    "configurations": {
+                        "production": {
+                            "budgets": [
+                                {
+                                    "type": "initial",
+                                    "maximumWarning": "3mb",
+                                    "maximumError": "5mb"
+                                },
+                                {
+                                    "type": "anyComponentStyle",
+                                    "maximumWarning": "6kb",
+                                    "maximumError": "10kb"
+                                }
+                            ],
+                            "fileReplacements": [
+                                {
+                                    "replace": "src/environments/environment.ts",
+                                    "with": "src/environments/environment.prod.ts"
+                                }
+                            ],
+                            "outputHashing": "all"
+                        },
+                        "development": {
+                            "buildOptimizer": false,
+                            "optimization": false,
+                            "vendorChunk": true,
+                            "extractLicenses": false,
+                            "sourceMap": true,
+                            "namedChunks": true
+                        }
+                    },
+                    "defaultConfiguration": "production"
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "ultima-cli:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "ultima-cli:build:production"
+                        },
+                        "development": {
+                            "browserTarget": "ultima-cli:build:development"
+                        }
+                    },
+                    "defaultConfiguration": "development"
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "ultima-cli:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "tsconfig.spec.json",
+                        "karmaConfig": "karma.conf.js",
+                        "scripts": [],
+                        "styles": [
+                            "src/styles.scss"
+                        ],
+                        "assets": [
+                            "src/assets",
+                            "src/upload.php"
+                        ]
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "tsconfig.app.json",
+                            "tsconfig.spec.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                }
+            }
+        }
+    },
+    "defaultProject": "ultima-cli",
+    "cli": {
+        "analytics": false
+    }
+}

karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', '@angular-devkit/build-angular'],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage'),
+            require('@angular-devkit/build-angular/plugins/karma')
+        ],
+        client: {
+            jasmine: {
+                // you can add configuration options for Jasmine here
+                // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+                // for example, you can disable the random execution with `random: false`
+                // or set a specific seed with `seed: 4321`
+            },
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
+        },
+        jasmineHtmlReporter: {
+            suppressAll: true // removes the duplicated traces
+        },
+        coverageReporter: {
+            dir: require('path').join(__dirname, './coverage/forupdate'),
+            subdir: '.',
+            reporters: [
+                {type: 'html'},
+                {type: 'text-summary'}
+            ]
+        },
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome'],
+        singleRun: false,
+        restartOnFileChange: true
+    });
+};

package.json

@@ -0,0 +1,60 @@
+{
+    "name": "ultima",
+    "version": "12.2.0-SNAPSHOT",
+    "license": "COMMERCIAL",
+    "angular-cli": {},
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e"
+    },
+    "private": true,
+    "dependencies": {
+        "@angular/animations": "~12.0.0",
+        "@angular/cdk": "~12.0.0",
+        "@angular/common": "~12.0.0",
+        "@angular/compiler": "~12.0.0",
+        "@angular/core": "~12.0.0",
+        "@angular/forms": "~12.0.0",
+        "@angular/platform-browser": "~12.0.0",
+        "@angular/platform-browser-dynamic": "~12.0.0",
+        "@angular/router": "~12.0.0",
+        "@fullcalendar/angular": "^5.8.0",
+        "@fullcalendar/core": "^5.8.0",
+        "@fullcalendar/daygrid": "^5.8.0",
+        "@fullcalendar/interaction": "^5.8.0",
+        "@fullcalendar/timegrid": "^5.8.0",
+        "chart.js": "^3.3.2",
+        "primeflex": "3.0.1",
+        "primeicons": "4.1.0",
+        "primeng": "12.2.1",
+        "prismjs": "1.9.0",
+        "rxjs": "~6.6.0",
+        "tslib": "^2.0.0",
+        "web-animations-js": "^2.3.2",
+        "zone.js": "~0.11.4"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "~12.0.0",
+        "@angular/cli": "~12.0.0",
+        "@angular/compiler-cli": "~12.0.0",
+        "@types/jasmine": "~3.6.0",
+        "@types/jasminewd2": "~2.0.8",
+        "@types/node": "^12.11.1",
+        "codelyzer": "^6.0.0",
+        "jasmine-core": "~3.6.0",
+        "jasmine-spec-reporter": "~5.0.0",
+        "karma": "~5.1.0",
+        "karma-chrome-launcher": "~3.1.0",
+        "karma-coverage-istanbul-reporter": "~3.0.3",
+        "karma-jasmine": "~4.0.0",
+        "karma-jasmine-html-reporter": "^1.5.0",
+        "protractor": "~7.0.0",
+        "ts-node": "~8.3.0",
+        "tslint": "~6.1.0",
+        "typescript": "~4.2.3"
+    }
+}

src/app/app-routing.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AppMainComponent } from './app.main.component';
+
+export const appRouteList: Routes = [
+    {
+        path: 'app', component: AppMainComponent,
+        loadChildren: () => import('./pages/pages.routing.module').then(m => m.PagesRoutingModule)
+    },
+    {
+        path: '**',
+        redirectTo: 'app/dashboard/dashboard'
+    }
+];
+
+@NgModule({
+    exports: [
+        RouterModule
+    ],
+    imports: [
+        RouterModule.forRoot(appRouteList, {
+            scrollPositionRestoration: 'enabled', // Add options right here
+            relativeLinkResolution: 'legacy'
+        })
+    ]
+})
+export class AppRoutingModule {
+}

src/app/app.breadcrumb.component.html

@@ -0,0 +1,3 @@
+<div class="layout-breadcrumb-container flex justify-content-between align-items-center shadow-1">
+    <p-breadcrumb [model]="items" [home]="home" styleClass="layout-breadcrumb pl-4 py-2"></p-breadcrumb>
+</div>

src/app/app.breadcrumb.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnDestroy } from '@angular/core';
+import { AppBreadcrumbService } from './app.breadcrumb.service';
+import { Subscription } from 'rxjs';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+    selector: 'app-breadcrumb',
+    templateUrl: './app.breadcrumb.component.html'
+})
+export class AppBreadcrumbComponent implements OnDestroy {
+
+    subscription: Subscription;
+
+    items: MenuItem[];
+
+    home: MenuItem;
+
+    constructor(public breadcrumbService: AppBreadcrumbService) {
+        this.subscription = breadcrumbService.itemsHandler.subscribe(response => {
+            this.items = response;
+        });
+
+        this.home = { icon: 'pi pi-home', routerLink: '/' };
+    }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+}

src/app/app.breadcrumb.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { Subject ,  Observable } from 'rxjs';
+import { MenuItem } from 'primeng/api';
+
+@Injectable()
+export class AppBreadcrumbService {
+
+    private itemsSource = new Subject<MenuItem[]>();
+
+    itemsHandler = this.itemsSource.asObservable();
+
+    setItems(items: MenuItem[]) {
+        this.itemsSource.next(items);
+    }
+}

src/app/app.code.component.scss

@@ -0,0 +1,68 @@
+.flex > div,
+.box {
+	background-color: var(--surface-e);
+	text-align: center;
+	padding: 1rem;
+	border-radius: 4px;
+	box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
+}
+
+.flex > div {
+	width: 8rem;
+}
+
+i:not([class~="pi"]) {
+	background-color: var(--surface-b);
+	color: var(--primary-color);
+	font-family: Monaco, courier, monospace;
+	font-style: normal;
+	font-size: 12px;
+	padding: 2px 4px;
+	letter-spacing: .5px;
+	border-radius: 3px;
+	font-weight: 600;
+	margin: 0 2px;
+}
+
+:host ::ng-deep pre[class*="language-"] {
+	box-shadow: none;
+	border: 0 none;
+
+	&:before, &:after {
+		display: none !important;
+	}
+
+	code {
+		border-left: 10px solid var(--surface-d) !important;
+		box-shadow: none !important;
+		background: var(--surface-b) !important;
+		margin: 1em 0;
+		color: var(--text-color);
+		font-size: 14px;
+
+		.token {
+			&.tag,
+			&.keyword {
+				color: #2196F3 !important;
+			}
+
+			&.attr-name,
+			&.attr-string {
+				color: #2196F3 !important;
+			}
+
+			&.attr-value {
+				color: #4CAF50 !important;
+			}
+
+			&.punctuation {
+				color: var(--text-color);
+			}
+
+			&.operator,
+			&.string {
+				background: transparent;
+			}
+		}
+	}
+}

src/app/app.code.component.ts

@@ -0,0 +1,32 @@
+import { Component, ElementRef, AfterViewInit, Input, NgModule, ViewChild } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    selector: 'app-code',
+    template: `
+        <pre [ngClass]="'language-' + lang"><code #code><ng-content></ng-content>
+</code></pre>
+    `,
+    styleUrls: ['./app.code.component.scss']
+})
+export class AppCodeComponent implements AfterViewInit {
+
+    @Input() lang = 'markup';
+
+    @ViewChild('code') codeViewChild: ElementRef;
+
+    constructor(public el: ElementRef) { }
+
+    ngAfterViewInit() {
+        if (window['Prism']) {
+            window['Prism'].highlightElement(this.codeViewChild.nativeElement);
+        }
+    }
+}
+
+@NgModule({
+    imports: [CommonModule],
+    exports: [AppCodeComponent],
+    declarations: [AppCodeComponent]
+})
+export class AppCodeModule { }

src/app/app.component.html

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

src/app/app.component.spec.ts

@@ -0,0 +1,31 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+import { AppTopBarComponent } from './app.topbar.component';
+import { AppFooterComponent } from './app.footer.component';
+import { AppMenuComponent } from './app.menu.component';
+import { ProgressBarModule} from 'primeng/progressbar';
+import { MenuService } from './app.menu.service';
+
+describe('AppComponent', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [ RouterTestingModule, ProgressBarModule ],
+            declarations: [ AppComponent,
+                AppMenuComponent,
+                AppTopBarComponent,
+                AppFooterComponent
+            ],
+            providers: [MenuService]
+        });
+        TestBed.compileComponents();
+    });
+
+    it('should create the app', async(() => {
+        const fixture = TestBed.createComponent(AppComponent);
+        const app = fixture.debugElement.componentInstance;
+        expect(app).toBeTruthy();
+    }));
+});

src/app/app.component.ts

@@ -0,0 +1,32 @@
+import {Component, OnInit} from '@angular/core';
+import { PrimeNGConfig } from 'primeng/api';
+
+@Component({
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.scss']
+})
+export class AppComponent implements OnInit{
+
+    topbarTheme = 'grey';
+
+    menuTheme = 'light';
+
+    layoutMode = 'light';
+
+    menuMode = 'static';
+
+    inlineMenuPosition = 'bottom';
+
+    inputStyle = 'filled';
+
+    ripple = true;
+
+    isRTL = false;
+
+    constructor(private primengConfig: PrimeNGConfig) {}
+
+    ngOnInit() {
+        this.primengConfig.ripple = true;
+    }
+}

src/app/app.config.component.ts

@@ -0,0 +1,339 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import { AppComponent } from './app.component';
+import { AppMainComponent } from './app.main.component';
+
+@Component({
+    selector: 'app-config',
+    template: `
+        <p-sidebar #sidebar [(visible)]="configActive" [position]="app.isRTL ? 'left' : 'right'" [blockScroll]="true" [showCloseIcon]="false" [baseZIndex]="1000" styleClass="layout-config p-sidebar-sm fs-small p-0">
+            <div class="layout-config-panel flex flex-column">
+                <div class="px-3 pt-3">
+                    <h5>Theme Customization</h5>
+                    <span>Ultima offers different themes for layout, topbar, menu etc.</span>
+                </div>
+
+                <hr class="mb-0" />
+
+                <div class="layout-config-options p-3">
+                    <h6>Layout/Theme Scale</h6>
+                    <div class="flex align-items-center">
+                        <button pButton pRipple type="button" icon="pi pi-minus" (click)="decrementScale()" class="p-button-rounded p-button-text" [disabled]="scale === scales[0]"></button>
+                        <i class="pi pi-circle-on m-1 scale-icon" *ngFor="let s of scales" [ngClass]="{'scale-active': s === scale}"></i>
+                        <button pButton pRipple type="button" icon="pi pi-plus" (click)="incrementScale()" class="p-button-rounded p-button-text" [disabled]="scale === scales[scales.length - 1]"></button>
+                    </div>
+
+                    <h6>Layout Mode</h6>
+                    <div class="flex">
+                        <div class="flex align-items-center">
+                            <p-radioButton name="layoutMode" value="light" [(ngModel)]="app.layoutMode" inputId="layoutMode1" (onClick)="onLayoutModeChange($event, 'light')"></p-radioButton>
+                            <label for="layoutMode1" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">Light</label>
+                        </div>
+                        <div class="flex align-items-center" [ngClass]="{'ml-4': !app.isRTL, 'mr-4': app.isRTL}">
+                            <p-radioButton name="layoutMode" value="dark" [(ngModel)]="app.layoutMode" inputId="layoutMode2" (onClick)="onLayoutModeChange($event, 'dark')"></p-radioButton>
+                            <label for="layoutMode2" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">Dark</label>
+                        </div>
+                    </div>
+
+                    <h6>Menu Mode</h6>
+                    <div class="flex">
+                        <div class="flex flex-column">
+                            <div class="flex align-items-center">
+                                <p-radioButton name="menuMode" value="static" [(ngModel)]="app.menuMode" inputId="menuMode1"></p-radioButton>
+                                <label for="menuMode1" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">Static</label>
+                            </div>
+                            <div class="flex align-items-center mt-3">
+                                <p-radioButton name="menuMode" value="horizontal" [(ngModel)]="app.menuMode" inputId="menuMode2"></p-radioButton>
+                                <label for="menuMode2" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">Horizontal</label>
+                            </div>
+                        </div>
+                        <div class="flex flex-column" [ngClass]="{'ml-4': !app.isRTL, 'mr-4': app.isRTL}">
+                            <div class="flex align-items-center">
+                                <p-radioButton name="menuMode" value="overlay" [(ngModel)]="app.menuMode" inputId="menuMode4"></p-radioButton>
+                                <label for="menuMode4" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">Overlay</label>
+                            </div>
+                            <div class="flex align-items-center mt-3">
+                                <p-radioButton name="menuMode" value="slim" [(ngModel)]="app.menuMode" inputId="menuMode3"></p-radioButton>
+                                <label for="menuMode3" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">Slim</label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <h6>Inline Menu Position</h6>
+                    <div class="flex">
+                        <div class="flex align-items-center">
+                            <p-radioButton name="inlineMenuPosition" value="top" [(ngModel)]="app.inlineMenuPosition" inputId="inlineMenuPosition1"></p-radioButton>
+                            <label for="inlineMenuPosition1" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">Top</label>
+                        </div>
+                        <div class="flex align-items-center" [ngClass]="{'ml-4': !app.isRTL, 'mr-4': app.isRTL}">
+                            <p-radioButton name="inlineMenuPosition" value="bottom" [(ngModel)]="app.inlineMenuPosition" inputId="inlineMenuPosition2"></p-radioButton>
+                            <label for="inlineMenuPosition2" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">Bottom</label>
+                        </div>
+                        <div class="flex align-items-center" [ngClass]="{'ml-4': !app.isRTL, 'mr-4': app.isRTL}">
+                            <p-radioButton name="inlineMenuPosition" value="both" [(ngModel)]="app.inlineMenuPosition" inputId="inlineMenuPosition3"></p-radioButton>
+                            <label for="inlineMenuPosition3" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">Both</label>
+                        </div>
+                    </div>
+
+                    <h6>Input Background</h6>
+                    <div class="flex">
+                        <div class="flex align-items-center">
+                            <p-radioButton name="inputStyle" value="outlined" [(ngModel)]="app.inputStyle" inputId="inputStyle1" (onClick)="onInputStyleClick()"></p-radioButton>
+                            <label for="inputStyle1" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">Outlined</label>
+                        </div>
+                        <div class="flex align-items-center" [ngClass]="{'ml-4': !app.isRTL, 'mr-4': app.isRTL}">
+                            <p-radioButton name="inputStyle" value="filled" [(ngModel)]="app.inputStyle" inputId="inputStyle2" (onClick)="onInputStyleClick()"></p-radioButton>
+                            <label for="inputStyle2" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">Filled</label>
+                        </div>
+                    </div>
+
+                    <h6>Ripple Effect</h6>
+                    <p-inputSwitch [ngModel]="app.ripple" (onChange)="appMain.onRippleChange($event)"></p-inputSwitch>
+
+                    <h6>RTL</h6>
+                    <p-inputSwitch [ngModel]="app.isRTL" (onChange)="appMain.onRTLChange($event)" styleClass="block"></p-inputSwitch>
+
+                    <h6>Menu Themes</h6>
+                    <div *ngIf="app.layoutMode!=='dark'" class="grid">
+                        <div *ngFor="let t of menuThemes" class="col col-fixed">
+                            <a style="cursor: pointer" (click)="changeMenuTheme(t)" class="layout-config-color-option" [title]="t.name">
+                                <span class="color" [ngStyle]="{'background-color': t.color}"></span>
+                                <span class="check flex align-items-center justify-content-center" *ngIf="app.menuTheme === t.name">
+                                    <i class="pi pi-check" style="color: var(--menu-text-color)"></i>
+                                </span>
+                            </a>
+                        </div>
+                    </div>
+                    <p *ngIf="app.layoutMode==='dark'">Menu themes are only available in light mode by design as large surfaces can emit too much brightness in dark mode.</p>
+
+                    <h6>Topbar Themes</h6>
+                    <div class="grid">
+                        <div *ngFor="let t of topbarThemes" class="col col-fixed">
+                            <a style="cursor: pointer" (click)="changeTopbarTheme(t)" class="layout-config-color-option" [title]="t.name">
+                                <span class="color" [ngStyle]="{'background-color': t.color}"></span>
+                                <span class="check flex align-items-center justify-content-center" *ngIf="app.topbarTheme === t.name">
+                                    <i class="pi pi-check" style="color: var(--topbar-text-color)"></i>
+                                </span>
+                            </a>
+                        </div>
+                    </div>
+
+                    <h6>Component Themes</h6>
+                    <div class="grid">
+                        <div *ngFor="let t of themes" class="col col-fixed">
+                            <a style="cursor: pointer" (click)="changeTheme(t.name)" class="layout-config-color-option" [title]="t.name">
+                                <span class="color" [ngStyle]="{'background-color': t.color}"></span>
+                                <span class="check flex align-items-center justify-content-center" *ngIf="theme === t.name">
+                                    <i class="pi pi-check" style="color: var(--primary-color-text)"></i>
+                                </span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </p-sidebar>
+
+        <p-button type="button" (click)="configActive = true" icon="pi pi-cog" *ngIf="!configActive" styleClass="layout-config-button"></p-button>
+    `
+})
+export class AppConfigComponent implements OnInit {
+
+    scale = 14;
+
+    scales: number[] = [12, 13, 14, 15, 16];
+
+    themes: any[];
+
+    menuThemes: any[];
+
+    menuTheme = 'light';
+
+    topbarThemes: any[];
+
+    topbarTheme = 'blue';
+
+    theme = 'indigo';
+
+    matchingMenuTheme = false;
+
+    matchingTopbarTheme = false;
+
+    selectedMenuTheme: any;
+
+    selectedTopbarTheme: any;
+
+    configActive = false;
+
+    isInputBackgroundChanged = false;
+
+    constructor(public appMain: AppMainComponent, public app: AppComponent) {}
+
+    ngOnInit() {
+        this.themes = [
+            {name: 'indigo', color: '#3F51B5'},
+            {name: 'pink', color: '#E91E63'},
+            {name: 'purple', color: '#9C27B0'},
+            {name: 'deeppurple', color: '#673AB7'},
+            {name: 'blue', color: '#2196F3'},
+            {name: 'lightblue', color: '#03A9F4'},
+            {name: 'cyan', color: '#00BCD4'},
+            {name: 'teal', color: '#009688'},
+            {name: 'green', color: '#4CAF50'},
+            {name: 'lightgreen', color: '#8BC34A'},
+            {name: 'lime', color: '#CDDC39'},
+            {name: 'yellow', color: '#FFEB3B'},
+            {name: 'amber', color: '#FFC107'},
+            {name: 'orange', color: '#FF9800'},
+            {name: 'deeporange', color: '#FF5722'},
+            {name: 'brown', color: '#795548'},
+            {name: 'bluegrey', color: '#607D8B'}
+        ];
+
+        this.menuThemes = [
+            {name: 'light', color: '#FDFEFF'},
+            {name: 'dark', color: '#434B54'},
+            {name: 'indigo', color: '#1A237E'},
+            {name: 'bluegrey', color: '#37474F'},
+            {name: 'brown', color: '#4E342E'},
+            {name: 'cyan', color: '#006064'},
+            {name: 'green', color: '#2E7D32'},
+            {name: 'deeppurple', color: '#4527A0'},
+            {name: 'deeporange', color: '#BF360C'},
+            {name: 'pink', color: '#880E4F'},
+            {name: 'purple', color: '#6A1B9A'},
+            {name: 'teal', color: '#00695C'}
+        ];
+
+        this.topbarThemes = [
+            {name: 'lightblue', color: '#2E88FF'},
+            {name: 'dark', color: '#363636'},
+            {name: 'white', color: '#FDFEFF'},
+            {name: 'blue', color: '#1565C0'},
+            {name: 'deeppurple', color: '#4527A0'},
+            {name: 'purple', color: '#6A1B9A'},
+            {name: 'pink', color: '#AD1457'},
+            {name: 'cyan', color: '#0097A7'},
+            {name: 'teal', color: '#00796B'},
+            {name: 'green', color: '#43A047'},
+            {name: 'lightgreen', color: '#689F38'},
+            {name: 'lime', color: '#AFB42B'},
+            {name: 'yellow', color: '#FBC02D'},
+            {name: 'amber', color: '#FFA000'},
+            {name: 'orange', color: '#FB8C00'},
+            {name: 'deeporange', color: '#D84315'},
+            {name: 'brown', color: '#5D4037'},
+            {name: 'grey', color: '#616161'},
+            {name: 'bluegrey', color: '#546E7A'},
+            {name: 'indigo', color: '#3F51B5'}
+        ];
+
+        this.selectedMenuTheme = this.menuThemes.find(theme => theme.name === this.menuTheme);
+        this.selectedTopbarTheme = this.topbarThemes.find(theme => theme.name === this.topbarTheme);
+    }
+
+    decrementScale() {
+        this.scale--;
+        this.applyScale();
+    }
+
+    incrementScale() {
+        this.scale++;
+        this.applyScale();
+    }
+
+    applyScale() {
+        document.documentElement.style.fontSize = this.scale + 'px';
+    }
+
+    onInputStyleClick() {
+        this.isInputBackgroundChanged = true;
+    }
+
+    onLayoutModeChange(event, mode) {
+        const appLogoLink: HTMLImageElement = document.getElementById('app-logo') as HTMLImageElement;
+        this.app.layoutMode = mode;
+
+        if (!this.isInputBackgroundChanged) {
+            this.app.inputStyle = mode === 'dark' ? 'filled' : 'outlined';
+        }
+
+        if (mode === 'dark') {
+            this.app.menuTheme = 'dark';
+            this.app.topbarTheme = 'dark';
+            appLogoLink.src = 'assets/layout/images/logo-light.png';
+        }
+        else {
+            this.app.menuTheme = 'light';
+            this.app.topbarTheme = 'blue';
+            appLogoLink.src = 'assets/layout/images/logo-light.png';
+        }
+
+        const layoutLink: HTMLLinkElement = document.getElementById('layout-css') as HTMLLinkElement;
+        const layoutHref = 'assets/layout/css/layout-' + this.app.layoutMode + '.css';
+        this.replaceLink(layoutLink, layoutHref);
+
+        const themeLink = document.getElementById('theme-css');
+        const urlTokens = themeLink.getAttribute('href').split('/');
+        urlTokens[urlTokens.length - 1] = 'theme-' + this.app.layoutMode + '.css';
+        const newURL = urlTokens.join('/');
+
+        this.replaceLink(themeLink, newURL, this.appMain['refreshChart']);
+    }
+
+    changeTheme(theme) {
+        this.theme = theme;
+
+        const themeLink: HTMLLinkElement = document.getElementById('theme-css') as HTMLLinkElement;
+        const themeHref = 'assets/theme/' + theme + '/theme-' + this.app.layoutMode + '.css';
+        this.replaceLink(themeLink, themeHref);
+    }
+
+    changeMenuTheme(theme) {
+        this.selectedMenuTheme = theme;
+        this.app.menuTheme = theme.name;
+    }
+
+    changeTopbarTheme(theme) {
+        this.selectedTopbarTheme = theme;
+        this.app.topbarTheme = theme.name;
+
+        const appLogoLink: HTMLImageElement = document.getElementById('app-logo') as HTMLImageElement;
+
+        if (theme.name === 'white' || theme.name === 'yellow' || theme.name === 'amber'
+            || theme.name === 'orange' || theme.name === 'lime') {
+            appLogoLink.src = 'assets/layout/images/logo-dark.png';
+        }
+        else {
+            appLogoLink.src = 'assets/layout/images/logo-light.png';
+        }
+    }
+
+    isIE() {
+        return /(MSIE|Trident\/|Edge\/)/i.test(window.navigator.userAgent);
+    }
+
+    replaceLink(linkElement, href, callback?) {
+        if (this.isIE()) {
+            linkElement.setAttribute('href', href);
+            if (callback) {
+                callback();
+            }
+        } else {
+            const id = linkElement.getAttribute('id');
+            const cloneLinkElement = linkElement.cloneNode(true);
+
+            cloneLinkElement.setAttribute('href', href);
+            cloneLinkElement.setAttribute('id', id + '-clone');
+
+            linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
+
+            cloneLinkElement.addEventListener('load', () => {
+                linkElement.remove();
+                cloneLinkElement.setAttribute('id', id);
+
+                if (callback) {
+                    callback();
+                }
+            });
+        }
+    }
+}

src/app/app.footer.component.ts

@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {AppComponent} from './app.component';
+
+@Component({
+    selector: 'app-footer',
+    template: `
+        <div class="layout-footer flex align-items-center p-4 shadow-2">
+            <img style="height: 2.25rem" id="footer-logo" [src]="'assets/layout/images/logo-' + (app.layoutMode === 'light' ? 'dark' : 'light') + '.png'" alt="ultima-footer-logo">
+            <button pButton pRipple type="button" icon="pi pi-github fs-large" class="p-button-rounded p-button-text p-button-plain" [ngClass]="{'ml-auto mr-2': !app.isRTL, 'ml-2 mr-auto': app.isRTL}"></button>
+            <button pButton pRipple type="button" icon="pi pi-facebook fs-large" class="p-button-rounded p-button-text p-button-plain" [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}"></button>
+            <button pButton pRipple type="button" icon="pi pi-twitter fs-large" class="p-button-rounded p-button-text p-button-plain" [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}"></button>
+        </div>
+    `
+})
+export class AppFooterComponent {
+    constructor(public app: AppComponent) {}
+}

src/app/app.inlinemenu.component.html

@@ -0,0 +1,20 @@
+<div [ngClass]="{'layout-inline-menu': true, 'layout-inline-menu-active':appMain.inlineMenuActive[key]}" [ngStyle]="style" [class]="styleClass">
+    <a class="layout-inline-menu-action flex flex-row align-items-center" [ngClass]="appMain.isHorizontal() ? 'p-3 lg:col-1 py-3' : 'p-3'" (click)="onClick($event)"
+        pTooltip="Alex Ondoa" [tooltipDisabled]="isTooltipDisabled">
+        <img src="assets/demo/images/avatar/amyelsner.png" alt="avatar" style="width: 32px; height: 32px;">
+        <span class="flex flex-column" [ngClass]="{'ml-2': !app.isRTL, 'mr-2': app.isRTL}">
+            <span class="font-bold">Alex Ondoa</span>
+            <small>Developpeur</small>
+        </span>
+        <i class="layout-inline-menu-icon pi pi-angle-down" [ngClass]="{'ml-auto': !app.isRTL, 'mr-auto': app.isRTL}"></i>
+    </a>
+
+    <ul class="layout-inline-menu-action-panel" [@menu]="appMain.inlineMenuActive[key] ? isHorizontalActive() ? 'visible' : 'visibleAnimated' : isHorizontalActive() ? 'hidden' : 'hiddenAnimated'">
+        <li class="layout-inline-menu-action-item" pTooltip="Logout" [tooltipDisabled]="isTooltipDisabled">
+            <a class="flex flex-row align-items-center" [attr.tabindex]="tabIndex">
+                <i class="pi pi-power-off pi-fw"></i>
+                <span>Logout</span>
+            </a>
+        </li>
+    </ul>
+</div>

src/app/app.inlinemenu.component.ts

@@ -0,0 +1,63 @@
+import { Component, Input } from '@angular/core';
+import { trigger, state, transition, style, animate } from '@angular/animations';
+import { AppMainComponent } from './app.main.component';
+import { AppComponent } from './app.component';
+
+@Component({
+    selector: 'app-inline-menu',
+    templateUrl: './app.inlinemenu.component.html',
+    animations: [
+        trigger('menu', [
+            state('hiddenAnimated', style({
+                height: '0px',
+                paddingBottom: '0px',
+                overflow: 'hidden'
+            })),
+            state('visibleAnimated', style({
+                height: '*',
+                overflow: 'visible'
+            })),
+            state('visible', style({
+                opacity: 1,
+                'z-index': 100
+            })),
+            state('hidden', style({
+                opacity: 0,
+                'z-index': '*'
+            })),
+            transition('visibleAnimated => hiddenAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
+            transition('hiddenAnimated => visibleAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
+            transition('visible => hidden', animate('.1s linear')),
+            transition('hidden => visible', [style({transform: 'scaleY(0.8)'}), animate('.12s cubic-bezier(0, 0, 0.2, 1)')])
+        ])
+    ]
+})
+export class AppInlineMenuComponent {
+
+    @Input() key = 'inline-menu';
+
+    @Input() style: any;
+
+    @Input() styleClass: string;
+
+    active: boolean;
+
+    constructor(public appMain: AppMainComponent, public app: AppComponent) { }
+
+    onClick(event) {
+        this.appMain.onInlineMenuClick(event, this.key);
+        event.preventDefault();
+    }
+
+    get isTooltipDisabled() {
+        return !(this.appMain.isSlim() && !this.appMain.isMobile());
+    }
+
+    get tabIndex() {
+        return !this.appMain.inlineMenuActive  ? '-1' : null;
+    }
+
+    isHorizontalActive() {
+       return this.appMain.isHorizontal() && !this.appMain.isMobile();
+    }
+}

src/app/app.main.component.html

@@ -0,0 +1,38 @@
+<div class="layout-wrapper" [ngClass]="{'p-input-filled': app.inputStyle === 'filled', 'p-ripple-disabled': !app.ripple,
+        'layout-menu-static': isStatic(),
+        'layout-menu-overlay': isOverlay(),
+        'layout-menu-horizontal': isHorizontal(),
+        'layout-menu-slim': isSlim(),
+        'layout-menu-active': menuActive,
+        'layout-menu-mobile-active': mobileMenuActive,
+        'layout-topbar-mobile-active': mobileTopbarActive,
+        'layout-rightmenu-active': rightMenuActive,
+        'layout-rtl': app.isRTL}" [class]="'layout-menu-' + app.menuTheme + ' layout-topbar-' + app.topbarTheme">
+
+    <app-topbar></app-topbar>
+
+    <app-rightmenu></app-rightmenu>
+
+    <div class="menu-wrapper" (click)="onMenuClick($event)">
+        <div class="layout-menu-container">
+            <app-inline-menu *ngIf="app.inlineMenuPosition=='top' || app.inlineMenuPosition=='both'" key="top"></app-inline-menu>
+            <app-menu></app-menu>
+            <app-inline-menu *ngIf="app.inlineMenuPosition=='bottom' || app.inlineMenuPosition=='both'" key="bottom"></app-inline-menu>
+        </div>
+    </div>
+
+    <div class="layout-main">
+        <app-breadcrumb></app-breadcrumb>
+
+        <div class="layout-content">
+            <router-outlet></router-outlet>
+        </div>
+
+        <app-footer></app-footer>
+    </div>
+
+    <app-config></app-config>
+
+    <div *ngIf="mobileMenuActive" class="layout-mask modal-in"></div>
+
+</div>

src/app/app.main.component.ts

@@ -0,0 +1,238 @@
+import {Component, AfterViewInit, Renderer2, OnInit, OnDestroy} from '@angular/core';
+import { MenuService } from './app.menu.service';
+import { PrimeNGConfig } from 'primeng/api';
+import { AppComponent } from './app.component';
+
+@Component({
+    selector: 'app-main',
+    templateUrl: './app.main.component.html'
+})
+export class AppMainComponent implements AfterViewInit, OnInit, OnDestroy {
+
+    topbarMenuActive: boolean;
+
+    menuActive: boolean;
+
+    staticMenuDesktopInactive: boolean;
+
+    mobileMenuActive: boolean;
+
+    menuClick: boolean;
+
+    mobileTopbarActive: boolean;
+
+    topbarRightClick: boolean;
+
+    topbarItemClick: boolean;
+
+    activeTopbarItem: string;
+
+    documentClickListener: () => void;
+
+    configActive: boolean;
+
+    configClick: boolean;
+
+    rightMenuActive: boolean;
+
+    menuHoverActive = false;
+
+    searchClick = false;
+
+    search = false;
+
+    currentInlineMenuKey: string;
+
+    inlineMenuActive: any[] = [];
+
+    inlineMenuClick: boolean;
+
+    constructor(public renderer: Renderer2, private menuService: MenuService, private primengConfig: PrimeNGConfig,
+                public app: AppComponent) { }
+
+    ngOnInit() {
+        this.menuActive = this.isStatic() && !this.isMobile();
+    }
+
+    ngAfterViewInit() {
+        // hides the horizontal submenus or top menu if outside is clicked
+        this.documentClickListener = this.renderer.listen('body', 'click', () => {
+            if (!this.topbarItemClick) {
+                this.activeTopbarItem = null;
+                this.topbarMenuActive = false;
+            }
+
+            if (!this.menuClick && (this.isHorizontal() || this.isSlim())) {
+                this.menuService.reset();
+            }
+
+            if (this.configActive && !this.configClick) {
+                this.configActive = false;
+            }
+
+            if (!this.menuClick) {
+                if (this.mobileMenuActive) {
+                    this.mobileMenuActive = false;
+                }
+
+                if (this.isOverlay()) {
+                    this.menuActive = false;
+                }
+
+                this.menuHoverActive = false;
+                this.unblockBodyScroll();
+            }
+
+            if (!this.searchClick) {
+                this.search = false;
+            }
+
+            if (this.inlineMenuActive[this.currentInlineMenuKey] && !this.inlineMenuClick) {
+                this.inlineMenuActive[this.currentInlineMenuKey] = false;
+            }
+
+            this.inlineMenuClick = false;
+            this.searchClick = false;
+            this.configClick = false;
+            this.topbarItemClick = false;
+            this.topbarRightClick = false;
+            this.menuClick = false;
+        });
+    }
+
+    onMenuButtonClick(event) {
+        this.menuActive = !this.menuActive;
+        this.topbarMenuActive = false;
+        this.topbarRightClick = true;
+        this.menuClick = true;
+
+        if (this.isDesktop()) {
+            this.staticMenuDesktopInactive = !this.staticMenuDesktopInactive;
+        } else {
+            this.mobileMenuActive = !this.mobileMenuActive;
+            if (this.mobileMenuActive) {
+                this.blockBodyScroll();
+            } else {
+                this.unblockBodyScroll();
+            }
+        }
+
+        event.preventDefault();
+    }
+
+    onTopbarMobileButtonClick(event) {
+        this.mobileTopbarActive = !this.mobileTopbarActive;
+        event.preventDefault();
+    }
+
+    onRightMenuButtonClick(event) {
+        this.rightMenuActive = !this.rightMenuActive;
+        event.preventDefault();
+    }
+
+    onMenuClick($event) {
+        this.menuClick = true;
+
+        if (this.inlineMenuActive[this.currentInlineMenuKey] && !this.inlineMenuClick) {
+            this.inlineMenuActive[this.currentInlineMenuKey] = false;
+        }
+    }
+
+    onSearchKeydown(event) {
+        if (event.keyCode === 27) {
+            this.search = false;
+        }
+    }
+
+    onInlineMenuClick(event, key) {
+        if (key !== this.currentInlineMenuKey) {
+            this.inlineMenuActive[this.currentInlineMenuKey] = false;
+        }
+
+        this.inlineMenuActive[key] = !this.inlineMenuActive[key];
+        this.currentInlineMenuKey = key;
+        this.inlineMenuClick = true;
+    }
+
+    onTopbarItemClick(event, item) {
+        this.topbarItemClick = true;
+
+        if (this.activeTopbarItem === item) {
+            this.activeTopbarItem = null;
+        }
+        else {
+            this.activeTopbarItem = item;
+        }
+
+        if (item === 'search') {
+            this.search = !this.search;
+            this.searchClick = !this.searchClick;
+        }
+
+        event.preventDefault();
+    }
+
+    onTopbarSubItemClick(event) {
+        event.preventDefault();
+    }
+
+    onRTLChange(event) {
+        this.app.isRTL = event.checked;
+    }
+
+    onRippleChange(event) {
+        this.app.ripple = event.checked;
+        this.primengConfig.ripple = event.checked;
+    }
+
+    onConfigClick(event) {
+        this.configClick = true;
+    }
+
+    isDesktop() {
+        return window.innerWidth > 991;
+    }
+
+    isMobile() {
+        return window.innerWidth <= 991;
+    }
+
+    isOverlay() {
+        return this.app.menuMode === 'overlay';
+    }
+
+    isStatic() {
+        return this.app.menuMode === 'static';
+    }
+
+    isHorizontal() {
+        return this.app.menuMode === 'horizontal';
+    }
+
+    isSlim() {
+        return this.app.menuMode === 'slim';
+    }
+
+    blockBodyScroll(): void {
+        if (document.body.classList) {
+            document.body.classList.add('blocked-scroll');
+        } else {
+            document.body.className += ' blocked-scroll';
+        }
+    }
+
+    unblockBodyScroll(): void {
+        if (document.body.classList) {
+            document.body.classList.remove('blocked-scroll');
+        } else {
+            document.body.className = document.body.className.replace(new RegExp('(^|\\b)' +
+                'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+        }
+    }
+
+    ngOnDestroy() {
+        if (this.documentClickListener) {
+            this.documentClickListener();
+        }
+    }
+}

src/app/app.menu.component.ts

@@ -0,0 +1,28 @@
+import {Component, OnInit} from '@angular/core';
+import {AppComponent} from './app.component';
+
+@Component({
+    selector: 'app-menu',
+    template: `
+        <ul class="layout-menu">
+            <li app-menuitem *ngFor="let item of model; let i = index;" [item]="item" [index]="i" [root]="true"></li>
+        </ul>
+    `
+})
+export class AppMenuComponent implements OnInit {
+
+    model: any[];
+
+    constructor(public app: AppComponent) {}
+
+    ngOnInit() {
+        this.model = [
+            {
+                label: 'Natan', icon: 'pi pi-fw pi-home',
+                items: [
+                    {label: 'Dashboard', icon: 'pi pi-fw pi-home', routerLink: ['/']},
+                ]
+            }
+        ];
+    }
+}

src/app/app.menu.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class MenuService {
+
+    private menuSource = new Subject<string>();
+    private resetSource = new Subject();
+
+    menuSource$ = this.menuSource.asObservable();
+    resetSource$ = this.resetSource.asObservable();
+
+    onMenuStateChange(key: string) {
+        this.menuSource.next(key);
+    }
+
+    reset() {
+        this.resetSource.next();
+    }
+}

src/app/app.menuitem.component.ts

@@ -0,0 +1,208 @@
+import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit} from '@angular/core';
+import {NavigationEnd, Router} from '@angular/router';
+import {animate, state, style, transition, trigger} from '@angular/animations';
+import {Subscription} from 'rxjs';
+import {filter} from 'rxjs/operators';
+import {MenuService} from './app.menu.service';
+import {AppMainComponent} from './app.main.component';
+
+@Component({
+    /* tslint:disable:component-selector */
+    selector: '[app-menuitem]',
+    /* tslint:enable:component-selector */
+    template: `
+        <ng-container>
+            <div *ngIf="root && item.visible !== false">
+                <span class="layout-menuitem-text">{{item.label}}</span>
+            </div>
+            <a [attr.href]="item.url" (click)="itemClick($event)" *ngIf="(!item.routerLink || item.items) && item.visible !== false" (keydown.enter)="itemClick($event)"
+               [attr.target]="item.target" [attr.tabindex]="0" [ngClass]="item.class" (mouseenter)="onMouseEnter()" pRipple
+               [pTooltip]="item.label" [tooltipDisabled]="active || !(root && app.isSlim() && !app.isMobile())">
+                <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+                <span class="layout-menuitem-text">{{item.label}}</span>
+                <span class="p-badge p-component p-badge-no-gutter" [ngClass]="item.badgeClass" *ngIf="item.badge && !root">{{item.badge}}</span>
+                <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+            </a>
+            <a (click)="itemClick($event)" *ngIf="(item.routerLink && !item.items) && item.visible !== false"
+               [routerLink]="item.routerLink" routerLinkActive="active-menuitem-routerlink" [routerLinkActiveOptions]="{exact: true}"
+               [attr.target]="item.target" [attr.tabindex]="0" [ngClass]="item.class" (mouseenter)="onMouseEnter()" pRipple
+               [pTooltip]="item.label" [tooltipDisabled]="active || !(root && app.isSlim() && !app.isMobile())">
+                <i [ngClass]="item.icon" class="layout-menuitem-icon"></i>
+                <span class="layout-menuitem-text">{{item.label}}</span>
+                <span class="p-badge p-component p-badge-no-gutter" [ngClass]="item.badgeClass" *ngIf="item.badge && !root">{{item.badge}}</span>
+                <i class="pi pi-fw pi-angle-down layout-submenu-toggler" *ngIf="item.items"></i>
+            </a>
+            <ul *ngIf="((item.items && root) || (item.items && active)) && item.visible !== false" [@children]="root ? 'visible' : active ? 'visibleAnimated' : 'hiddenAnimated'">
+                <ng-template ngFor let-child let-i="index" [ngForOf]="item.items">
+                    <li app-menuitem [item]="child" [index]="i" [parentKey]="key" [class]="child.badgeClass"></li>
+                </ng-template>
+            </ul>
+        </ng-container>
+    `,
+    host: {
+        '[class.layout-root-menuitem]': 'root || active',
+        '[class.active-menuitem]': '(active)'
+    },
+    animations: [
+        trigger('children', [
+            state('void', style({
+                height: '0px',
+                padding: '0px'
+            })),
+            state('hiddenAnimated', style({
+                height: '0px',
+                padding: '0px'
+            })),
+            state('visibleAnimated', style({
+                height: '*'
+            })),
+            state('visible', style({
+                height: '*'
+            })),
+            state('hidden', style({
+                height: '0px',
+                padding: '0px'
+            })),
+            transition('visibleAnimated => hiddenAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
+            transition('hiddenAnimated => visibleAnimated', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)')),
+            transition('void => visibleAnimated, visibleAnimated => void',
+                animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+        ])
+    ]
+})
+export class AppMenuitemComponent implements OnInit, OnDestroy {
+
+    @Input() item: any;
+
+    @Input() index: number;
+
+    @Input() root: boolean;
+
+    @Input() parentKey: string;
+
+    active = false;
+
+    menuSourceSubscription: Subscription;
+
+    menuResetSubscription: Subscription;
+
+    key: string;
+
+    constructor(public app: AppMainComponent, public router: Router, private cd: ChangeDetectorRef, private menuService: MenuService) {
+        this.menuSourceSubscription = this.menuService.menuSource$.subscribe(key => {
+            // deactivate current active menu
+            if (this.active && this.key !== key && key.indexOf(this.key) !== 0) {
+                this.active = false;
+            }
+        });
+
+        this.menuResetSubscription = this.menuService.resetSource$.subscribe(() => {
+            this.active = false;
+        });
+
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd))
+            .subscribe(params => {
+                if (this.app.isHorizontal() || this.app.isSlim()) {
+                    this.active = false;
+                } else {
+                    if (this.item.routerLink) {
+                        this.updateActiveStateFromRoute();
+                    } else {
+                        this.active = false;
+                    }
+                }
+            });
+    }
+
+    ngOnInit() {
+        if (!(this.app.isHorizontal() || this.app.isSlim()) && this.item.routerLink) {
+            this.updateActiveStateFromRoute();
+        }
+
+        this.key = this.parentKey ? this.parentKey + '-' + this.index : String(this.index);
+    }
+
+    updateActiveStateFromRoute() {
+        this.active = this.router.isActive(this.item.routerLink[0], this.item.items ? false : true);
+    }
+
+    itemClick(event: Event) {
+        // avoid processing disabled items
+        if (this.item.disabled) {
+            event.preventDefault();
+            return;
+        }
+
+        // navigate with hover in horizontal mode
+        if (this.root) {
+            this.app.menuHoverActive = !this.app.menuHoverActive;
+        }
+
+        // notify other items
+        this.menuService.onMenuStateChange(this.key);
+
+        // execute command
+        if (this.item.command) {
+            this.item.command({originalEvent: event, item: this.item});
+        }
+
+        // toggle active state
+        if (this.item.items) {
+            this.active = !this.active;
+        } else {
+            // activate item
+            this.active = true;
+
+            // reset horizontal and slim menu
+            if (this.app.isHorizontal() || this.app.isSlim()) {
+                this.menuService.reset();
+                this.app.menuHoverActive = false;
+            }
+
+            if (!this.app.isStatic()) {
+                this.app.menuActive = false;
+            }
+
+            this.app.mobileMenuActive = false;
+        }
+
+        this.removeActiveInk(event);
+    }
+
+    onMouseEnter() {
+        // activate item on hover
+        if (this.root  && (this.app.isHorizontal() || this.app.isSlim()) && this.app.isDesktop()) {
+            if (this.app.menuHoverActive) {
+                this.menuService.onMenuStateChange(this.key);
+                this.active = true;
+            }
+        }
+    }
+
+    removeActiveInk(event: Event) {
+        const currentTarget = (event.currentTarget as HTMLElement);
+        setTimeout(() => {
+            if (currentTarget) {
+                const activeInk = currentTarget.querySelector('.p-ink-active');
+                if (activeInk) {
+                    if (activeInk.classList) {
+                        activeInk.classList.remove('p-ink-active');
+                    }
+                    else {
+                        activeInk.className = activeInk.className.replace(new RegExp('(^|\\b)' + 'p-ink-active'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+                    }
+                }
+            }
+        }, 401);
+    }
+
+    ngOnDestroy() {
+        if (this.menuSourceSubscription) {
+            this.menuSourceSubscription.unsubscribe();
+        }
+
+        if (this.menuResetSubscription) {
+            this.menuResetSubscription.unsubscribe();
+        }
+    }
+}

src/app/app.module.ts

@@ -0,0 +1,223 @@
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {HttpClientModule} from '@angular/common/http';
+import {BrowserModule} from '@angular/platform-browser';
+import {HashLocationStrategy, LocationStrategy} from '@angular/common';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {AppRoutingModule} from './app-routing.module';
+
+import {AccordionModule} from 'primeng/accordion';
+import {AutoCompleteModule} from 'primeng/autocomplete';
+import {AvatarModule} from 'primeng/avatar';
+import {AvatarGroupModule} from 'primeng/avatargroup';
+import {BadgeModule} from 'primeng/badge';
+import {BreadcrumbModule} from 'primeng/breadcrumb';
+import {ButtonModule} from 'primeng/button';
+import {CalendarModule} from 'primeng/calendar';
+import {CardModule} from 'primeng/card';
+import {CarouselModule} from 'primeng/carousel';
+import {CascadeSelectModule} from 'primeng/cascadeselect';
+import {ChartModule} from 'primeng/chart';
+import {CheckboxModule} from 'primeng/checkbox';
+import {ChipModule} from 'primeng/chip';
+import {ChipsModule} from 'primeng/chips';
+import {CodeHighlighterModule} from 'primeng/codehighlighter';
+import {ConfirmDialogModule} from 'primeng/confirmdialog';
+import {ConfirmPopupModule} from 'primeng/confirmpopup';
+import {ColorPickerModule} from 'primeng/colorpicker';
+import {ContextMenuModule} from 'primeng/contextmenu';
+import {DataViewModule} from 'primeng/dataview';
+import {DialogModule} from 'primeng/dialog';
+import {DividerModule} from 'primeng/divider';
+import {DropdownModule} from 'primeng/dropdown';
+import {FieldsetModule} from 'primeng/fieldset';
+import {FileUploadModule} from 'primeng/fileupload';
+import {FullCalendarModule} from '@fullcalendar/angular';
+import {GalleriaModule} from 'primeng/galleria';
+import {ImageModule} from 'primeng/image';
+import {InplaceModule} from 'primeng/inplace';
+import {InputNumberModule} from 'primeng/inputnumber';
+import {InputMaskModule} from 'primeng/inputmask';
+import {InputSwitchModule} from 'primeng/inputswitch';
+import {InputTextModule} from 'primeng/inputtext';
+import {InputTextareaModule} from 'primeng/inputtextarea';
+import {KnobModule} from 'primeng/knob';
+import {LightboxModule} from 'primeng/lightbox';
+import {ListboxModule} from 'primeng/listbox';
+import {MegaMenuModule} from 'primeng/megamenu';
+import {MenuModule} from 'primeng/menu';
+import {MenubarModule} from 'primeng/menubar';
+import {MessagesModule} from 'primeng/messages';
+import {MessageModule} from 'primeng/message';
+import {MultiSelectModule} from 'primeng/multiselect';
+import {OrderListModule} from 'primeng/orderlist';
+import {OrganizationChartModule} from 'primeng/organizationchart';
+import {OverlayPanelModule} from 'primeng/overlaypanel';
+import {PaginatorModule} from 'primeng/paginator';
+import {PanelModule} from 'primeng/panel';
+import {PanelMenuModule} from 'primeng/panelmenu';
+import {PasswordModule} from 'primeng/password';
+import {PickListModule} from 'primeng/picklist';
+import {ProgressBarModule} from 'primeng/progressbar';
+import {RadioButtonModule} from 'primeng/radiobutton';
+import {RatingModule} from 'primeng/rating';
+import {RippleModule} from 'primeng/ripple';
+import {ScrollPanelModule} from 'primeng/scrollpanel';
+import {ScrollTopModule} from 'primeng/scrolltop';
+import {SelectButtonModule} from 'primeng/selectbutton';
+import {SidebarModule} from 'primeng/sidebar';
+import {SkeletonModule} from 'primeng/skeleton';
+import {SlideMenuModule} from 'primeng/slidemenu';
+import {SliderModule} from 'primeng/slider';
+import {SplitButtonModule} from 'primeng/splitbutton';
+import {SplitterModule} from 'primeng/splitter';
+import {StepsModule} from 'primeng/steps';
+import {TabMenuModule} from 'primeng/tabmenu';
+import {TableModule} from 'primeng/table';
+import {TabViewModule} from 'primeng/tabview';
+import {TagModule} from 'primeng/tag';
+import {TerminalModule} from 'primeng/terminal';
+import {TieredMenuModule} from 'primeng/tieredmenu';
+import {TimelineModule} from 'primeng/timeline';
+import {ToastModule} from 'primeng/toast';
+import {ToggleButtonModule} from 'primeng/togglebutton';
+import {ToolbarModule} from 'primeng/toolbar';
+import {TooltipModule} from 'primeng/tooltip';
+import {TreeModule} from 'primeng/tree';
+import {TreeTableModule} from 'primeng/treetable';
+import {VirtualScrollerModule} from 'primeng/virtualscroller';
+
+import {AppCodeModule} from './app.code.component';
+import {AppComponent} from './app.component';
+import {AppMainComponent} from './app.main.component';
+import {AppConfigComponent} from './app.config.component';
+import {AppMenuComponent} from './app.menu.component';
+import {AppMenuitemComponent} from './app.menuitem.component';
+import {AppInlineMenuComponent} from './app.inlinemenu.component';
+import {AppRightMenuComponent} from './app.rightmenu.component';
+import {AppBreadcrumbComponent} from './app.breadcrumb.component';
+import {AppTopBarComponent} from './app.topbar.component';
+import {AppFooterComponent} from './app.footer.component';
+
+import {MenuService} from './app.menu.service';
+import {AppBreadcrumbService} from './app.breadcrumb.service';
+
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+
+FullCalendarModule.registerPlugins([
+    dayGridPlugin,
+    timeGridPlugin,
+    interactionPlugin
+]);
+
+@NgModule({
+    imports: [
+        BrowserModule,
+        FormsModule,
+        AppRoutingModule,
+        HttpClientModule,
+        BrowserAnimationsModule,
+        AccordionModule,
+        AutoCompleteModule,
+        AvatarModule,
+        AvatarGroupModule,
+        BadgeModule,
+        BreadcrumbModule,
+        ButtonModule,
+        CalendarModule,
+        CardModule,
+        CarouselModule,
+        CascadeSelectModule,
+        ChartModule,
+        CheckboxModule,
+        ChipModule,
+        ChipsModule,
+        CodeHighlighterModule,
+        ConfirmDialogModule,
+        ConfirmPopupModule,
+        ColorPickerModule,
+        ContextMenuModule,
+        DataViewModule,
+        DialogModule,
+        DividerModule,
+        DropdownModule,
+        FieldsetModule,
+        FileUploadModule,
+        FullCalendarModule,
+        GalleriaModule,
+        ImageModule,
+        InplaceModule,
+        InputNumberModule,
+        InputMaskModule,
+        InputSwitchModule,
+        InputTextModule,
+        InputTextareaModule,
+        KnobModule,
+        LightboxModule,
+        ListboxModule,
+        MegaMenuModule,
+        MenuModule,
+        MenubarModule,
+        MessageModule,
+        MessagesModule,
+        MultiSelectModule,
+        OrderListModule,
+        OrganizationChartModule,
+        OverlayPanelModule,
+        PaginatorModule,
+        PanelModule,
+        PanelMenuModule,
+        PasswordModule,
+        PickListModule,
+        ProgressBarModule,
+        RadioButtonModule,
+        RatingModule,
+        RippleModule,
+        ScrollPanelModule,
+        ScrollTopModule,
+        SelectButtonModule,
+        SidebarModule,
+        SkeletonModule,
+        SlideMenuModule,
+        SliderModule,
+        SplitButtonModule,
+        SplitterModule,
+        StepsModule,
+        TableModule,
+        TabMenuModule,
+        TabViewModule,
+        TagModule,
+        TerminalModule,
+        TimelineModule,
+        TieredMenuModule,
+        ToastModule,
+        ToggleButtonModule,
+        ToolbarModule,
+        TooltipModule,
+        TreeModule,
+        TreeTableModule,
+        VirtualScrollerModule,
+        AppCodeModule
+    ],
+    declarations: [
+        AppComponent,
+        AppMainComponent,
+        AppConfigComponent,
+        AppMenuComponent,
+        AppMenuitemComponent,
+        AppInlineMenuComponent,
+        AppRightMenuComponent,
+        AppBreadcrumbComponent,
+        AppTopBarComponent,
+        AppFooterComponent
+    ],
+    providers: [
+        {provide: LocationStrategy, useClass: HashLocationStrategy},
+        MenuService, AppBreadcrumbService
+    ],
+    bootstrap: [AppComponent]
+})
+export class AppModule {
+}

src/app/app.rightmenu.component.html

@@ -0,0 +1,70 @@
+<p-sidebar [(visible)]="appMain.rightMenuActive" [position]="app.isRTL ? 'left' : 'right'" [blockScroll]="true" [showCloseIcon]="false" [baseZIndex]="1000" [styleClass]="'layout-rightmenu p-sidebar-sm fs-small py-3 ' + (app.isRTL ? 'pl-0 pr-3' : 'pl-3 pr-0')">
+    <div class="online-members flex flex-column mt-3" [ngClass]="{'ml-3': !app.isRTL, 'mr-3': app.isRTL}">
+        <h6 class="header">ONLINE MEMBERS</h6>
+        <div class="flex flex-row flex-wrap">
+            <img class="m-1" src="assets/demo/images/avatar/avatar-1.png" alt="avatar-1"/>
+            <img class="m-1" src="assets/demo/images/avatar/avatar-2.png" alt="avatar-2"/>
+            <img class="m-1" src="assets/demo/images/avatar/avatar-3.png" alt="avatar-3"/>
+            <img class="m-1" src="assets/demo/images/avatar/avatar-4.png" alt="avatar-4"/>
+            <img class="m-1" src="assets/demo/images/avatar/avatar-5.png" alt="avatar-5"/>
+            <img class="m-1" src="assets/demo/images/avatar/avatar-6.png" alt="avatar-6"/>
+            <img class="m-1" src="assets/demo/images/avatar/avatar-7.png" alt="avatar-7"/>
+            <img class="m-1" src="assets/demo/images/avatar/avatar-8.png" alt="avatar-8"/>
+            <img class="m-1" src="assets/demo/images/avatar/avatar-9.png" alt="avatar-9"/>
+            <img class="m-1" src="assets/demo/images/avatar/avatar-10.png" alt="avatar-10"/>
+            <img class="m-1" src="assets/demo/images/avatar/avatar-11.png" alt="avatar-11"/>
+            <img class="m-1" src="assets/demo/images/avatar/avatar-12.png" alt="avatar-12"/>
+            <img class="m-1" src="assets/demo/images/avatar/avatar-13.png" alt="avatar-13"/>
+            <img class="m-1" src="assets/demo/images/avatar/avatar-14.png" alt="avatar-14"/>
+            <img class="m-1" src="assets/demo/images/avatar/avatar-15.png" alt="avatar-15"/>
+            <img class="m-1" src="assets/demo/images/avatar/avatar-16.png" alt="avatar-16"/>
+        </div>
+        <span class="mt-3"><b>+19</b> Costumers</span>
+    </div>
+    <div class="latest-activity flex flex-column mt-6" [ngClass]="{'ml-3': !app.isRTL, 'mr-3': app.isRTL}">
+        <h6 class="header">LATEST ACTIVITY</h6>
+        <div class="flex flex-row pt-2">
+            <i class="pi pi-images align-self-start p-2" [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}"></i>
+            <div class="flex flex-column">
+                <span class="font-bold mb-1">New Sale</span>
+                <span class="mb-2">Richard Jones has purchased a blue t-shirt for $79.</span>
+                <span class="flex align-items-center">
+                    <img [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}" src="assets/demo/images/avatar/activity-1.png" alt=""/>
+                    <small class="muted-text">Emmy Adams, 21.40</small>
+                </span>
+            </div>
+        </div>
+        <div class="flex flex-row pt-3">
+            <i class="pi pi-images align-self-start p-2" [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}"></i>
+            <div class="flex flex-column">
+                <span class="font-bold mb-1">Withdrawal Initiated</span>
+                <span class="mb-2">Your request for withdrawal of $2500 has been initiated.</span>
+                <span class="flex align-items-center">
+                    <img [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}" src="assets/demo/images/avatar/activity-2.png" alt="avatar-2"/>
+                    <small class="muted-text">Emily Walter, 21.40</small>
+                </span>
+            </div>
+        </div>
+        <div class="flex flex-row pt-3">
+            <i class="pi pi-images align-self-start p-2" [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}"></i>
+            <div class="flex flex-column">
+                <span class="font-bold mb-1">Question Received</span>
+                <span class="mb-2">Jane Davis has posted a new question about your product.</span>
+                <span class="flex align-items-center">
+                    <img [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}" src="assets/demo/images/avatar/activity-3.png" alt="avatar-3"/>
+                    <small class="muted-text">Jane Davis, 21.45</small>
+                </span>
+            </div>
+        </div>
+    </div>
+    <div class="next-events flex flex-column mt-6" [ngClass]="{'ml-3': !app.isRTL, 'mr-3': app.isRTL}">
+        <h6 class="header">NEXT EVENTS</h6>
+        <ul>
+            <li><i class="pi pi-eye" [ngClass]="{'mr-3': !app.isRTL, 'ml-3': app.isRTL}"></i>A/B Test</li>
+            <li><i class="pi pi-video" [ngClass]="{'mr-3': !app.isRTL, 'ml-3': app.isRTL}"></i>Video Shoot</li>
+            <li><i class="pi pi-sitemap" [ngClass]="{'mr-3': !app.isRTL, 'ml-3': app.isRTL}"></i>Board Meeting</li>
+            <li><i class="pi pi-compass" [ngClass]="{'mr-3': !app.isRTL, 'ml-3': app.isRTL}"></i>Q4 Planning</li>
+            <li><i class="pi pi-palette" [ngClass]="{'mr-3': !app.isRTL, 'ml-3': app.isRTL}"></i>Design Training</li>
+        </ul>
+    </div>
+</p-sidebar>

src/app/app.rightmenu.component.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+import { AppComponent } from './app.component';
+import {AppMainComponent} from './app.main.component';
+
+@Component({
+    selector: 'app-rightmenu',
+    templateUrl: './app.rightmenu.component.html'
+})
+export class AppRightMenuComponent {
+    constructor(public appMain: AppMainComponent, public app: AppComponent) {}
+}

src/app/app.topbar.component.html

@@ -0,0 +1,166 @@
+<div class="layout-topbar shadow-4">
+    <div class="layout-topbar-left">
+        <a class="layout-topbar-logo" routerLink="/">
+            <img id="app-logo" src="assets/layout/images/logo-light.png" style="height: 2.25rem">
+            <h3 class="m-1"> NATAN</h3>
+        </a>
+
+        <a class="layout-menu-button shadow-6" (click)="appMain.onMenuButtonClick($event)" pRipple>
+            <i class="pi pi-chevron-right"></i>
+        </a>
+
+        <a class="layout-topbar-mobile-button" (click)="appMain.onTopbarMobileButtonClick($event)" pRipple>
+            <i class="pi pi-ellipsis-v fs-large"></i>
+        </a>
+    </div>
+
+    <div class="layout-topbar-right" [ngClass]="{'layout-topbar-mobile-active': appMain.mobileTopbarActive}">
+        <div class="layout-topbar-actions-left">
+            <!-- <p-megaMenu [model]="model" styleClass="layout-megamenu"></p-megaMenu> -->
+        </div>
+        <div class="layout-topbar-actions-right">
+            <ul class="layout-topbar-items">
+                <!-- <li class="layout-topbar-item layout-search-item">
+                    <a class="layout-topbar-action rounded-circle" (click)="appMain.onTopbarItemClick($event, 'search')" pRipple>
+                        <i class="pi pi-search fs-large"></i>
+                    </a>
+
+                    <div class="layout-search-panel p-inputgroup" [@topbarActionPanelAnimation]="'visible'" *ngIf="appMain.search" (@topbarActionPanelAnimation.done)="onSearchAnimationEnd($event)">
+                        <span class="p-inputgroup-addon"><i class="pi pi-search"></i></span>
+                        <input #searchInput type="text" pInputText placeholder="Search" (click)="appMain.searchClick = true;" (keydown)="appMain.onSearchKeydown($event)">
+                        <span class="p-inputgroup-addon">
+                            <button pButton pRipple type="button" icon="pi pi-times" class="p-button-rounded p-button-text p-button-plain" (click)="appMain.searchClick = false;"></button>
+                        </span>
+                    </div>
+                </li>
+                <li class="layout-topbar-item notifications">
+                    <a class="layout-topbar-action rounded-circle" (click)="appMain.onTopbarItemClick($event, 'notifications')" pRipple>
+                        <span class="p-overlay-badge">
+                            <i class="pi pi-bell fs-large"></i>
+                            <span class="p-badge p-badge-warning p-badge-dot"></span>
+                        </span>
+                    </a>
+
+                    <ul class="layout-topbar-action-panel shadow-6" [@topbarActionPanelAnimation]="'visible'" *ngIf="appMain.activeTopbarItem === 'notifications'">
+                        <li class="mb-3">
+                            <span class="px-3 fs-small">You have <b>4</b> new notifications</span>
+                        </li>
+                        <li class="layout-topbar-action-item">
+                            <div class="flex flex-row align-items-center">
+                                <img src="assets/demo/images/avatar/avatar-1.png"/>
+                                <div class="flex flex-column" [ngClass]="{'ml-3': !app.isRTL, 'mr-3': app.isRTL}" style="flex-grow: 1;">
+                                    <div class="flex align-items-center justify-content-between mb-1">
+                                        <span class="fs-small font-bold">Jerome Bell</span>
+                                        <small>42 mins ago</small>
+                                    </div>
+                                    <span class="fs-small">How to write content about your photographs?</span>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="layout-topbar-action-item">
+                            <div class="flex flex-row align-items-center">
+                                <img src="assets/demo/images/avatar/avatar-2.png"/>
+                                <div class="flex flex-column" [ngClass]="{'ml-3': !app.isRTL, 'mr-3': app.isRTL}" style="flex-grow: 1;">
+                                    <div class="flex align-items-center justify-content-between mb-1">
+                                        <span class="fs-small font-bold">Cameron Williamson</span>
+                                        <small>48 mins ago</small>
+                                    </div>
+                                    <span class="fs-small">Start a blog to reach your creative peak.</span>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="layout-topbar-action-item">
+                            <div class="flex flex-row align-items-center">
+                                <img src="assets/demo/images/avatar/avatar-3.png"/>
+                                <div class="flex flex-column" [ngClass]="{'ml-3': !app.isRTL, 'mr-3': app.isRTL}" style="flex-grow: 1;">
+                                    <div class="flex align-items-center justify-content-between mb-1">
+                                        <span class="fs-small font-bold">Anna Miles</span>
+                                        <small>1 day ago</small>
+                                    </div>
+                                    <span class="fs-small">Caring is the new marketing</span>
+                                </div>
+                            </div>
+                        </li>
+                        <li class="layout-topbar-action-item">
+                            <div class="flex flex-row align-items-center">
+                                <img src="assets/demo/images/avatar/avatar-4.png"/>
+                                <div class="flex flex-column" [ngClass]="{'ml-3': !app.isRTL, 'mr-3': app.isRTL}" style="flex-grow: 1;">
+                                    <div class="flex align-items-center justify-content-between mb-1">
+                                        <span class="fs-small font-bold">Arlene Mccoy</span>
+                                        <small>4 day ago</small>
+                                    </div>
+                                    <span class="fs-small">Starting your traveling blog with Vasco.</span>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </li>
+                <li class="layout-topbar-item app">
+                    <a class="layout-topbar-action rounded-circle" (click)="appMain.onTopbarItemClick($event, 'apps')" pRipple>
+                        <i class="pi pi-table fs-large"></i>
+                    </a>
+
+                    <div class="layout-topbar-action-panel shadow-6" [@topbarActionPanelAnimation]="'visible'" *ngIf="appMain.activeTopbarItem === 'apps'">
+                        <div class="grid grid-nogutter">
+                            <div class="layout-topbar-action-item col-4">
+                                <a class="flex align-items-center flex-column text-color" pRipple>
+                                    <i class="pi pi-image action indigo-bgcolor white-color"></i>
+                                    <span>Products</span>
+                                </a>
+                            </div>
+                            <div class="layout-topbar-action-item col-4">
+                                <a class="flex align-items-center flex-column text-color" pRipple>
+                                    <i class="pi pi-file-pdf action orange-bgcolor white-color"></i>
+                                    <span>Reports</span>
+                                </a>
+                            </div>
+                            <div class="layout-topbar-action-item col-4">
+                                <a class="flex align-items-center flex-column text-color" pRipple>
+                                    <i class="pi pi-dollar action teal-bgcolor white-color"></i>
+                                    <span>Balance</span>
+                                </a>
+                            </div>
+                            <div class="layout-topbar-action-item col-4">
+                                <a class="flex align-items-center flex-column text-color" pRipple>
+                                    <i class="pi pi-cog action pink-bgcolor white-color"></i>
+                                    <span>Settings</span>
+                                </a>
+                            </div>
+                            <div class="layout-topbar-action-item col-4">
+                                <a class="flex align-items-center flex-column text-color" pRipple>
+                                    <i class="pi pi-key action bluegrey-bgcolor white-color"></i>
+                                    <span>Credentials</span>
+                                </a>
+                            </div>
+                            <div class="layout-topbar-action-item col-4">
+                                <a class="flex align-items-center justify-content-center flex-column text-color" pRipple>
+                                    <i class="pi pi-sitemap action cyan-bgcolor white-color"></i>
+                                    <span>Sitemap</span>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </li> -->
+                <li class="layout-topbar-item">
+                    <a class="layout-topbar-action flex flex-row justify-content-center align-items-center px-2 rounded-circle" (click)="appMain.onTopbarItemClick($event, 'profile')" pRipple>
+                        <img src="assets/demo/images/avatar/amyelsner.png" alt="avatar" style="width: 32px; height: 32px;">
+                    </a>
+
+                    <ul class="layout-topbar-action-panel shadow-6" [@topbarActionPanelAnimation]="'visible'" *ngIf="appMain.activeTopbarItem === 'profile'">
+                        <li class="layout-topbar-action-item">
+                            <a class="flex flex-row align-items-center" pRipple>
+                                <i class="pi pi-power-off" [ngClass]="{'mr-2': !app.isRTL, 'ml-2': app.isRTL}"></i>
+                                <span>Logout</span>
+                            </a>
+                        </li>
+                    </ul>
+                </li>
+                <!-- <li class="layout-topbar-item">
+                    <a class="layout-topbar-action rounded-circle" (click)="appMain.onRightMenuButtonClick($event)" pRipple>
+                        <i class="pi fs-large" [ngClass]="{'pi-arrow-left': !app.isRTL, 'pi-arrow-right': app.isRTL}"></i>
+                    </a>
+                </li> -->
+            </ul>
+        </div>
+    </div>
+</div>

src/app/app.topbar.component.ts

@@ -0,0 +1,126 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { trigger, style, transition, animate, AnimationEvent } from '@angular/animations';
+import { MegaMenuItem } from 'primeng/api';
+import { AppComponent } from './app.component';
+import { AppMainComponent } from './app.main.component';
+@Component({
+    selector: 'app-topbar',
+    templateUrl: './app.topbar.component.html',
+    animations: [
+        trigger('topbarActionPanelAnimation', [
+            transition(':enter', [
+                style({opacity: 0, transform: 'scaleY(0.8)'}),
+                animate('.12s cubic-bezier(0, 0, 0.2, 1)', style({ opacity: 1, transform: '*' })),
+              ]),
+              transition(':leave', [
+                animate('.1s linear', style({ opacity: 0 }))
+              ])
+        ])
+    ]
+})
+export class AppTopBarComponent {
+
+    constructor(public appMain: AppMainComponent, public app: AppComponent) {
+    }
+
+    activeItem: number;
+
+    model: MegaMenuItem[] = [
+        {
+            label: 'UI KIT',
+            items: [
+                [
+                    {
+                        label: 'UI KIT 1',
+                        items: [
+                            { label: 'Form Layout', icon: 'pi pi-fw pi-id-card', routerLink: ['/uikit/formlayout'] },
+                            { label: 'Input', icon: 'pi pi-fw pi-check-square', routerLink: ['/uikit/input'] },
+                            { label: 'Float Label', icon: 'pi pi-fw pi-bookmark', routerLink: ['/uikit/floatlabel'] },
+                            { label: 'Button', icon: 'pi pi-fw pi-mobile', routerLink: ['/uikit/button'] },
+                            { label: 'File', icon: 'pi pi-fw pi-file', routerLink: ['/uikit/file'] }
+                        ]
+                    }
+                ],
+                [
+                    {
+                        label: 'UI KIT 2',
+                        items: [
+                            { label: 'Table', icon: 'pi pi-fw pi-table', routerLink: ['/uikit/table'] },
+                            { label: 'List', icon: 'pi pi-fw pi-list', routerLink: ['/uikit/list'] },
+                            { label: 'Tree', icon: 'pi pi-fw pi-share-alt', routerLink: ['/uikit/tree'] },
+                            { label: 'Panel', icon: 'pi pi-fw pi-tablet', routerLink: ['/uikit/panel'] },
+                            { label: 'Chart', icon: 'pi pi-fw pi-chart-bar', routerLink: ['/uikit/charts'] }
+                        ]
+                    }
+                ],
+                [
+                    {
+                        label: 'UI KIT 3',
+                        items: [
+                            { label: 'Overlay', icon: 'pi pi-fw pi-clone', routerLink: ['/uikit/overlay'] },
+                            { label: 'Media', icon: 'pi pi-fw pi-image', routerLink: ['/uikit/media'] },
+                            { label: 'Menu', icon: 'pi pi-fw pi-bars', routerLink: ['/uikit/menu'] },
+                            { label: 'Message', icon: 'pi pi-fw pi-comment', routerLink: ['/uikit/message'] },
+                            { label: 'Misc', icon: 'pi pi-fw pi-circle-off', routerLink: ['/uikit/misc'] }
+                        ]
+                    }
+                ]
+            ]
+        },
+        {
+            label: 'UTILITIES',
+            items: [
+                [
+                    {
+                        label: 'UTILITIES 1',
+                        items: [
+                            { label: 'Display', icon: 'pi pi-fw pi-desktop', routerLink: ['utilities/display'] },
+                            { label: 'Elevation', icon: 'pi pi-fw pi-external-link', routerLink: ['utilities/elevation'] }
+                        ]
+                    },
+                    {
+                        label: 'UTILITIES 2',
+                        items: [
+                            { label: 'FlexBox', icon: 'pi pi-fw pi-directions', routerLink: ['utilities/flexbox'] }
+                        ]
+                    }
+                ],
+                [
+                    {
+                        label: 'UTILITIES 3',
+                        items: [
+                            { label: 'Icons', icon: 'pi pi-fw pi-search', routerLink: ['utilities/icons'] }
+                        ]
+                    },
+                    {
+                        label: 'UTILITIES 4',
+                        items: [
+                            { label: 'Text', icon: 'pi pi-fw pi-pencil', routerLink: ['utilities/text'] },
+                            { label: 'Widgets', icon: 'pi pi-fw pi-star-o', routerLink: ['utilities/widgets'] }
+                        ]
+                    }
+                ],
+                [
+                    {
+                        label: 'UTILITIES 5',
+                        items: [
+                            { label: 'Grid System', icon: 'pi pi-fw pi-th-large', routerLink: ['utilities/grid'] },
+                            { label: 'Spacing', icon: 'pi pi-fw pi-arrow-right', routerLink: ['utilities/spacing'] },
+                            { label: 'Typography', icon: 'pi pi-fw pi-align-center', routerLink: ['utilities/typography'] }
+                        ]
+                    }
+                ],
+            ]
+        }
+    ];
+
+    @ViewChild('searchInput') searchInputViewChild: ElementRef;
+
+    onSearchAnimationEnd(event: AnimationEvent) {
+        switch(event.toState) {
+            case 'visible':
+                this.searchInputViewChild.nativeElement.focus();
+            break;
+        }
+    }
+}

src/app/pages/dashboard/dashboard.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { RouterModule, Routes } from '@angular/router';
+import { TreeModule } from 'primeng/tree';
+
+export const routes: Routes = [
+  {
+      path: 'dashboard',
+      component: DashboardComponent,
+      data: {roles: ['']},
+  }
+];
+
+@NgModule({
+  declarations: [
+    DashboardComponent
+  ],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes),
+    TreeModule
+  ]
+})
+export class DashboardModule { }

src/app/pages/dashboard/dashboard/dashboard.component.html

@@ -0,0 +1,79 @@
+<div class="grid">
+    <div class="col-12">
+        <div class="card docs">
+
+            <h5>Environnement</h5>
+            <p>Angular 12 et PrimeNG 12</p>
+            <p>Lien du template : <a
+                    href="https://www.primefaces.org/ultima-ng">https://www.primefaces.org/ultima-ng</a></p>
+            <p>Lien de la documentation <a
+                    href="https://primefaces.org/primeng/showcase/#/setup">https://primefaces.org/primeng/showcase/#/setup</a>
+            </p>
+            <p>Vous trouverer a la racine du projet le fichier .zip du template ultima. Vous pouvez vous appuyer dessus
+                pour la mise en page de vos components.</p>
+
+
+            <h5>Exercice</h5>
+            <p>L'objectif est de développer le module candidat.</p>
+            <h6>Liste des Components</h6>
+            <ul>
+                <li>Le component "CandidatListComponent" affichera la liste des candidats avec pagination. il sera
+                    possible de faire une recherche sur cette liste en incluant le component CandidateSearchComponent.
+                </li>
+                <li>Le component "CandidatSearchbarComponent" affichera un formulaire de recherche par prenom, nom,
+                    email. Ce component devra apparaitre sur la liste des candidats.</li>
+                <li>Le component "CandidatDetailComponent" affichera un formulaire de mise a jour du candidat.</li>
+                <li>Le component "CandidatSidebarComponent" affichera une fenetre sidebar qui permettra de creer un
+                    nouveau candidat ou mettre à jour rapidement le candidat selectionné.</li>
+            </ul>
+
+            <h6>Liste des services</h6>
+            <ul>
+                <li>Le service "candidate.service.ts" devra comporter les api de Search, getById et Delete</li>
+                <li>Le service "candidate-list.service.ts" sera utilisé dans le cadre du chargement des candidats. (Voir
+                    Recommandations)</li>
+            </ul>
+
+
+            <h5>Stories</h5>
+            <p>- Ajouter une nouvelle entrée "Candidats" au menu de gauche.</p>
+            <p>
+                En tant qu'utilisateur, je clique sur l'entrée "Candidats" du menu gauche principal.<br>
+                Une fois sur la liste des candidats, je peux faire une recherche en fonction du nom, prenom ou email du
+                candidat.<br>
+                La liste sera un tableau de 5 colonnes [Id, Prenom, Nom, Emails, Actions(edit,delete) ] avec une
+                pagination.
+                Sur cette liste ajouter un bouton "Add". En cliquant sur Add, j'affiche le component Sidebar qui permet de
+                créer un nouveau candidat.
+                Vous pouvez editer le candidat de deux facons :
+            </p>
+            <ul>
+                <li>Soit en cliquant sur le bouton edit en fin de chaque ligne. Cette action ouvrira l'écran de
+                    detail du candidat avec les données préchargées à mettre à jour./li>
+                <li>Soit en cliquant sur la ligne. Cela ouvrira l'ecran sidebar de modification d'un candidat.</li>
+            </ul>
+
+
+            <h5>Recommandations</h5>
+            <p>- Pour les formulaires, vous pouvez utliser soit les Template-Driven ou Reactive Forms</p>
+            <p>- Sur les components "candidate-list", "candidate-sidebar" et "candidate-searchbar", il faudra utiliser les "BehaviorSubject" et "Resolve".
+            <br>Voici quelque liens explicatifs:</p>
+            <ul>
+                <li><a href="https://bcodes.io/blog/post/route-resolvers-rxjs-behaviorsubject-with-combinelatest">Lien
+                        1</a></li>
+                <li><a
+                        href="https://www.istruction.nl/blog/2018/9/20/angular-observable-data-services-resolve-and-the-behaviorsubject">Lien
+                        2</a></li>
+            </ul>
+
+            <p>- Les fichiers de données seront stockés dans le repertoire: "assets/demo/data" au format JSON </p>
+
+            <div>
+                <h5>Organisation du projet</h5>
+                <p-tree [value]="files" layout="horizontal" selectionMode="single" [(selection)]="selectedFiles">
+                </p-tree>
+            </div>
+
+        </div>
+    </div>
+</div>

src/app/pages/dashboard/dashboard/dashboard.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+import { AppBreadcrumbService } from 'src/app/app.breadcrumb.service';
+import { NodeService } from 'src/app/shared/services/node.service';
+
+@Component({
+  selector: 'app-dashboard',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.scss']
+})
+export class DashboardComponent implements OnInit {
+
+  files: TreeNode[];
+  selectedFiles: TreeNode;
+
+  constructor(private breadcrumbService: AppBreadcrumbService, private nodeService: NodeService) {
+    this.breadcrumbService.setItems([
+      { label: 'Dashboard' }
+    ]);
+  }
+
+  ngOnInit(): void {
+    this.nodeService.getFiles().then(files => {
+      this.files = [{
+        label: 'src',
+        "expanded":true,
+        children: files
+      }];
+    });
+
+  }
+
+}

src/app/pages/pages.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { PagesRoutingModule } from './pages.routing.module';
+
+@NgModule({
+    declarations: [],
+    imports: [
+        PagesRoutingModule,
+    ],
+    providers: []
+})
+export class PagesModule {
+}

src/app/pages/pages.routing.module.ts

@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+
+export const pagesRouteList: Routes = [
+    {
+        path: 'dashboard',
+        loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
+    }
+    
+];
+
+@NgModule({
+    declarations: [],
+    imports: [
+        RouterModule.forChild(pagesRouteList)
+    ]
+})
+export class PagesRoutingModule {
+}

src/app/shared/models/candidate.ts

@@ -0,0 +1,7 @@
+export class Candidate {
+    id: string;
+    firstname: string;
+    lastname: string;
+    emails: [];
+}
+

src/app/shared/services/candidate.service.ts

@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CandidateService {
+
+  constructor() { }
+}

src/app/shared/services/node.service.ts

@@ -0,0 +1,19 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { TreeNode } from 'primeng/api';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NodeService {
+
+    constructor(private http: HttpClient) { }
+
+    getFiles() {
+    return this.http.get<any>('assets/demo/data/files.json')
+      .toPromise()
+      .then(res => res.data as TreeNode[]);
+    }
+
+}

src/appdemo.scss

@@ -0,0 +1,161 @@
+@import "assets/demo/flags/flags.css";
+
+.layout-topbar {
+    .notifications {
+        .layout-topbar-action-panel {
+            img {
+                width: 32px;
+                height: 32px;
+            }
+
+            .layout-topbar-action-item {
+                border-bottom: 1px solid var(--divider-color);
+
+                &:last-child {
+                    border-bottom: 0 none;
+                }
+            }
+        }
+    }
+
+    .app {
+        .layout-topbar-action-panel {
+            a {
+                padding: .5rem 0;
+
+                i {
+                    width: 42px;
+                    height: 42px;
+                    border: 1px solid transparent;
+                    border-radius: 50%;
+                    margin: .5rem 0;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+        }
+    }
+}
+
+.layout-rightmenu {
+    .header {
+        padding-bottom: .5rem;
+        margin-bottom: .714rem;
+        border-bottom: 1px solid var(--divider-color);
+    }
+
+    .online-members {
+        img {
+            width: 32px;
+        }
+
+        b {
+            color: var(--primary-color)
+        }
+    }
+
+    .latest-activity {
+        i {
+            border: 1px solid transparent;
+            border-radius: 50px;
+            background-color: var(--surface-d);
+        }
+    }
+
+    .next-events {
+        ul {
+            margin: 0;
+            list-style-type: none;
+            padding: 0;
+
+            > li {
+                padding: .875rem .5rem;
+            }
+        }
+    }
+}
+
+.layout-help-page {
+    .questions {
+        &.p-accordion p-accordiontab {
+            .p-accordion-tab {
+                margin-top: 1rem;
+            }
+
+            &:first-child {
+                .p-accordion-tab {
+                    margin-top: 0;
+                }
+            }
+        }
+    }
+}
+
+.layout-invoice-page {
+    .p-invoice-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
+        display: none;
+    }
+
+    @media screen and (max-width: 40rem) {
+        .p-invoice-datatable-responsive {
+            .p-datatable-thead > tr > th,
+            .p-datatable-tfoot > tr > td {
+                display: none !important;
+            }
+
+            .p-datatable-tbody > tr > td {
+                text-align: left;
+                display: block;
+                width: 100%;
+                float: left;
+                clear: left;
+                border: 0 none;
+
+                .p-column-title {
+                    padding: .4rem;
+                    min-width: 30%;
+                    display: inline-block;
+                    margin: -.4em 1em -.4em -.4rem;
+                    font-weight: bold;
+                }
+
+                &:last-child {
+                    border-bottom: 1px solid var(--surface-d);
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: 992px) {
+    .layout-menu-slim {
+        .layout-inline-menu {
+            .layout-inline-menu-action {
+                justify-content: center;
+
+                > span,
+                > i {
+                    display: none !important;
+                }
+            }
+
+            .layout-inline-menu-action-panel {
+                .layout-inline-menu-action-item {
+                    > a {
+                        justify-content: center;
+
+                        > i {
+                            font-size: 1.5rem;
+                            margin-right: 0 !important;
+                        }
+
+                        > span {
+                            display: none;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/assets/demo/data/candidates.json

@@ -0,0 +1,28 @@
+{
+	"data": [
+		{
+			"id": "1",
+			"firstName": "Tom",
+			"lastName": "Hanks",
+			"emails": [
+				{"email":"tom.hanks@natan.fr", "type":"profesionnal"},
+				{"email":"tom.hanks@gmail.com", "type":"personal"}
+			] 
+		},
+		{
+			"id": "2",
+			"firstName": "Denis",
+			"lastName": "Dupond",
+			"emails": [
+				{"email":"denis.dupond@natan.fr", "type":"profesionnal"},
+				{"email":"denis.dupond@gmail.com", "type":"personal"}
+			] 
+		},
+		{
+			"id": "3",
+			"firstName": "Gerard",
+			"lastName": "Jackson",
+			"emails": []
+		}
+	]
+}

src/assets/demo/data/files.json

@@ -0,0 +1,89 @@
+{
+    "data": [
+        {
+            "key": "0",
+            "label": "app",
+            "data": "App Folder",
+            "expanded":true,
+            "children": [
+                {
+                    "key": "0-0",
+                    "label": "pages",
+                    "data": "Pages Folder",
+                    "expanded":true,
+                    "children": [
+                        {
+                            "key": "0-0-0",
+                            "label": "candidate",
+                            "data": "Candidate Folder",
+                            "expanded":true,
+                            "children": [
+                                {"key": "0-0-0-0", "label": "candidate-list",  "data": "Candidate list Folder", "expanded":true, "children": [{"key": "0-0-0-0", "label": "candidate-list.service.ts"}]},
+                                {"key": "0-0-0-1", "label": "candidate-detail",  "data": "Candidate detail Folder","expanded":true, "children": []},
+                                {"key": "0-0-0-2", "label": "candidate-sidebar",  "data": "Candidate sidebar Folder","expanded":true, "children": []},
+                                {"key": "0-0-0-3", "label": "candidate-searchbar",  "data": "Candidate searchbar Folder","expanded":true, "children": []},
+                                {"key": "0-0-0-4", "label": "candidate.module.ts"}
+                            ]
+                        }
+                    ]
+                },
+                {
+                    "key": "0-1",
+                    "label": "shared",
+                    "data": "Shared Folder",
+                    "expanded":true,
+                    "children": [
+                        {
+                            "key": "0-1-0",
+                            "label": "models",
+                            "data": "Models Folder",
+                            "expanded":true,
+                            "children": [
+                                {"key": "0-1-0-0", "label": "candidate.ts"}
+                            ]
+                        },
+                        {
+                            "key": "0-2-0",
+                            "label": "services",
+                            "data": "Services Folder",
+                            "expanded":true,
+                            "children": [
+                                {"key": "0-2-0-0", "label": "candidate-service.ts"},
+                                {"key": "0-2-0-1", "label": "node.service.ts"}
+                            ]
+                        }
+                    ]
+                },
+                {
+                    "key": "0-1",
+                    "label": "app.menu.component.ts"
+                }
+            ]
+        },
+        {
+            "key": "1",
+            "label": "assets",
+            "data": "Assets Folder",
+            "expanded":true,
+            "children": [
+                {
+                    "key": "1-0",
+                    "label": "demo",
+                    "data": "Demo Folder",
+                    "expanded":true,
+                    "children": [
+                        {
+                            "key": "1-0-0",
+                            "label": "data",
+                            "data": "Data Folder",
+                            "expanded":true,
+                            "children": [
+                                {"key": "1-0-0-0", "label": "candidates.json"}
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}