first commit

src/app/_layout/header/full-layout-navbar/full-layout-navbar.component.css

@@ -0,0 +1,11 @@
+@media (min-width: 767.98px) {
+    .collapse:not(.show) {
+        display: flex !important;
+    }
+}
+
+@media (min-width: 767.98px) {
+    .justify-content-end {
+        display: flex !important;
+    }
+}

src/app/_layout/header/full-layout-navbar/full-layout-navbar.component.html

@@ -0,0 +1,28 @@
+<nav
+  class="header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-dark navbar-shadow">
+  <div class="navbar-wrapper">
+    <div class="navbar-header">
+      <ul class="nav navbar-nav flex-row">
+        <li class="nav-item mobile-menu d-md-none mr-auto"><a class="nav-link nav-menu-main menu-toggle hidden-xs"
+            [routerLink]="">
+          <i class="feather ft-menu font-large-1"></i></a></li>
+        <li class="nav-item"><a class="navbar-brand" [routerLink]="['/dashboard/sales']"><img class="brand-logo"
+              alt="modern admin logo" src="../../../../assets/images/logo/logo.png">
+            <h3 class="brand-text">Modern </h3>
+          </a></li>
+        <li class="nav-item d-md-none"><a class="nav-link open-navbar-container" data-toggle="collapse"
+            data-target="#navbar-mobile" (click)="toggleNavbar($event)"><i class="la la-ellipsis-v"></i></a></li>
+      </ul>
+    </div>
+    <div class="navbar-container">
+      <div class="collapse navbar-collapse justify-content-end" id="navbar-mobile">
+        <ul class="nav navbar-nav">
+          <li class="nav-item"><a class="nav-link mr-2 nav-link-label" [routerLink]="['/dashboard/sales']"><i
+                class="ficon feather ft-arrow-left"></i></a></li>
+          <li class="dropdown nav-item"><a class="nav-link mr-2 nav-link-label" [routerLink]=""
+              data-toggle="dropdown"><i class="ficon feather ft-settings"></i></a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</nav>

src/app/_layout/header/full-layout-navbar/full-layout-navbar.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { FullLayoutNavbarComponent } from './full-layout-navbar.component';
+
+describe('FullLayoutNavbarComponent', () => {
+  let component: FullLayoutNavbarComponent;
+  let fixture: ComponentFixture<FullLayoutNavbarComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FullLayoutNavbarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FullLayoutNavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_layout/header/full-layout-navbar/full-layout-navbar.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+@Component({
+  selector: 'app-full-layout-navbar',
+  templateUrl: './full-layout-navbar.component.html',
+  styleUrls: ['./full-layout-navbar.component.css']
+})
+export class FullLayoutNavbarComponent {
+
+  constructor(
+    @Inject(DOCUMENT) private document: Document) { }
+
+  toggleNavbar(e) {
+    const navbar = this.document.getElementById('navbar-mobile');
+    if (navbar.classList.contains('show')) {
+      navbar.classList.remove('show');
+    } else {
+      navbar.classList.add('show');
+    }
+  }
+  
+}

src/app/_layout/header/header.component.html

@@ -0,0 +1,7 @@
+<ng-container *ngIf="layout === 'vertical'">
+  <app-header-vertical></app-header-vertical>
+</ng-container>
+
+<ng-container *ngIf="layout === 'horizontal'" (window:resize)="onResize($event)">
+  <app-header-horizontal></app-header-horizontal>
+</ng-container>

src/app/_layout/header/header.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_layout/header/header.component.ts

@@ -0,0 +1,125 @@
+import { Component, OnInit, Renderer2, AfterViewInit, HostListener, Inject } from '@angular/core';
+import { takeUntil } from 'rxjs/operators';
+
+import { ThemeSettingsService } from '../settings/theme-settings.service';
+import { Subject } from 'rxjs';
+import { AppConstants } from '../../_helpers/app.constants';
+import { DeviceDetectorService } from '../../_services/device-detector.service';
+import { DOCUMENT } from '@angular/common';
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css']
+})
+export class HeaderComponent implements OnInit, AfterViewInit {
+
+  layout: string;
+  private _themeSettingsConfig: any;
+  private _unsubscribeAll: Subject<any>;
+  private isMobile = false;
+  public selectedColorClass = '';
+
+  constructor(private _renderer: Renderer2,
+    @Inject(DOCUMENT) private document: Document,
+    private _themeSettingsService: ThemeSettingsService,
+    private deviceService: DeviceDetectorService) {
+    this._unsubscribeAll = new Subject();
+  }
+
+  ngOnInit() {
+    const self = this;
+
+    // Subscribe to config changes
+    this._themeSettingsService.config
+      .pipe(takeUntil(this._unsubscribeAll))
+      .subscribe((config) => {
+        this._themeSettingsConfig = config;
+        if (config.layout && config.layout.style &&
+          config.layout.style === 'vertical') {
+          self.layout = 'vertical';
+        } else {
+          self.layout = 'horizontal';
+        }
+        this.refreshView();
+      });
+  }
+
+  refreshView() {
+    const self = this;
+
+    const headerElement = document.getElementsByClassName('header-navbar');
+    if (headerElement.item(0)) {
+      let currentHeaderClassList = [];
+      const navbar = this.document.getElementById('navbar-mobile');
+      // Layout
+      if (self._themeSettingsConfig.layout.style === 'horizontal') {
+        currentHeaderClassList = ['header-navbar', 'navbar-expand-md', 'navbar', 'navbar-with-menu',
+         'navbar-without-dd-arrow', 'navbar-static-top'];
+         const topHeaderElement = document.getElementById('top-header');
+        if (window.innerWidth < AppConstants.MOBILE_RESPONSIVE_WIDTH_HORIZONTAL) {
+          currentHeaderClassList.push('fixed-top');
+          this._renderer.removeClass(topHeaderElement, 'navbar-brand-center');
+          navbar.classList.remove('show');
+        } else {
+            currentHeaderClassList.push('navbar-brand-center');
+            this._renderer.removeClass(topHeaderElement, 'fixed-top');
+            navbar.classList.add('show');
+        }
+      } else {
+        currentHeaderClassList = ['header-navbar', 'navbar-expand-md', 'navbar', 'navbar-with-menu', 'navbar-without-dd-arrow', 'fixed-top',
+          'navbar-shadow'];
+
+        if (self._themeSettingsConfig.colorTheme === 'semi-light' && self._themeSettingsConfig.layout.style === 'vertical') {
+          if (self._themeSettingsConfig.layout.style === 'vertical') {
+            // currentHeaderClassList.push('bg-info');
+          }
+          self._renderer.addClass(headerElement.item(0), 'navbar-semi-light');
+          self._renderer.removeClass(headerElement.item(0), 'navbar-dark');
+          self._renderer.removeClass(headerElement.item(0), 'navbar-semi-dark');
+          self._renderer.removeClass(headerElement.item(0), 'navbar-light');
+        } else if (self._themeSettingsConfig.colorTheme === 'semi-dark' && self._themeSettingsConfig.layout.style === 'vertical') {
+          self._renderer.addClass(headerElement.item(0), 'navbar-semi-dark');
+          self._renderer.removeClass(headerElement.item(0), 'navbar-semi-light');
+          self._renderer.removeClass(headerElement.item(0), 'navbar-light');
+          self._renderer.removeClass(headerElement.item(0), 'navbar-dark');
+          // self._renderer.removeClass(headerElement.item(0), 'bg-info');
+        } else if (self._themeSettingsConfig.colorTheme === 'dark' && self._themeSettingsConfig.layout.style === 'vertical') {
+          self._renderer.addClass(headerElement.item(0), 'navbar-dark');
+          self._renderer.removeClass(headerElement.item(0), 'navbar-semi-light');
+          self._renderer.removeClass(headerElement.item(0), 'navbar-light');
+          self._renderer.removeClass(headerElement.item(0), 'navbar-semi-dark');
+          // self._renderer.removeClass(headerElement.item(0), 'bg-info');
+        } else if (self._themeSettingsConfig.colorTheme === 'light' && self._themeSettingsConfig.layout.style === 'vertical') {
+          self._renderer.addClass(headerElement.item(0), 'navbar-light');
+          self._renderer.removeClass(headerElement.item(0), 'navbar-semi-light');
+          self._renderer.removeClass(headerElement.item(0), 'navbar-semi-dark');
+          self._renderer.removeClass(headerElement.item(0), 'navbar-dark');
+          // self._renderer.removeClass(headerElement.item(0), 'bg-info');
+        }
+      }
+
+
+
+      currentHeaderClassList.forEach(function (c) {
+        self._renderer.addClass(headerElement.item(0), c);
+      });
+
+
+    }
+  }
+
+  ngAfterViewInit() {
+    this.refreshView();
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    if (event.target.innerWidth < AppConstants.MOBILE_RESPONSIVE_WIDTH) {
+      this.isMobile = true;
+    } else {
+      this.isMobile = false;
+    }
+    this.refreshView();
+  }
+
+}

src/app/_layout/header/horizontal/horizontal.component.css

@@ -0,0 +1,12 @@
+@media (max-width: 767.98px) {
+    .header-navbar .navbar-header {
+        width: 100% !important;
+        top: 3px;
+    }
+}
+
+.dropdown-menu-right {
+  right: 0;
+  left: auto !important;
+  top: auto !important;
+}

src/app/_layout/header/horizontal/horizontal.component.html

@@ -0,0 +1,215 @@
+<!-- fixed-top-->
+<nav
+  class="top-header header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow navbar-static-top navbar-light navbar-brand-center"
+  id="top-header" [ngClass]="selectedHeaderNavBarClass">
+  <div class="navbar-wrapper">
+    <div id="navbar-header" class="navbar-header">
+      <ul class="nav navbar-nav flex-row">
+        <li class="nav-item mobile-menu d-md-none mr-auto" ><a
+            class="nav-link nav-menu-main menu-toggle hidden-xs11" (click)="toggleNavigation($event)"><i
+              class="feather ft-menu font-large-1" ></i></a></li>
+        <li class="nav-item"><a [routerLink]="['/dashboard/sales']" class="navbar-brand"><img class="brand-logo" alt="modern admin logo"
+              src="../../../../assets/images/logo/logo.png">
+            <h3 class="brand-text">{{_themeSettingsConfig.brand.brand_name}}</h3>
+          </a></li>
+
+        <li class="nav-item d-md-none"><a class="nav-link open-navbar-container" data-toggle="collapse"
+            data-target="#navbar-mobile" (click)="toggleNavbar($event)"><i class="la la-ellipsis-v"></i></a></li>
+      </ul>
+    </div>
+    <div class="navbar-container content">
+      <div class="collapse navbar-collapse show" id="navbar-mobile">
+        <ul class="nav navbar-nav mr-auto float-left">
+          <li class="nav-item d-none d-md-block"><a [routerLink]="" class="nav-link nav-menu-main menu-toggle hidden-xs"
+              (click)="toggleFixMenu($event)" ><i class="feather ft-menu"></i></a></li>
+          <li class="nav-item d-none d-md-block"><a [routerLink]="" class="nav-link nav-link-expand"
+              (click)="toggleFullScreen()" *ngIf ="maximize === 'on'"><i class="ficon feather ft-maximize"></i></a></li>
+          <li class="nav-item nav-search"><a [routerLink]="" class="nav-link nav-link-search" (click)="clickSearch()" *ngIf ="search === 'on'"><i
+                class="ficon feather ft-search"></i></a>
+            <div class="search-input" [ngClass]="{'open': isHeaderSearchOpen}">
+              <input class="input" type="text" placeholder="Explore Modern...">
+            </div>
+          </li>
+        </ul>
+        <ul class="nav navbar-nav float-right" >
+          <li class="dropdown-language nav-item" ngbDropdown *ngIf ="internationalization === 'on'">
+            <a [routerLink]="" class="dropdown-toggle nav-link" ngbDropdownToggle id="dropdown-flag">
+              <i class="flag-icon flag-icon-gb"></i><span class="selected-language"></span>
+            </a>
+            <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownLangMenu">
+              <a [routerLink]="" class="dropdown-item">
+                <i class="flag-icon flag-icon-gb"></i> English
+              </a>
+              <a [routerLink]="" class="dropdown-item">
+                <i class="flag-icon flag-icon-fr"></i> French
+              </a>
+              <a [routerLink]="" class="dropdown-item">
+                <i class="flag-icon flag-icon-cn"></i> Chinese
+              </a>
+              <a [routerLink]="" class="dropdown-item">
+                <i class="flag-icon flag-icon-de"></i> German
+              </a>
+            </div>
+          </li>
+          <li class="dropdown-notification nav-item dropdown" ngbDropdown *ngIf ="notification === 'on'">
+            <a class="nav-link nav-link-label" ngbDropdownToggle>
+              <i class="ficon feather ft-bell"></i>
+              <span class="badge badge-pill badge-danger badge-up badge-glow">5</span>
+            </a>
+            <ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu>
+              <li class="dropdown-menu-header">
+                <h6 class="dropdown-header m-0"><span class="grey darken-2">Notifications</span></h6><span
+                  class="notification-tag badge badge-default badge-danger float-right m-0">5 New</span>
+              </li>
+              <li class="scrollable-container media-list w-100 ps-container ps-theme-dark ps-active-y" fxFlex="auto"
+                [perfectScrollbar]="config">
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left align-self-center"><i class="feather ft-plus-square icon-bg-circle bg-cyan"></i>
+                    </div>
+                    <div class="media-body">
+                      <h6 class="media-heading">You have new order!</h6>
+                      <p class="notification-text font-small-3 text-muted">Lorem ipsum dolor sit amet, consectetuer
+                        elit.</p><small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">30 minutes
+                          ago</time></small>
+                    </div>
+                  </div>
+                </a>
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left align-self-center"><i
+                        class="feather ft-download-cloud icon-bg-circle bg-red bg-darken-1"></i></div>
+                    <div class="media-body">
+                      <h6 class="media-heading red darken-1">99% Server load</h6>
+                      <p class="notification-text font-small-3 text-muted">Aliquam tincidunt mauris eu risus.</p><small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Five hour
+                          ago</time></small>
+                    </div>
+                  </div>
+                </a>
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left align-self-center"><i
+                        class="feather ft-alert-triangle icon-bg-circle bg-yellow bg-darken-3"></i></div>
+                    <div class="media-body">
+                      <h6 class="media-heading yellow darken-3">Warning notifixation</h6>
+                      <p class="notification-text font-small-3 text-muted">Vestibulum auctor dapibus neque.</p><small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Today</time></small>
+                    </div>
+                  </div>
+                </a>
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left align-self-center"><i class="feather ft-check-circle icon-bg-circle bg-cyan"></i>
+                    </div>
+                    <div class="media-body">
+                      <h6 class="media-heading">Complete the task</h6><small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Last
+                          week</time></small>
+                    </div>
+                  </div>
+                </a>
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left align-self-center"><i class="feather ft-file icon-bg-circle bg-teal"></i></div>
+                    <div class="media-body">
+                      <h6 class="media-heading">Generate monthly report</h6><small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Last
+                          month</time></small>
+                    </div>
+                  </div>
+                </a>
+              </li>
+              <li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
+                  href="javascript:void(0)">Read all notifications</a></li>
+            </ul>
+          </li>
+          <li class="dropdown-notification nav-item" ngbDropdown *ngIf ="email === 'on'">
+            <a class="nav-link nav-link-label" ngbDropdownToggle><i class="ficon feather ft-mail"></i></a>
+            <ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu>
+              <li class="dropdown-menu-header">
+                <h6 class="dropdown-header m-0"><span class="grey darken-2">Messages</span></h6><span
+                  class="notification-tag badge badge-default badge-warning float-right m-0">4 New</span>
+              </li>
+              <li class="scrollable-container media-list w-100 ps-container ps-theme-dark ps-active-y" fxFlex="auto"
+                [perfectScrollbar]="config">
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left"><span class="avatar avatar-sm avatar-online rounded-circle"><img
+                          src="../../../../assets/images/portrait/small/avatar-s-19.png" alt="avatar"><i></i></span></div>
+                    <div class="media-body">
+                      <h6 class="media-heading">Margaret Govan</h6>
+                      <p class="notification-text font-small-3 text-muted">I like your portfolio, let's start.</p>
+                      <small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Today</time></small>
+                    </div>
+                  </div>
+                </a>
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left"><span class="avatar avatar-sm avatar-busy rounded-circle"><img
+                          src="../../../../assets/images/portrait/small/avatar-s-2.png" alt="avatar"><i></i></span></div>
+                    <div class="media-body">
+                      <h6 class="media-heading">Bret Lezama</h6>
+                      <p class="notification-text font-small-3 text-muted">I have seen your work, there is</p><small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Tuesday</time></small>
+                    </div>
+                  </div>
+                </a>
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left"><span class="avatar avatar-sm avatar-online rounded-circle"><img
+                          src="../../../../assets/images/portrait/small/avatar-s-3.png" alt="avatar"><i></i></span></div>
+                    <div class="media-body">
+                      <h6 class="media-heading">Carie Berra</h6>
+                      <p class="notification-text font-small-3 text-muted">Can we have call in this week ?</p><small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Friday</time></small>
+                    </div>
+                  </div>
+                </a>
+                <a href="javascript:void(0)">
+                  <div class="media border_bottom">
+                    <div class="media-left"><span class="avatar avatar-sm avatar-away rounded-circle"><img
+                          src="../../../../assets/images/portrait/small/avatar-s-6.png" alt="avatar"><i></i></span></div>
+                    <div class="media-body">
+                      <h6 class="media-heading">Eric Alsobrook</h6>
+                      <p class="notification-text font-small-3 text-muted">We have project party this saturday.</p>
+                      <small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">last
+                          month</time></small>
+                    </div>
+                  </div>
+                </a>
+              </li>
+              <li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
+                  href="javascript:void(0)">Read all messages</a></li>
+            </ul>
+          </li>
+
+          <li class="dropdown-user nav-item" ngbDropdown>
+            <a class="nav-link dropdown-user-link" ngbDropdownToggle>
+              <span *ngIf="currentUser.displayName"
+                class="mr-1 user-name text-bold-700">{{currentUser.displayName}}</span>
+              <span *ngIf="!currentUser.displayName" class="mr-1 user-name text-bold-700">John Doe</span>
+              <span class="avatar avatar-online">
+                <img *ngIf="currentUser.photoURL" src="{{currentUser.photoURL}}" alt="avatar">
+                <img *ngIf="!currentUser.photoURL" src="../../../../assets/images/portrait/small/avatar-s-19.png"
+                  alt="avatar">
+                <i></i>
+              </span>
+            </a>
+            <div ngbDropdownMenu class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownProfileMenu">
+              <a class="dropdown-item" [routerLink]="['/user/user-profile']"><i class="feather ft-user"></i> Edit Profile </a>
+              <a class="dropdown-item" [routerLink]="['/email']"><i class="feather ft-mail"></i> My Inbox </a>
+              <a class="dropdown-item" [routerLink]="['/todos']"><i class="feather ft-check-square"></i> Task </a>
+              <a class="dropdown-item" [routerLink]="['/chats']"><i class="feather ft-message-square"></i> Chats </a>
+              <div class="dropdown-divider"></div>
+              <a class="dropdown-item" [routerLink]="" (click)="logout()"><i class="feather ft-power"></i> Logout</a>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</nav>

src/app/_layout/header/horizontal/horizontal.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { HorizontalComponent } from './horizontal.component';
+
+describe('HorizontalComponent', () => {
+  let component: HorizontalComponent;
+  let fixture: ComponentFixture<HorizontalComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HorizontalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HorizontalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_layout/header/horizontal/horizontal.component.ts

@@ -0,0 +1,280 @@
+import { Component, OnInit, Inject, Renderer2, HostListener, AfterViewInit, ViewChild } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { NavbarService } from '../../../_services/navbar.service';
+import { ThemeSettingsService } from '../../settings/theme-settings.service';
+import { MenuSettingsService } from '../../settings/menu-settings.service';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { AppConstants } from 'src/app/_helpers/app.constants';
+import { AuthService } from 'src/app/_services/auth.service';
+import { Router } from '@angular/router';
+import { DeviceDetectorService } from '../../../_services/device-detector.service';
+import { PerfectScrollbarConfigInterface, PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+
+const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
+  mozRequestFullScreen(): Promise<void>;
+  webkitRequestFullscreen(): Promise<void>;
+  msRequestFullscreen(): Promise<void>;
+};
+
+const docWithBrowsersExitFunctions = document as Document & {
+  mozCancelFullScreen(): Promise<void>;
+  webkitExitFullscreen(): Promise<void>;
+  msExitFullscreen(): Promise<void>;
+};
+@Component({
+  selector: 'app-header-horizontal',
+  templateUrl: './horizontal.component.html',
+  styleUrls: ['./horizontal.component.css']
+})
+export class HorizontalComponent implements OnInit, AfterViewInit {
+
+  insideTm: any;
+  outsideTm: any;
+  private _unsubscribeAll: Subject<any>;
+  brandName: string;
+  brandLogo: string;
+  public currentUser: any;
+  public _themeSettingsConfig: any;
+  private _menuSettingsConfig: any;
+  public displayName: boolean;
+  public isHeaderSearchOpen: any;
+  public maximize: any;
+  public search: any;
+  public internationalization: any;
+  public notification: any;
+  public email: any;
+  // public collapseOne = false;
+  // public collapseTwo = false;
+  // public collapseThree = false;
+  public selectedHeaderNavBarClass: string;
+  public selectedNavBarHeaderClass: string;
+  placement = 'bottom-right';
+
+  public config: PerfectScrollbarConfigInterface = { wheelPropagation: false };
+  @ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
+  @ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
+
+  constructor(
+    @Inject(DOCUMENT) private document: Document,
+    private _renderer: Renderer2,
+    private renderer: Renderer2,
+    private navbarService: NavbarService,
+    public authService: AuthService,
+    private router: Router,
+    private _menuSettingsService: MenuSettingsService,
+    private _themeSettingsService: ThemeSettingsService,
+    private deviceService: DeviceDetectorService
+  ) {
+    this._unsubscribeAll = new Subject();
+  }
+
+  ngOnInit() {
+    const _self = this;
+    if (localStorage.getItem('currentUser')) {
+      this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
+    }
+    // Subscribe to config changes
+    this._themeSettingsService.config
+      .pipe(takeUntil(this._unsubscribeAll))
+      .subscribe((config) => {
+        this._themeSettingsConfig = config;
+        this.refreshView();
+      });
+    this._menuSettingsService.config
+      .pipe(takeUntil(this._unsubscribeAll))
+      .subscribe((config) => {
+        this._menuSettingsConfig = config;
+      });
+    const isMobile = this.deviceService.isMobile();
+    this.handleBody(isMobile);
+    this.maximize = this._themeSettingsConfig.headerIcons.maximize;
+    this.search = this._themeSettingsConfig.headerIcons.search;
+    this.internationalization = this._themeSettingsConfig.headerIcons.internationalization;
+    this.notification = this._themeSettingsConfig.headerIcons.notification;
+    this.email = this._themeSettingsConfig.headerIcons.email;
+   }
+
+  ngAfterViewInit(): void {
+    this.refreshView();
+  }
+
+  handleBody(isMobile: boolean) {
+    const _self = this;
+    let currentBodyClassList = [];
+
+    if (window.innerWidth < AppConstants.MOBILE_RESPONSIVE_WIDTH_HORIZONTAL && this._themeSettingsConfig.layout.style === 'horizontal') {
+      currentBodyClassList = ['horizontal-layout', '2-columns', 'vertical-overlay-menu', 'menu-hide'];
+      currentBodyClassList.push('fixed-navbar');
+    }
+    currentBodyClassList.forEach(function (c) {
+      _self.renderer.addClass(document.body, c);
+    });
+  }
+
+  logout() {
+    if (localStorage.getItem('currentUser')) {
+      this.authService.doLogout().then(res => {
+        this.router.navigate(['/login']);
+      }, err => {
+        console.log(err);
+      });
+    }
+  }
+
+  refreshView() {
+    const topHeaderElement = document.getElementsByClassName('top-header');
+    const menuColorElement = document.getElementsByClassName('menu-header');
+    const navigationElement = document.getElementsByClassName('menu-header');
+    if (topHeaderElement) {
+      if (this._themeSettingsConfig.colorTheme === 'light') {
+        this._renderer.removeClass(topHeaderElement.item(0), 'navbar-dark');
+        this._renderer.addClass(topHeaderElement.item(0), 'navbar-light');
+      } else if (this._themeSettingsConfig.colorTheme === 'dark') {
+        this._renderer.addClass(topHeaderElement.item(0), 'navbar-dark');
+        this._renderer.removeClass(topHeaderElement.item(0), 'navbar-light');
+      }
+    }
+    if (this._themeSettingsConfig.layout.style === 'horizontal') {
+      this.selectedHeaderNavBarClass = this._themeSettingsConfig.color;
+    } else if (this._themeSettingsConfig.layout.style === 'horizontal') {
+      this.selectedHeaderNavBarClass = this._themeSettingsConfig.color;
+    }
+    if (navigationElement) {
+      if (this._themeSettingsConfig.navigation === 'navbar-icon-right') {
+        this._renderer.addClass(navigationElement.item(0), 'navbar-icon-right');
+      }
+    }
+    if (menuColorElement) {
+      if (this._themeSettingsConfig.menuColor === 'navbar-dark') {
+        this._renderer.removeClass(menuColorElement.item(0), 'navbar-light');
+        this._renderer.addClass(menuColorElement.item(0), 'navbar-dark');
+      } else if (this._themeSettingsConfig.menuColor === 'navbar-light') {
+        this._renderer.removeClass(menuColorElement.item(0), 'navbar-dark');
+        this._renderer.addClass(menuColorElement.item(0), 'navbar-light');
+      }
+    }
+  }
+
+  toggleFixMenu(e) {
+    if (this.document.body.classList.contains('menu-expanded')) {
+      // show the left aside menu
+      this.document.body.classList.remove('menu-expanded');
+      this.document.body.classList.add('menu-collapsed');
+    } else {
+      this.document.body.classList.remove('menu-collapsed');
+      this.document.body.classList.add('menu-expanded');
+    }
+  }
+  toggleNavbar(e) {
+    const navbar = this.document.getElementById('navbar-mobile');
+    if (navbar.classList.contains('show')) {
+      navbar.classList.remove('show');
+    } else {
+      navbar.classList.add('show');
+    }
+  }
+  toggleNavigation(e) {
+    const sidenav = document.getElementById('sidenav-overlay');
+    const sidebarLeft = document.getElementById('sidebar-left') || document.getElementById('email-app-menu') ||
+    document.getElementById('sidebar-todo');
+    const contentOverlay = document.getElementById('content-overlay');
+    const navbar = this.document.getElementById('navbar-mobile');
+
+    if (this.document.body.classList.contains('menu-hide')) {
+      this.document.body.classList.remove('menu-hide');
+      this._renderer.removeClass(sidenav, 'd-none');
+      this._renderer.addClass(sidenav, 'd-block');
+      this.document.body.classList.remove('menu-close');
+      this.document.body.classList.add('menu-open');
+      this.document.body.classList.add('menu-expanded');
+      navbar.classList.remove('show');
+    } else if (!this.document.body.classList.contains('menu-hide') && !this.document.body.classList.contains('menu-open') ) {
+      this.document.body.classList.add('menu-open');
+      this._renderer.addClass(sidenav, 'd-block');
+      this._renderer.removeClass(sidenav, 'd-none');
+    } else {
+      this._renderer.removeClass(sidenav, 'd-block');
+      this.document.body.classList.remove('menu-open');
+      this.document.body.classList.add('menu-hide');
+      this._renderer.addClass(sidenav, 'd-none');
+      navbar.classList.remove('show');
+    }
+
+    if (sidebarLeft) {
+      this._renderer.removeClass(sidebarLeft, 'show');
+      this._renderer.removeClass(contentOverlay, 'show');
+    }
+  }
+
+  toggleFullScreen() {
+    const toggleIcon = document.getElementsByClassName('ficon');
+
+    if (toggleIcon.item(0).classList.contains('ft-maximize')) {
+      this.openfullscreen();
+      this._renderer.removeClass(toggleIcon.item(0), 'ft-maximize');
+      this._renderer.addClass(toggleIcon.item(0), 'ft-minimize');
+    } else if (toggleIcon.item(0).classList.contains('ft-minimize')) {
+      this.closefullscreen();
+      this._renderer.addClass(toggleIcon.item(0), 'ft-maximize');
+      this._renderer.removeClass(toggleIcon.item(0), 'ft-minimize');
+    }
+  }
+
+  openfullscreen() {
+    // Trigger fullscreen
+    // eslint-disable-next-line no-shadow,@typescript-eslint/no-shadow
+    const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
+      mozRequestFullScreen(): Promise<void>;
+      webkitRequestFullscreen(): Promise<void>;
+      msRequestFullscreen(): Promise<void>;
+    };
+
+    if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
+      docElmWithBrowsersFullScreenFunctions.requestFullscreen();
+    } else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
+      docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
+    } else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+      docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
+    } else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
+      docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
+    }
+  }
+
+  closefullscreen() {
+    // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
+    const docWithBrowsersExitFunctions = document as Document & {
+      mozCancelFullScreen(): Promise<void>;
+      webkitExitFullscreen(): Promise<void>;
+      msExitFullscreen(): Promise<void>;
+    };
+    if (docWithBrowsersExitFunctions.exitFullscreen) {
+      docWithBrowsersExitFunctions.exitFullscreen();
+    } else if (docWithBrowsersExitFunctions.mozCancelFullScreen) { /* Firefox */
+      docWithBrowsersExitFunctions.mozCancelFullScreen();
+    } else if (docWithBrowsersExitFunctions.webkitExitFullscreen) { /* Chrome, Safari and Opera */
+      docWithBrowsersExitFunctions.webkitExitFullscreen();
+    } else if (docWithBrowsersExitFunctions.msExitFullscreen) { /* IE/Edge */
+      docWithBrowsersExitFunctions.msExitFullscreen();
+    }
+
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    const sidenav = document.getElementById('sidenav-overlay');
+    if (event.target.innerWidth <= 767) {
+      this.document.body.classList.add('vertical-overlay-menu');
+      this._renderer.removeClass(sidenav, 'd-block');
+      this._renderer.addClass(sidenav, 'd-none');
+    }
+  }
+
+  public clickSearch() {
+    if (this.isHeaderSearchOpen) {
+      this.isHeaderSearchOpen = false;
+    } else {
+      this.isHeaderSearchOpen = true;
+    }
+  }
+}

src/app/_layout/header/vertical/vertical.component.css

@@ -0,0 +1,35 @@
+.dropdown-menu-right {
+    right: 0;
+    left: auto !important;
+    top: auto !important;
+}
+
+.header-navbar .navbar-container ul.nav li a.dropdown-user-link .user-name {
+    margin-left: 0rem !important;
+}
+
+.border_bottom {
+    border-bottom: none !important;
+}
+
+:host ::ng-deep .dropdown-item:active {
+    color: #fff !important;
+}
+
+@media only screen and (max-width: 991.98px) {
+  .ft-toggle-right {
+    display: none !important;
+  }
+
+  .ft-toggle-left {
+        display: none !important;
+  }
+
+  .collapse:not(.show) {
+    display: unset !important;
+  }
+}
+
+.header-navbar .navbar-header .navbar-brand .brand-text {
+  padding-left: 11px !important;
+}

src/app/_layout/header/vertical/vertical.component.html

@@ -0,0 +1,226 @@
+<nav class="header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-shadow"
+  [ngClass]="selectedHeaderNavBarClass">
+  <div class="navbar-wrapper">
+    <div id="navbar-header" class="navbar-header" [ngClass]="selectedNavBarHeaderClass"
+      (mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)">
+      <ul class="nav navbar-nav flex-row">
+        <!-- Remove position relative in responsive -->
+        <li class="nav-item mobile-menu d-lg-none mr-auto"><a class="nav-link nav-menu-main menu-toggle hidden-xs11"
+            (click)="toggleNavigation($event)">
+            <i class="feather ft-menu font-large-1"></i></a></li>
+        <li class="nav-item mr-auto"><a [routerLink]="['/dashboard/sales']" class="navbar-brand"
+            routerLink="/dashboard/sales"><img class="brand-logo" alt="modern admin logo"
+              [src]="_themeSettingsConfig.brand.logo.value">
+            <h3 class="brand-text">{{_themeSettingsConfig.brand.brand_name}}</h3>
+          </a></li>
+        <li class="nav-item d-none d-md-block nav-toggle">
+          <a [routerLink]="" class="nav-link modern-nav-toggle pr-0" data-toggle="collapse"
+            (click)="toggleFixMenu($event)">
+            <i class="feather toggle-icon font-medium-3 white"
+              [ngClass]="{'ft-toggle-left': _themeSettingsConfig.menu === 'collapse','ft-toggle-right': _themeSettingsConfig.menu === 'expand'}"></i>
+          </a>
+        </li>
+        <li class="nav-item d-lg-none"><a class="nav-link open-navbar-container" data-toggle="collapse"
+            data-target="#navbar-mobile" (click)="toggleNavbar($event)"><i class="la la-ellipsis-v"></i></a></li>
+      </ul>
+    </div>
+    <!-- New-->
+    <div class="navbar-container content" [hidden]="isMobile && !showNavbar">
+      <div class="collapse navbar-collapse" id="navbar-mobile">
+        <ul class="nav navbar-nav mr-auto float-left">
+          <li class="nav-item d-none d-md-block"><a [routerLink]="" class="nav-link nav-link-expand"
+              (click)="toggleFullScreen()" *ngIf="maximize === 'on'"><i class="ficon feather ft-maximize"></i></a></li>
+          <li class="nav-item nav-search"><a [routerLink]="" class="nav-link nav-link-search" (click)="clickSearch()"
+              *ngIf="search === 'on'"><i class="ficon feather ft-search"></i></a>
+            <div class="search-input" [ngClass]="{'open': isHeaderSearchOpen}">
+              <input class="input" type="text" placeholder="Explore Modern...">
+            </div>
+          </li>
+        </ul>
+        <ul class="nav navbar-nav float-right">
+          <li class="dropdown-language nav-item" ngbDropdown *ngIf="internationalization === 'on'">
+            <a [routerLink]="" class="dropdown-toggle nav-link" ngbDropdownToggle id="dropdown-flag">
+              <i class="flag-icon flag-icon-gb"></i><span class="selected-language"></span>
+            </a>
+            <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownLangMenu">
+              <a [routerLink]="" class="dropdown-item">
+                <i class="flag-icon flag-icon-gb"></i> English
+              </a>
+              <a [routerLink]="" class="dropdown-item">
+                <i class="flag-icon flag-icon-fr"></i> French
+              </a>
+              <a [routerLink]="" class="dropdown-item">
+                <i class="flag-icon flag-icon-cn"></i> Chinese
+              </a>
+              <a [routerLink]="" class="dropdown-item">
+                <i class="flag-icon flag-icon-de"></i> German
+              </a>
+            </div>
+          </li>
+          <li class="dropdown-notification nav-item dropdown" ngbDropdown *ngIf="notification === 'on'">
+            <a class="nav-link nav-link-label" ngbDropdownToggle>
+              <i class="ficon feather ft-bell"></i>
+              <span class="badge badge-pill badge-danger badge-up badge-glow">5</span>
+            </a>
+            <ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu>
+              <li class="dropdown-menu-header">
+                <h6 class="dropdown-header m-0"><span class="grey darken-2">Notifications</span></h6><span
+                  class="notification-tag badge badge-default badge-danger float-right m-0">5 New</span>
+              </li>
+              <li class="scrollable-container media-list w-100 ps-container ps-theme-dark ps-active-y" fxFlex="auto" [perfectScrollbar]="config">
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left align-self-center"><i
+                        class="feather ft-plus-square icon-bg-circle bg-cyan"></i>
+                    </div>
+                    <div class="media-body">
+                      <h6 class="media-heading">You have new order!</h6>
+                      <p class="notification-text font-small-3 text-muted">Lorem ipsum dolor sit amet, consectetuer
+                        elit.</p><small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">30 minutes
+                          ago</time></small>
+                    </div>
+                  </div>
+                </a>
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left align-self-center"><i
+                        class="feather ft-download-cloud icon-bg-circle bg-red bg-darken-1"></i></div>
+                    <div class="media-body">
+                      <h6 class="media-heading red darken-1">99% Server load</h6>
+                      <p class="notification-text font-small-3 text-muted">Aliquam tincidunt mauris eu risus.</p><small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Five hour
+                          ago</time></small>
+                    </div>
+                  </div>
+                </a>
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left align-self-center"><i
+                        class="feather ft-alert-triangle icon-bg-circle bg-yellow bg-darken-3"></i></div>
+                    <div class="media-body">
+                      <h6 class="media-heading yellow darken-3">Warning notifixation</h6>
+                      <p class="notification-text font-small-3 text-muted">Vestibulum auctor dapibus neque.</p><small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Today</time></small>
+                    </div>
+                  </div>
+                </a>
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left align-self-center"><i
+                        class="feather ft-check-circle icon-bg-circle bg-cyan"></i>
+                    </div>
+                    <div class="media-body">
+                      <h6 class="media-heading">Complete the task</h6><small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Last
+                          week</time></small>
+                    </div>
+                  </div>
+                </a>
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left align-self-center"><i class="feather ft-file icon-bg-circle bg-teal"></i>
+                    </div>
+                    <div class="media-body">
+                      <h6 class="media-heading">Generate monthly report</h6><small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Last
+                          month</time></small>
+                    </div>
+                  </div>
+                </a>
+              </li>
+              <li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
+                  href="javascript:void(0)">Read all notifications</a></li>
+            </ul>
+          </li>
+          <li class="dropdown-notification nav-item" ngbDropdown>
+            <a class="nav-link nav-link-label" ngbDropdownToggle *ngIf="email === 'on'"><i
+                class="ficon feather ft-mail"></i></a>
+            <ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu>
+              <li class="dropdown-menu-header">
+                <h6 class="dropdown-header m-0"><span class="grey darken-2">Messages</span></h6><span
+                  class="notification-tag badge badge-default badge-warning float-right m-0">4 New</span>
+              </li>
+              <li class="scrollable-container media-list w-100 ps-container ps-theme-dark ps-active-y" fxFlex="auto"
+                [perfectScrollbar]="config">
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left"><span class="avatar avatar-sm avatar-online rounded-circle"><img
+                          src="../../../assets/images/portrait/small/avatar-s-19.png" alt="avatar"><i></i></span></div>
+                    <div class="media-body">
+                      <h6 class="media-heading">Margaret Govan</h6>
+                      <p class="notification-text font-small-3 text-muted">I like your portfolio, let's start.</p>
+                      <small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Today</time></small>
+                    </div>
+                  </div>
+                </a>
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left"><span class="avatar avatar-sm avatar-busy rounded-circle"><img
+                          src="../../../assets/images/portrait/small/avatar-s-2.png" alt="avatar"><i></i></span></div>
+                    <div class="media-body">
+                      <h6 class="media-heading">Bret Lezama</h6>
+                      <p class="notification-text font-small-3 text-muted">I have seen your work, there is</p><small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Tuesday</time></small>
+                    </div>
+                  </div>
+                </a>
+                <a href="javascript:void(0)">
+                  <div class="media">
+                    <div class="media-left"><span class="avatar avatar-sm avatar-online rounded-circle"><img
+                          src="../../../assets/images/portrait/small/avatar-s-3.png" alt="avatar"><i></i></span></div>
+                    <div class="media-body">
+                      <h6 class="media-heading">Carie Berra</h6>
+                      <p class="notification-text font-small-3 text-muted">Can we have call in this week ?</p><small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Friday</time></small>
+                    </div>
+                  </div>
+                </a>
+                <a href="javascript:void(0)">
+                  <div class="media border_bottom">
+                    <div class="media-left"><span class="avatar avatar-sm avatar-away rounded-circle"><img
+                          src="../../../assets/images/portrait/small/avatar-s-6.png" alt="avatar"><i></i></span></div>
+                    <div class="media-body">
+                      <h6 class="media-heading">Eric Alsobrook</h6>
+                      <p class="notification-text font-small-3 text-muted">We have project party this saturday.</p>
+                      <small>
+                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">last
+                          month</time></small>
+                    </div>
+                  </div>
+                </a>
+              </li>
+              <li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
+                  href="javascript:void(0)">Read all messages</a></li>
+            </ul>
+          </li>
+
+          <li class="dropdown-user nav-item" ngbDropdown>
+            <a class="nav-link dropdown-user-link" ngbDropdownToggle>
+              <span *ngIf="currentUser.displayName"
+                class="mr-1 user-name text-bold-700">{{currentUser.displayName}}</span>
+              <span *ngIf="!currentUser.displayName" class="mr-1 user-name text-bold-700">John Doe</span>
+              <span class="avatar avatar-online">
+                <img *ngIf="currentUser.photoURL" src="{{currentUser.photoURL}}" alt="avatar">
+                <img *ngIf="!currentUser.photoURL" src="../../../assets/images/portrait/small/avatar-s-19.png"
+                  alt="avatar">
+                <i></i>
+              </span>
+            </a>
+            <div ngbDropdownMenu class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownProfileMenu">
+              <a class="dropdown-item" [routerLink]="['/user/user-profile']"><i class="feather ft-user"></i> Edit
+                Profile </a>
+              <a class="dropdown-item" [routerLink]="['/email']"><i class="feather ft-mail"></i> My Inbox </a>
+              <a class="dropdown-item" [routerLink]="['/todos']"><i class="feather ft-check-square"></i> Task </a>
+              <a class="dropdown-item" [routerLink]="['/chats']"><i class="feather ft-message-square"></i> Chats </a>
+              <div class="dropdown-divider"></div>
+              <a class="dropdown-item" [routerLink]="" (click)="logout()"><i class="feather ft-power"></i> Logout</a>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!-- New-->
+  </div>
+</nav>

src/app/_layout/header/vertical/vertical.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { VerticalComponent } from './vertical.component';
+
+describe('VerticalComponent', () => {
+  let component: VerticalComponent;
+  let fixture: ComponentFixture<VerticalComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [ VerticalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(VerticalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_layout/header/vertical/vertical.component.ts

@@ -0,0 +1,477 @@
+import { Component, OnInit, Inject, Renderer2, ElementRef, ViewChild, AfterViewInit, HostListener } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { NavbarService } from '../../../_services/navbar.service';
+import { ThemeSettingsService } from '../../settings/theme-settings.service';
+import { MenuSettingsService } from '../../settings/menu-settings.service';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { AuthService } from 'src/app/_services/auth.service';
+import { Router } from '@angular/router';
+import { PerfectScrollbarConfigInterface, PerfectScrollbarComponent, PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
+import { AppConstants } from 'src/app/_helpers/app.constants';
+
+const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
+  mozRequestFullScreen(): Promise<void>;
+  webkitRequestFullscreen(): Promise<void>;
+  msRequestFullscreen(): Promise<void>;
+};
+
+const docWithBrowsersExitFunctions = document as Document & {
+  mozCancelFullScreen(): Promise<void>;
+  webkitExitFullscreen(): Promise<void>;
+  msExitFullscreen(): Promise<void>;
+};
+@Component({
+  selector: 'app-header-vertical',
+  templateUrl: './vertical.component.html',
+  styleUrls: ['./vertical.component.css']
+})
+export class VerticalComponent implements OnInit, AfterViewInit {
+
+  insideTm: any;
+  outsideTm: any;
+  private _unsubscribeAll: Subject<any>;
+  private _unsubscribeAllMenu: Subject<any>;
+  public _themeSettingsConfig: any;
+  private _menuSettingsConfig: any;
+  public selectedHeaderNavBarClass: string;
+  public selectedNavBarHeaderClass: string;
+  public currentUser: any;
+  public isHeaderSearchOpen: any;
+  isMobile = false;
+  showNavbar = false;
+  public maximize: any;
+  public search: any;
+  public internationalization: any;
+  public notification: any;
+  public email: any;
+  public config: PerfectScrollbarConfigInterface = { wheelPropagation: false };
+  @ViewChild(PerfectScrollbarComponent) componentRef?: PerfectScrollbarComponent;
+  @ViewChild(PerfectScrollbarDirective, { static: true }) directiveRef?: PerfectScrollbarDirective;
+
+  constructor(
+    @Inject(DOCUMENT) private document: Document,
+    private _renderer: Renderer2,
+    private navbarService: NavbarService,
+    private _themeSettingsService: ThemeSettingsService,
+    private _menuSettingsService: MenuSettingsService,
+    public authService: AuthService,
+    private router: Router,
+    private elementRef: ElementRef
+  ) {
+    this._unsubscribeAll = new Subject();
+    this._unsubscribeAllMenu = new Subject();
+  }
+
+  logout() {
+    if (localStorage.getItem('currentUser')) {
+      this.authService.doLogout().then(res => {
+        window.location.href = '/login';
+      }, err => {
+        console.log(err);
+      });
+    }
+  }
+
+  ngOnInit() {
+
+    this.isMobile = window.innerWidth < AppConstants.MOBILE_RESPONSIVE_WIDTH;
+    if (!this.isMobile) {
+      this.showNavbar = true;
+    }
+    if (localStorage.getItem('currentUser')) {
+      this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
+    }
+    // Subscribe to config changes
+    this._themeSettingsService.config
+      .pipe(takeUntil(this._unsubscribeAll))
+      .subscribe((config) => {
+        this._themeSettingsConfig = config;
+        this.refreshView();
+      });
+    this._menuSettingsService.config
+      .pipe(takeUntil(this._unsubscribeAll))
+      .subscribe((config) => {
+        this._menuSettingsConfig = config;
+      });
+      this.maximize = this._themeSettingsConfig.headerIcons.maximize;
+      this.search = this._themeSettingsConfig.headerIcons.search;
+      this.internationalization = this._themeSettingsConfig.headerIcons.internationalization;
+      this.notification = this._themeSettingsConfig.headerIcons.notification;
+      this.email = this._themeSettingsConfig.headerIcons.email;
+  }
+
+  ngAfterViewInit(): void {
+    this.refreshView();
+  }
+
+  refreshView() {
+    const iconElement = document.getElementsByClassName('toggle-icon');
+    const menuColorElement = document.getElementsByClassName('main-menu');
+    const navigationElement = document.getElementsByClassName('main-menu');
+    const navbarElement = document.getElementsByClassName('header-navbar');
+    const themeColorElement = document.getElementsByClassName('header-navbar');
+    const element = document.getElementsByClassName('navbar-header');
+    const boxelement = document.getElementById('customizer');
+    if (iconElement) {
+      if (this._themeSettingsConfig.colorTheme === 'semi-light' || this._themeSettingsConfig.colorTheme === 'light') {
+        this._renderer.removeClass(iconElement.item(0), 'white');
+        this._renderer.addClass(iconElement.item(0), 'blue-grey');
+        this._renderer.addClass(iconElement.item(0), 'darken-3');
+      } else if (this._themeSettingsConfig.colorTheme === 'semi-dark' || this._themeSettingsConfig.colorTheme === 'dark') {
+        this._renderer.addClass(iconElement.item(0), 'white');
+        this._renderer.removeClass(iconElement.item(0), 'blue-grey');
+        this._renderer.removeClass(iconElement.item(0), 'darken-3');
+      }
+    }
+
+    if (this._themeSettingsConfig.colorTheme === 'semi-light') {
+      this.selectedHeaderNavBarClass = this._themeSettingsConfig.color;
+      this.selectedNavBarHeaderClass = '';
+    } else if (this._themeSettingsConfig.colorTheme === 'semi-dark') {
+      this.selectedNavBarHeaderClass = this._themeSettingsConfig.color;
+      this.selectedHeaderNavBarClass = '';
+    } else if (this._themeSettingsConfig.colorTheme === 'dark') {
+      this.selectedHeaderNavBarClass = this._themeSettingsConfig.color;
+      this.selectedNavBarHeaderClass = '';
+    } else if (this._themeSettingsConfig.colorTheme === 'light') {
+      this.selectedHeaderNavBarClass = this._themeSettingsConfig.color;
+      this.selectedNavBarHeaderClass = this._themeSettingsConfig.color;
+    }
+    if (menuColorElement) {
+      if (this._themeSettingsConfig.menuColor === 'menu-dark') {
+        this._renderer.removeClass(menuColorElement.item(0), 'menu-light');
+        this._renderer.addClass(menuColorElement.item(0), 'menu-dark');
+      } else if (this._themeSettingsConfig.menuColor === 'menu-light') {
+        this._renderer.removeClass(menuColorElement.item(0), 'menu-dark');
+        this._renderer.addClass(menuColorElement.item(0), 'menu-light');
+      }
+    }
+
+    if (themeColorElement) {
+      if (this._themeSettingsConfig.colorTheme === 'semi-light') {
+        this._renderer.removeClass(themeColorElement.item(0), 'navbar-semi-dark');
+        this._renderer.removeClass(themeColorElement.item(0), 'navbar-dark');
+        this._renderer.removeClass(themeColorElement.item(0), 'navbar-light');
+      } else if (this._themeSettingsConfig.colorTheme === 'semi-dark') {
+        this._renderer.removeClass(themeColorElement.item(0), 'navbar-semi-light');
+        this._renderer.removeClass(themeColorElement.item(0), 'navbar-dark');
+        this._renderer.removeClass(themeColorElement.item(0), 'navbar-light');
+      } else if (this._themeSettingsConfig.colorTheme === 'dark') {
+        this._renderer.removeClass(themeColorElement.item(0), 'navbar-semi-dark');
+        this._renderer.removeClass(themeColorElement.item(0), 'navbar-semi-dark');
+        this._renderer.removeClass(themeColorElement.item(0), 'navbar-light');
+      } else if (this._themeSettingsConfig.colorTheme === 'light') {
+        this._renderer.removeClass(themeColorElement.item(0), 'navbar-semi-dark');
+        this._renderer.removeClass(themeColorElement.item(0), 'navbar-dark');
+        this._renderer.removeClass(themeColorElement.item(0), 'navbar-semi-light');
+      }
+    }
+
+    if (navigationElement) {
+      if (this._themeSettingsConfig.navigation === 'menu-native-scroll') {
+        this._renderer.addClass(navigationElement.item(0), 'menu-native-scroll');
+      } else if (this._themeSettingsConfig.navigation === 'menu-icon-right') {
+        this._renderer.addClass(navigationElement.item(0), 'menu-icon-right');
+      } else if (this._themeSettingsConfig.navigation === 'menu-bordered') {
+        this._renderer.addClass(navigationElement.item(0), 'menu-bordered');
+      } else if (this._themeSettingsConfig.navigation === 'menu-flipped') {
+        this._renderer.addClass(document.body, 'menu-flipped');
+      } else if (this._themeSettingsConfig.navigation === 'menu-collapsible') {
+        this._renderer.addClass(navigationElement.item(0), 'menu-collapsible');
+      } else if (this._themeSettingsConfig.navigation === 'menu-static') {
+        this._renderer.addClass(navigationElement.item(0), 'menu-static');
+      }
+    }
+
+    if (navbarElement) {
+      if (this._themeSettingsConfig.menu === 'navbar-static-top') {
+        this._renderer.addClass(navbarElement.item(0), 'navbar-static-top');
+        this._renderer.addClass(navigationElement.item(0), 'menu-static');
+      }
+    }
+
+    if (navbarElement) {
+      if (this._themeSettingsConfig.menu === 'semi-light') {
+        this._renderer.addClass(navbarElement.item(0), 'navbar-semi-light bg-gradient-x-grey-blue');
+      } else if (this._themeSettingsConfig.menu === 'semi-dark') {
+        this._renderer.addClass(navbarElement.item(0), 'navbar-semi-dark');
+      } else if (this._themeSettingsConfig.menu === 'dark') {
+        this._renderer.addClass(navbarElement.item(0), 'navbar-dark');
+      } else if (this._themeSettingsConfig.menu === 'light') {
+        this._renderer.addClass(navbarElement.item(0), 'navbar-light');
+      }
+    }
+  }
+
+  resetOpenMenu() {
+    for (let i = 0; i < this._menuSettingsConfig.vertical_menu.items.length; i++) {
+      const menu = this._menuSettingsConfig.vertical_menu.items[i];
+      if (!menu.submenu) {
+        menu['isOpen'] = false;
+        menu['isActive'] = false;
+        menu['hover'] = false;
+      } else if (menu.submenu) {
+        for (let j = 0; j < menu.submenu.items.length; j++) {
+          menu['isOpen'] = false;
+          menu['isActive'] = false;
+          menu['hover'] = false;
+          menu.submenu.items[j]['isOpen'] = false;
+        }
+      }
+    }
+  }
+
+  setOpenInNavbar(value) {
+    for (let i = 0; i < this._menuSettingsConfig.vertical_menu.items.length; i++) {
+      const menu = this._menuSettingsConfig.vertical_menu.items[i];
+      if (!menu.submenu &&
+        menu.page === this.router.url) {
+        menu['isOpen'] = value;
+        menu['isActive'] = value;
+      } else if (menu.submenu) {
+        for (let j = 0; j < menu.submenu.items.length; j++) {
+          if (menu.submenu.items[j].page === this.router.url) {
+            menu['isOpen'] = value;
+            menu['isActive'] = value;
+            menu.submenu.items[j]['isOpen'] = value;
+            menu.submenu.items[j]['isActive'] = value;
+            break;
+          }
+        }
+      }
+    }
+  }
+
+  /**
+	 * Use for fixed left aside menu, to show menu on mouseenter event.
+	 * @param e Event
+	 */
+  mouseEnter(e) {
+    if (this.navbarService.isFixedMenu()) {
+      return;
+    }
+    this.navbarService.setMouseInRegion(true);
+    const navBar = this.document.getElementById('navbar-header');
+    const mainMenu = this.document.getElementById('main-menu');
+
+    // check if the left aside menu is fixed
+    if (!navBar.classList.contains('expanded')) {
+      this._renderer.addClass(navBar, 'expanded');
+      this._renderer.addClass(mainMenu, 'expanded');
+      this.resetOpenMenu();
+      this.setOpenInNavbar(true);
+    }
+  }
+
+  /**
+	 * Use for fixed left aside menu, to show menu on mouseenter event.
+	 * @param e Event
+	 */
+  mouseLeave(event) {
+    if (this.navbarService.isFixedMenu()) {
+      return;
+    }
+    const _self = this;
+    const navBar = this.document.getElementById('navbar-header');
+    const mainMenu = this.document.getElementById('main-menu');
+    if (navBar && navBar.classList.contains('expanded')) {
+      this.insideTm = setTimeout(() => {
+        if (!_self.navbarService.isMouseInRegion()) {
+          this._renderer.removeClass(navBar, 'expanded');
+          this._renderer.removeClass(mainMenu, 'expanded');
+          this.resetOpenMenu();
+          this.setOpenInNavbar(false);
+        }
+      }, 100);
+    }
+    this.navbarService.setMouseInRegion(false);
+  }
+
+  // example to update badge value dynamically from another component
+  updateMenuBadgeValue() {
+    for (let i = 0; i < this._menuSettingsConfig.items.length; i++) {
+      if (this._menuSettingsConfig.items[i].badge) {
+        this._menuSettingsConfig.items[i].badge.value = 19;
+      }
+    }
+    this._menuSettingsService.config = this._menuSettingsConfig;
+  }
+
+  handleCollapseOfMenu(element) {
+    if (element.classList && element.classList.contains('has-sub') && element.classList.contains('open')) {
+      element.classList.remove('open');
+      element.classList.remove('hover');
+      element.classList.add('menu-collapsed-open');
+    }
+  }
+
+  handleExpandOfMenu(element) {
+    if (element.classList && element.classList.contains('has-sub') &&
+      element.classList.contains('menu-collapsed-open')) {
+      element.classList.remove('menu-collapsed-open');
+      element.classList.add('open');
+      element.classList.add('hover');
+    }
+  }
+
+  toggleMenu(event) {
+    const target = event.target || event.srcElement || event.currentTarget;
+    const parent = target.parentElement;
+    if (parent && parent.classList.contains('has-sub')) {
+      this.openSubMenuUsingParent(parent);
+    } else {
+      const parentOfParent = parent.parentElement;
+      this.openSubMenuUsingParent(parentOfParent);
+    }
+  }
+
+  openSubMenuUsingParent(parent) {
+    if (parent.classList && parent.classList.contains('has-sub') &&
+      !parent.classList.contains('open')) {
+      parent.classList.add('open');
+    } else if (parent.classList && parent.classList.contains('has-sub') &&
+      parent.classList.contains('open')) {
+      parent.classList.remove('open');
+    }
+  }
+
+  toggleFullScreen() {
+    const toggleIcon = document.getElementsByClassName('ficon');
+
+    if (toggleIcon.item(0).classList.contains('ft-maximize')) {
+      this.openfullscreen();
+      this._renderer.removeClass(toggleIcon.item(0), 'ft-maximize');
+      this._renderer.addClass(toggleIcon.item(0), 'ft-minimize');
+    } else if (toggleIcon.item(0).classList.contains('ft-minimize')) {
+      this.closefullscreen();
+      this._renderer.addClass(toggleIcon.item(0), 'ft-maximize');
+      this._renderer.removeClass(toggleIcon.item(0), 'ft-minimize');
+    }
+  }
+
+  openfullscreen() {
+    // Trigger fullscreen
+    // eslint-disable-next-line no-shadow,@typescript-eslint/no-shadow
+    const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
+      mozRequestFullScreen(): Promise<void>;
+      webkitRequestFullscreen(): Promise<void>;
+      msRequestFullscreen(): Promise<void>;
+    };
+
+    if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
+      docElmWithBrowsersFullScreenFunctions.requestFullscreen();
+    } else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
+      docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
+    } else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+      docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
+    } else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
+      docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
+    }
+  }
+
+  closefullscreen() {
+    // eslint-disable-next-line no-shadow, @typescript-eslint/no-shadow
+    const docWithBrowsersExitFunctions = document as Document & {
+      mozCancelFullScreen(): Promise<void>;
+      webkitExitFullscreen(): Promise<void>;
+      msExitFullscreen(): Promise<void>;
+    };
+    if (docWithBrowsersExitFunctions.exitFullscreen) {
+      docWithBrowsersExitFunctions.exitFullscreen();
+    } else if (docWithBrowsersExitFunctions.mozCancelFullScreen) { /* Firefox */
+      docWithBrowsersExitFunctions.mozCancelFullScreen();
+    } else if (docWithBrowsersExitFunctions.webkitExitFullscreen) { /* Chrome, Safari and Opera */
+      docWithBrowsersExitFunctions.webkitExitFullscreen();
+    } else if (docWithBrowsersExitFunctions.msExitFullscreen) { /* IE/Edge */
+      docWithBrowsersExitFunctions.msExitFullscreen();
+    }
+
+  }
+
+  toggleFixMenu(e) {
+    if (this.document.body.classList.contains('menu-expanded')) {
+      // show the left aside menu
+      this.navbarService.setFixedMenu(false);
+      this.document.body.classList.remove('menu-expanded');
+      this.document.body.classList.add('menu-collapsed');
+      // Change switch icon
+      this._themeSettingsConfig.menu = 'collapse';
+    } else {
+      this.navbarService.setFixedMenu(true);
+      this.document.body.classList.remove('menu-collapsed');
+      this.document.body.classList.add('menu-expanded');
+      // Change switch icon
+      this._themeSettingsConfig.menu = 'expand';
+    }
+    const navBar = this.document.getElementById('navbar-header');
+    const mainMenu = this.document.getElementById('main-menu');
+    this._renderer.addClass(navBar, 'expanded');
+    this._renderer.addClass(mainMenu, 'expanded');
+    setTimeout(() => { AppConstants.fireRefreshEventOnWindow(); }, 300);
+  }
+
+  toggleNavigation(e) {
+    const sidenav = document.getElementById('sidenav-overlay');
+    const sidebarLeft = document.getElementById('sidebar-left') || document.getElementById('email-app-menu') ||
+      document.getElementById('sidebar-todo');
+    const contentOverlay = document.getElementById('content-overlay');
+
+    if (this.document.body.classList.contains('menu-open') && (this.router.url === '/todos' || this.router.url === '/contacts' ||
+      this.router.url === '/email' || this.router.url === '/chats' || this.router.url === '/chats/static-chat')) {
+      this.document.body.classList.remove('menu-open');
+      this._renderer.removeClass(sidenav, 'd-block');
+      this._renderer.removeClass(contentOverlay, 'show');
+      this.document.body.classList.add('menu-close');
+      this._renderer.addClass(sidenav, 'd-none');
+      this.showNavbar = false;
+    } else if (this.document.body.classList.contains('menu-open')) {
+      this.document.body.classList.remove('menu-open');
+      this._renderer.removeClass(sidenav, 'd-block');
+      this.document.body.classList.add('menu-close');
+      this._renderer.addClass(sidenav, 'd-none');
+      this.showNavbar = false;
+    } else {
+      this._renderer.removeClass(sidenav, 'd-none');
+      this.document.body.classList.remove('menu-close');
+      this.document.body.classList.add('menu-open');
+      this._renderer.addClass(sidenav, 'd-block');
+      this.showNavbar = false;
+    }
+
+    if (sidebarLeft) {
+      this._renderer.removeClass(sidebarLeft, 'show');
+    }
+    if(contentOverlay){
+      this._renderer.removeClass(contentOverlay, 'show');
+    }
+  }
+
+  toggleNavbar(e) {
+    if (this.showNavbar) {
+      this.showNavbar = false;
+    } else {
+      this.showNavbar = true;
+    }
+  }
+
+  public clickSearch() {
+    if (this.isHeaderSearchOpen) {
+      this.isHeaderSearchOpen = false;
+    } else {
+      this.isHeaderSearchOpen = true;
+    }
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    if (event.target.innerWidth < AppConstants.MOBILE_RESPONSIVE_WIDTH) {
+      this.isMobile = true;
+      this.showNavbar = false;
+    } else {
+      this.isMobile = false;
+      this.showNavbar = true;
+    }
+  }
+
+}