From 44cd6721d35e9fd42a939fdded5629a52f090089 Mon Sep 17 00:00:00 2001
From: "venbatechnologies@gmail.com" <venbatechnologies@gmail.com>
Date: Thu, 3 Feb 2022 20:42:50 +0530
Subject: [PATCH] for user profile

---
 .../layouts/admin/admin-layout.component.html | 1136 +++++++++--------
 1 file changed, 591 insertions(+), 545 deletions(-)

diff --git a/ng6-seed/src/app/layouts/admin/admin-layout.component.html b/ng6-seed/src/app/layouts/admin/admin-layout.component.html
index de8a6f3..cf3fd13 100755
--- a/ng6-seed/src/app/layouts/admin/admin-layout.component.html
+++ b/ng6-seed/src/app/layouts/admin/admin-layout.component.html
@@ -1,557 +1,603 @@
 <div class="app search-i" [dir]="layoutDir" [ngClass]="[ menuLayout, selectedSidebarImage, selectedSidebarColor, selectedHeaderColor, collapsedClass]" [class.app-dark]="dark" [class.boxed]="boxed" [class.collapsed-sidebar]="collapseSidebar" [class.compact-sidebar]="compactSidebar" [class.bg-img-disable]="!sidebarBg">
-  <mat-sidenav-container class="app-inner">
-     <mat-sidenav #sidemenu class="sidebar-panel" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" (mouseover)="menuMouseOver()" (mouseout)="menuMouseOut()">
-     <div class="opt-side relative ">
-        <div class="sidebar-container ">
-           <div class="branding text-center">
-              <!-- <h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> OPTIMA</span>
-              </h2> --> 
-              <h2>
-                 <img src="assets/images/PD_Genie_TM1.jpg" style="height: 50px;"> <!-- <span> {{userDep}} </span> -->
-              </h2>
-           </div>
-           <div class="main-nav">
-              <div class="user-pro-wrap">
-                 <div class="user-profile-thumb text-center">
-                    <div class="user-i">
-                       <div><h3>{{userDep}} </h3></div>
-                       <img [src]="profileurl ||'https://image.ibb.co/mGjZB9/usernew.png'" class="rad-full mb-1" width="100" height="100" alt="">
-                       <div><h4>{{fullName}}</h4></div>
-                       <div><h5>{{roleName}}</h5></div>
-                    </div>
-                 </div>
-                 <div class="most-used text-center">
-                    <a class="most-link" color="primary" (click)="menunav('HOME')">
-                       <mat-icon>home</mat-icon>
-                    </a>
-                    <a class="most-link" color="primary" (click)="menunav('USERS')">
-                       <mat-icon>person</mat-icon>
-                    </a>
-                   <!---- <a class="most-link" color="primary" (click)="menunav('SETTINGS')">
-                       <mat-icon>settings</mat-icon>
-                    </a>-->
-                 </div>
-              </div>
-              <mat-nav-list appAccordion class="navigation relative">
-                 <mat-list-item appAccordionLink *ngFor="let menuitem of currentUser.short_name == 'MWISE' ? menuItems.salesgetAll() : menuItems.getAll() | roleMenuItems:'2'">
-                    <a appAccordionToggle class="relative" mat-ripple [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
-                    <mat-icon>{{ menuitem.icon }}</mat-icon>
-                    <span>{{ menuitem.name | translate }}</span>
-                    <span fxFlex></span>
-                    <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
-                    </a>
-                    <a appAccordionToggle class="relative" mat-ripple href="{{menuitem.state}}" *ngIf="menuitem.type === 'extLink'">
-                       <mat-icon>{{ menuitem.icon }}</mat-icon>
-                       <span>{{ menuitem.name | translate }}</span>
-                       <span fxFlex></span>
-                       <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
-                    </a>
-                    <a appAccordionToggle class="relative" mat-ripple href="{{menuitem.state}}" target="_blank" *ngIf="menuitem.type === 'extTabLink'">
-                       <mat-icon>{{ menuitem.icon }}</mat-icon>
-                       <span>{{ menuitem.name | translate }}</span>
-                       <span fxFlex></span>
-                       <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
-                    </a>
-                    <a appAccordionToggle class="relative" mat-ripple href="javascript:;" *ngIf="menuitem.type === 'sub'">
-                       <mat-icon>{{ menuitem.icon }}</mat-icon>
-                       <span>{{ menuitem.name | translate }}</span>
-                       <span fxFlex></span>
-                       <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
-                       <mat-icon class="menu-caret">arrow_drop_down</mat-icon>
-                    </a>
-                    <mat-nav-list class="sub-menu" *ngIf="menuitem.type === 'sub'">
-                       <mat-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open">
-                          <a [routerLink]="['/', menuitem.state, childitem.state ]" class="relative" mat-ripple>{{ childitem.name | translate }}</a>
-                       </mat-list-item>
-                    </mat-nav-list>
-                    <!-- Multi-->
-                    <a appAccordionToggle class="relative" mat-ripple href="javascript:;" *ngIf="menuitem.type === 'multi'">
+   <mat-sidenav-container class="app-inner">
+      <mat-sidenav #sidemenu class="sidebar-panel" id="sidebar-panel" [mode]="isOver() ? 'over' : 'side'" [opened]="!isOver()" (mouseover)="menuMouseOver()" (mouseout)="menuMouseOut()">
+      <div class="opt-side relative ">
+         <div class="sidebar-container ">
+            <div class="branding text-center">
+               <!-- <h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> OPTIMA</span>
+               </h2> --> 
+               <h2>
+                  <img src="assets/images/PD_Genie_TM1.jpg" style="height: 50px;"> <!-- <span> {{userDep}} </span> -->
+               </h2>
+            </div>
+            <div class="main-nav">
+               <div class="user-pro-wrap">
+                  <div class="user-profile-thumb text-center">
+                     <div class="user-i">
+                        <div><h3>{{userDep}} </h3></div>
+                        <img [src]="profileurl ||'https://image.ibb.co/mGjZB9/usernew.png'" class="rad-full mb-1" width="100" height="100" alt="">
+                        <div><h4>{{fullName}}</h4></div>
+                        <div><h5>{{roleName}}</h5></div>
+                     </div>
+                  </div>
+                  <div class="most-used text-center">
+                     <a class="most-link" color="primary" (click)="menunav('HOME')">
+                        <mat-icon>home</mat-icon>
+                     </a>
+                     <a class="most-link" color="primary" (click)="menunav('USERS')">
+                        <mat-icon>person</mat-icon>
+                     </a>
+                    <!---- <a class="most-link" color="primary" (click)="menunav('SETTINGS')">
+                        <mat-icon>settings</mat-icon>
+                     </a>-->
+                  </div>
+               </div>
+               <mat-nav-list appAccordion class="navigation relative">
+                  <mat-list-item appAccordionLink *ngFor="let menuitem of currentUser.short_name == 'MWISE' ? menuItems.salesgetAll() : menuItems.getAll() | roleMenuItems:'2'">
+                     <a appAccordionToggle class="relative" mat-ripple [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
+                     <mat-icon>{{ menuitem.icon }}</mat-icon>
+                     <span>{{ menuitem.name | translate }}</span>
+                     <span fxFlex></span>
+                     <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
+                     </a>
+                     <a appAccordionToggle class="relative" mat-ripple href="{{menuitem.state}}" *ngIf="menuitem.type === 'extLink'">
+                        <mat-icon>{{ menuitem.icon }}</mat-icon>
+                        <span>{{ menuitem.name | translate }}</span>
+                        <span fxFlex></span>
+                        <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
+                     </a>
+                     <a appAccordionToggle class="relative" mat-ripple href="{{menuitem.state}}" target="_blank" *ngIf="menuitem.type === 'extTabLink'">
+                        <mat-icon>{{ menuitem.icon }}</mat-icon>
+                        <span>{{ menuitem.name | translate }}</span>
+                        <span fxFlex></span>
+                        <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
+                     </a>
+                     <a appAccordionToggle class="relative" mat-ripple href="javascript:;" *ngIf="menuitem.type === 'sub'">
                         <mat-icon>{{ menuitem.icon }}</mat-icon>
                         <span>{{ menuitem.name | translate }}</span>
                         <span fxFlex></span>
                         <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
                         <mat-icon class="menu-caret">arrow_drop_down</mat-icon>
                      </a>
-                     <div *ngFor="let multichild of menuitem.multichild" >
-                        <mat-nav-list class="sub-menu" *ngIf="multichild.type === 'sub'">
-                            <mat-list-item *ngFor="let childitem of multichild.children" routerLinkActive="open">
-                               <a [routerLink]="['/', multichild.state, childitem.state ]" class="relative" mat-ripple>{{ childitem.name | translate }}</a>
-                            </mat-list-item>
-                         </mat-nav-list>
-                    </div>
-                     
-                  <!--End-->
-                 </mat-list-item>
-                 <mat-divider></mat-divider>
-  <!--                <mat-list-item>
-                    <a (click)="addMenuItem()">
-                       <mat-icon>add</mat-icon>
-                       <span>Add</span>
-                    </a>
-                 </mat-list-item> -->
-              </mat-nav-list>
-           </div>
-        </div>
-     </div>
-     <div class="bg-overlay"></div>
-     </mat-sidenav>
-     <mat-toolbar class="main-header" style="border-bottom:2px solid #f44336;">
-        <div class="horizontal-top-bar w-100">          
-           <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
-            <div class="horizontal-logo">
-              <div class="branding">
-                 <!-- <h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> OPTIMA</span>
-                 </h2> -->
-                 <!--<h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> {{userDep}}({{fullName}})</span>
-                 </h2>-->
-                   <a (click)="menunav('HOME')">
-                      <img [routerLink]="['/dashboard']" src="assets/images/PD_Genie_TM1.jpg" style="height: 35px;"> <strong> | </strong> <span> {{userDep}} </span>
-                   </a>
-              </div>
-           </div>
-           </div>
-           <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
-           <!--<div class="search-bar" fxFlex>
-              <form class="search-form">
-                 <mat-icon>search</mat-icon>
-                 <input type="text" placeholder="Search" autofocus="true" />
-              </form>
-           </div>-->
-           </div>
-
-           <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
-           <div class="menu-links"*ngIf="status == false">
-             
-             <span  *ngFor="let menuitem of currentUser.short_name == 'MWISE' ? horizontalMenuItems.salesgetAll() : horizontalMenuItems.getAll() | roleMenuItems:'1'">
-                 <button  mat-icon-button matTooltip="{{ menuitem.name}}" matTooltipPosition="below" [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'link'">
-                 <mat-icon>{{ menuitem.icon }}</mat-icon>
-                 <!--<span>{{ menuitem.name | translate }}</span>-->
-                 </button>
-             </span>
-           
-           
-              <button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
-                 <mat-icon>person</mat-icon>
-              </button>
-              <mat-menu #user="matMenu" class="opt-menu" x-position="before">
-                 <!-- <div mat-menu-item class="head-menu grad-blue">
-                    Settings
-                 </div>
-                 <button mat-menu-item>
-                    <mat-icon>settings</mat-icon>
-                    Settings 
-                 </button> -->
-                 <button mat-menu-item (click)="userprofile()">
-                    <mat-icon>account_box</mat-icon>
-                    Profile
-                 </button>
-                
-                 <button mat-menu-item (click)="logout()">
-                    <mat-icon>exit_to_app</mat-icon>
-                    Sign Out
-                 </button>
-              </mat-menu>
-           </div>
-          
-           <div class="menu-links" *ngIf="status ==true">
-             <button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
-                <mat-icon>person</mat-icon>
-             </button>
-             <mat-menu #user="matMenu" class="opt-menu" x-position="before">
-                <!-- <div mat-menu-item class="head-menu grad-blue">
-                   Settings
-                </div>
-                <button mat-menu-item>
-                   <mat-icon>settings</mat-icon>
-                   Setting 
-                </button> -->
-                <button mat-menu-item (click)="userprofile()">
-                   <mat-icon>account_box</mat-icon>
-                   Profile
-                </button>
-               
-                <button mat-menu-item (click)="logout()">
-                   <mat-icon>exit_to_app</mat-icon>
-                   Sign Out
-                </button>
-             </mat-menu>
-          </div>
-          </div>
-        </div>
-        <div class="vertical-menu w-100">
-        <button (click)="menuToggleFunc()" mat-icon-button class="lines-btn">
-           <mat-icon>menu</mat-icon>
-        </button>
-        <!-- <div class="search-bar" fxFlex>
-           <form class="search-form" fxShow="false" fxShow.gt-xs>
-              <mat-icon>search</mat-icon>
-              <input type="text" placeholder="Search" autofocus="true" />
-           </form>
-        </div> -->
-        <span fxFlex></span>
-        <!-- <button appToggleFullscreen mat-icon-button>
-           <mat-icon>fullscreen</mat-icon>
-        </button> -->
-        <!-- <button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
-           <mat-icon>message</mat-icon>
-        </button>
-        <mat-menu #user2="matMenu" class="opt-menu" x-position="after">
-           <div mat-menu-item class="head-menu grad-blue">
-              Message Menu
-           </div>
-           <button mat-menu-item>
-           <img width="40" src="assets/images/user-1.jpg" alt="">
-           Next Update for angular 5
-           </button>
-           <button mat-menu-item>
-           <img width="40" src="assets/images/user-2.jpg" alt="">
-           Check out our new admin theme
-           </button>
-           <button mat-menu-item>
-           <img width="40" src="assets/images/user-3.jpg" alt="">
-           Expedita quo, laboriosam officia.
-           </button>
-           <button mat-menu-item>
-           <img width="40" src="assets/images/user-4.jpg" alt="">
-           Lorem ipsum dolor sit amet consectetur.
-           </button>
-        </mat-menu>
-        <button [mat-menu-trigger-for]="user1" mat-icon-button class="ml-xs overflow-visible">
-           <mat-icon>reorder</mat-icon>
-           <span class="notification-label">3</span>
-        </button>
-        <mat-menu #user1="matMenu" class="opt-menu" x-position="before">
-           <div mat-menu-item class="head-menu grad-blue">
-              User Menu
-           </div>
-           <button mat-menu-item>
-              <mat-icon>show_chart</mat-icon>
-              Charts
-           </button>
-           <button mat-menu-item>
-              <mat-icon>navigation</mat-icon>
-              Maps
-           </button>
-           <button mat-menu-item>
-              <mat-icon>web</mat-icon>
-              Calendar Settings
-           </button>
-        </mat-menu> -->
-        <!-- <button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
-           <mat-icon>notifications</mat-icon>
-        </button> -->
-        <button [mat-menu-trigger-for]="user"  matTooltip="Person" matTooltipPosition="below" mat-icon-button class="ml-xs">
-           <mat-icon>person</mat-icon>
-        </button>
-        <mat-menu #user="matMenu" class="opt-menu" x-position="before">
-           <div mat-menu-item class="head-menu grad-blue">
-              {{fullName}}
-           </div>
-           <!--<button mat-menu-item>
-              <mat-icon>settings</mat-icon>
-              Setting 
-           </button>-->
-           <button mat-menu-item (click)="userprofile()">
-              <mat-icon>account_box</mat-icon>
-              Profile
-           </button>
-           <!-- <button mat-menu-item>
-              <mat-icon>notifications_off</mat-icon>
-              Disable notifications
-           </button> -->
-           <button mat-menu-item (click)="logout()">
-              <mat-icon>exit_to_app</mat-icon>
-              Sign Out
-           </button>
-        </mat-menu>
+                     <mat-nav-list class="sub-menu" *ngIf="menuitem.type === 'sub'">
+                        <mat-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open">
+                           <a [routerLink]="['/', menuitem.state, childitem.state ]" class="relative" mat-ripple>{{ childitem.name | translate }}</a>
+                        </mat-list-item>
+                     </mat-nav-list>
+                     <!-- Multi-->
+                     <a appAccordionToggle class="relative" mat-ripple href="javascript:;" *ngIf="menuitem.type === 'multi'">
+                         <mat-icon>{{ menuitem.icon }}</mat-icon>
+                         <span>{{ menuitem.name | translate }}</span>
+                         <span fxFlex></span>
+                         <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
+                         <mat-icon class="menu-caret">arrow_drop_down</mat-icon>
+                      </a>
+                      <div *ngFor="let multichild of menuitem.multichild" >
+                         <mat-nav-list class="sub-menu" *ngIf="multichild.type === 'sub'">
+                             <mat-list-item *ngFor="let childitem of multichild.children" routerLinkActive="open">
+                                <a [routerLink]="['/', multichild.state, childitem.state ]" class="relative" mat-ripple>{{ childitem.name | translate }}</a>
+                             </mat-list-item>
+                          </mat-nav-list>
+                     </div>
+                      
+                   <!--End-->
+                  </mat-list-item>
+                  <mat-divider></mat-divider>
+   <!--                <mat-list-item>
+                     <a (click)="addMenuItem()">
+                        <mat-icon>add</mat-icon>
+                        <span>Add</span>
+                     </a>
+                  </mat-list-item> -->
+               </mat-nav-list>
+            </div>
          </div>
-     </mat-toolbar>
-     <!--<div class="horizontal-menu text-center">
-        <nav>
-           <ul class="main-h-list">
-              <li *ngFor="let menuitem of horizontalMenuItems.getAll()">
-                 <a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'link'">
-                 <mat-icon>{{ menuitem.icon }}</mat-icon>
-                 <span>{{ menuitem.name | translate }}</span>
-                 </a>
-                 <a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'sub'">
-                 <mat-icon>{{ menuitem.icon }}</mat-icon>
-                 <span>{{ menuitem.name | translate }}</span>
-                 </a>
-                 <ul class="dropdown" *ngIf="menuitem.type === 'sub'">
-                    <li *ngFor="let childitem of menuitem.children">
-                       <a [routerLink]="['/'+childitem.state ]">{{ childitem.name | translate }}</a>
-                       <ul class="dropdown" *ngIf="childitem.type === 'super-sub'">
-                          <li *ngFor="let subchild of childitem.subchildren">
-                             <a [routerLink]="['/'+subchild.state ]">{{subchild.name | translate}}</a>
-                          </li>
-                       </ul>
-                    </li>
-                 </ul>
-                 
-              </li>
-           </ul>
-        </nav>
-     </div>-->
-     <app-http-loader></app-http-loader>
-     <div class="body-container">
-        <router-outlet></router-outlet>
-     </div>
-     <mat-sidenav #end position="end"  mode="over" opened="false">
-        <div style="text-align: center;">Not Yet Scheduled</div>
-        <mat-tab-group [selectedIndex]="1" mat-stretch-tabs>
-            <mat-tab>
-                <ng-template mat-tab-label>Triggered</ng-template>
-                <div class="scroll">
-                  <mat-nav-list>
-                                            <ng-template let-item let-last="last" ngFor [ngForOf]="alertMsgTriggerType">
-                                                <mat-list-item> 
-                                                    <h3 mat-line> {{item.applicant_name}} </h3>
-                                                    <p mat-line> {{item.lender_applicant_id}}</p>
-                                                    <p mat-line> {{item.entity_name}} - {{item.pd_status}} </p>
-                                                </mat-list-item>
-                                            </ng-template>
-                  </mat-nav-list>
-                </div>
-            </mat-tab>
-           <!--<mat-tab>
-              <ng-template mat-tab-label>Today</ng-template>
-              <ng-template mat-tab-label>Allocated</ng-template>
-              <div class="scroll">
-                 <mat-list class="pt-1 pb-1">
-                    <mat-list-item>
-                       <div fxLayout="column">
-                          <h2 class="ma-0">{{ today | date:'EEEE' }}</h2>
-                          <h6 class="mat-text-muted ma-0"><span>{{ today | date:'dd' }}</span>&nbsp;<span>{{ today | date:'MMMM' }}</span></h6>
+      </div>
+      <div class="bg-overlay"></div>
+      </mat-sidenav>
+      <mat-toolbar class="main-header" style="border-bottom:2px solid #f44336;">
+         <div class="horizontal-top-bar w-100">          
+            <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
+             <div class="horizontal-logo">
+               <div class="branding">
+                  <!-- <h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> OPTIMA</span>
+                  </h2> -->
+                  <!--<h2><i class="fa fa-superpowers" aria-hidden="true"></i> <span> {{userDep}}({{fullName}})</span>
+                  </h2>-->
+                    <a (click)="menunav('HOME')">
+                       <img [routerLink]="['/dashboard']" src="assets/images/PD_Genie_TM1.jpg" style="height: 35px;"> <strong> | </strong> <span> {{userDep}} </span>
+                    </a>
+               </div>
+            </div>
+            </div>
+            <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
+            <!--<div class="search-bar" fxFlex>
+               <form class="search-form">
+                  <mat-icon>search</mat-icon>
+                  <input type="text" placeholder="Search" autofocus="true" />
+               </form>
+            </div>-->
+            </div>
+ 
+            <div fxFlex.sm="100" fxFlex.xs="100" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" fxFlex="100">
+            <div class="menu-links">
+              <span *ngFor="let menuitem of currentUser.short_name == 'MWISE' ? horizontalMenuItems.salesgetAll() : horizontalMenuItems.getAll() | roleMenuItems:'1'">
+                  <button mat-icon-button matTooltip="{{ menuitem.name}}" matTooltipPosition="below" [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'link'">
+                  <mat-icon *ngIf="status==false">{{ menuitem.icon }}</mat-icon>
+                  <!--<span>{{ menuitem.name | translate }}</span>-->
+                  </button>
+              </span>
+              <!-- <span *ngFor="let menuitem of horizontalMenuItems.getAll()">
+                   <span *ngIf="menuitem.type === 'multi'">
+                    <button [mat-menu-trigger-for]="multi" matTooltip="{{ menuitem.name}}" matTooltipPosition="below" mat-icon-button class="ml-xs" *ngIf="userRoleType=='10'">
+                          <mat-icon>{{ menuitem.icon }}</mat-icon>
+                    </button>       
+                    <mat-menu #multi="matMenu" class="opt-menu" x-position="before">
+                       <div mat-menu-item class="head-menu grad-blue">
+                             {{ menuitem.name}}
                        </div>
-                    </mat-list-item>
-                 </mat-list>
+                       <div class="dropdown">
+                         <div *ngFor="let childitem of menuitem.children">
+                            <button mat-menu-item [routerLink]="['/'+childitem.state ]">{{ childitem.name | translate }}</button>
+                         </div>
+                      </div>
+                    </mat-menu>
+                    </span>
+                 </span> -->
+               <!-- <button appToggleFullscreen matTooltip="Fullscreen" matTooltipPosition="below" mat-icon-button>
+                  <mat-icon>fullscreen</mat-icon>
+               </button> -->
+               <!--<button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
+                  <mat-icon>message</mat-icon>
+               </button>
+               <mat-menu #user2="matMenu" class="opt-menu" x-position="after">
+                  <div mat-menu-item class="head-menu grad-blue">
+                     Message Menu
+                  </div>
+                  <button mat-menu-item>
+                  <img width="40" src="assets/images/user-1.jpg" alt="">
+                  Next Update for angular 5
+                  </button>
+                  <button mat-menu-item>
+                  <img width="40" src="assets/images/user-2.jpg" alt="">
+                  Check out our new admin theme
+                  </button>
+                  <button mat-menu-item>
+                  <img width="40" src="assets/images/user-3.jpg" alt="">
+                  Expedita quo, laboriosam officia.
+                  </button>
+                  <button mat-menu-item>
+                  <img width="40" src="assets/images/user-4.jpg" alt="">
+                  Lorem ipsum dolor sit amet consectetur.
+                  </button>
+               </mat-menu>
+                <button [mat-menu-trigger-for]="user1" mat-icon-button class="ml-xs overflow-visible">
+                  <mat-icon>reorder</mat-icon>
+                  <span class="notification-label">3</span>
+               </button> -->
+               <!-- <mat-menu #user1="matMenu" class="opt-menu" x-position="before">
+                  <div mat-menu-item class="head-menu grad-blue">
+                     User Menu
+                  </div>
+                  <button mat-menu-item>
+                     <mat-icon>show_chart</mat-icon>
+                     Charts
+                  </button>
+                  <button mat-menu-item>
+                     <mat-icon>navigation</mat-icon>
+                     Maps
+                  </button>
+                  <button mat-menu-item>
+                     <mat-icon>web</mat-icon>
+                     Calendar Settings
+                  </button>
+               </mat-menu> -->
+               <!-- <button (click)="end.toggle()" matTooltip="Notifications" matTooltipPosition="below" mat-icon-button class="ml-xs overflow-visible">
+                  <mat-icon>notifications</mat-icon> -->
+                  <!-- <span class="notification-label">2</span> -->
+                  <!-- <span *ngIf="alertCount != 0" style = "width:23px" class="notification-label"  >{{alertCount}}</span>
+               </button> -->
+               <button [mat-menu-trigger-for]="user" mat-icon-button class="ml-xs">
+                  <mat-icon>person</mat-icon>
+               </button>
+               <mat-menu #user="matMenu" class="opt-menu" x-position="before">
+                  <div mat-menu-item class="head-menu grad-blue">
+                     Settings
+                  </div>
+                  <button mat-menu-item>
+                     <mat-icon>settings</mat-icon>
+                     Setting 
+                  </button>
+                  <button mat-menu-item (click)="userprofile()">
+                     <mat-icon>account_box</mat-icon>
+                     Profile
+                  </button>
+                  <!-- <button mat-menu-item>
+                     <mat-icon>notifications_off</mat-icon>
+                     Disable notifications
+                  </button> -->
+                  <button mat-menu-item (click)="logout()">
+                     <mat-icon>exit_to_app</mat-icon>
+                     Sign Out
+                  </button>
+               </mat-menu>
+            </div>
+           </div>
+         </div>
+         <div class="vertical-menu w-100">
+         <button (click)="menuToggleFunc()" mat-icon-button class="lines-btn">
+            <mat-icon>menu</mat-icon>
+         </button>
+         <!-- <div class="search-bar" fxFlex>
+            <form class="search-form" fxShow="false" fxShow.gt-xs>
+               <mat-icon>search</mat-icon>
+               <input type="text" placeholder="Search" autofocus="true" />
+            </form>
+         </div> -->
+         <span fxFlex></span>
+         <!-- <button appToggleFullscreen mat-icon-button>
+            <mat-icon>fullscreen</mat-icon>
+         </button> -->
+         <!-- <button [mat-menu-trigger-for]="user2" mat-icon-button class="ml-xs overflow-visible">
+            <mat-icon>message</mat-icon>
+         </button>
+         <mat-menu #user2="matMenu" class="opt-menu" x-position="after">
+            <div mat-menu-item class="head-menu grad-blue">
+               Message Menu
+            </div>
+            <button mat-menu-item>
+            <img width="40" src="assets/images/user-1.jpg" alt="">
+            Next Update for angular 5
+            </button>
+            <button mat-menu-item>
+            <img width="40" src="assets/images/user-2.jpg" alt="">
+            Check out our new admin theme
+            </button>
+            <button mat-menu-item>
+            <img width="40" src="assets/images/user-3.jpg" alt="">
+            Expedita quo, laboriosam officia.
+            </button>
+            <button mat-menu-item>
+            <img width="40" src="assets/images/user-4.jpg" alt="">
+            Lorem ipsum dolor sit amet consectetur.
+            </button>
+         </mat-menu>
+         <button [mat-menu-trigger-for]="user1" mat-icon-button class="ml-xs overflow-visible">
+            <mat-icon>reorder</mat-icon>
+            <span class="notification-label">3</span>
+         </button>
+         <mat-menu #user1="matMenu" class="opt-menu" x-position="before">
+            <div mat-menu-item class="head-menu grad-blue">
+               User Menu
+            </div>
+            <button mat-menu-item>
+               <mat-icon>show_chart</mat-icon>
+               Charts
+            </button>
+            <button mat-menu-item>
+               <mat-icon>navigation</mat-icon>
+               Maps
+            </button>
+            <button mat-menu-item>
+               <mat-icon>web</mat-icon>
+               Calendar Settings
+            </button>
+         </mat-menu> -->
+         <!-- <button (click)="end.toggle()" mat-icon-button class="ml-xs overflow-visible">
+            <mat-icon>notifications</mat-icon>
+         </button> -->
+         <button [mat-menu-trigger-for]="user"  matTooltip="Person" matTooltipPosition="below" mat-icon-button class="ml-xs">
+            <mat-icon>person</mat-icon>
+         </button>
+         <mat-menu #user="matMenu" class="opt-menu" x-position="before">
+            <div mat-menu-item class="head-menu grad-blue">
+               {{fullName}}
+            </div>
+            <!--<button mat-menu-item>
+               <mat-icon>settings</mat-icon>
+               Setting 
+            </button>-->
+            <button mat-menu-item (click)="userprofile()">
+               <mat-icon>account_box</mat-icon>
+               Profile
+            </button>
+            <!-- <button mat-menu-item>
+               <mat-icon>notifications_off</mat-icon>
+               Disable notifications
+            </button> -->
+            <button mat-menu-item (click)="logout()">
+               <mat-icon>exit_to_app</mat-icon>
+               Sign Out
+            </button>
+         </mat-menu>
+          </div>
+      </mat-toolbar>
+      <!--<div class="horizontal-menu text-center">
+         <nav>
+            <ul class="main-h-list">
+               <li *ngFor="let menuitem of horizontalMenuItems.getAll()">
+                  <a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'link'">
+                  <mat-icon>{{ menuitem.icon }}</mat-icon>
+                  <span>{{ menuitem.name | translate }}</span>
+                  </a>
+                  <a [routerLink]="['/'+menuitem.state]" *ngIf="menuitem.type === 'sub'">
+                  <mat-icon>{{ menuitem.icon }}</mat-icon>
+                  <span>{{ menuitem.name | translate }}</span>
+                  </a>
+                  <ul class="dropdown" *ngIf="menuitem.type === 'sub'">
+                     <li *ngFor="let childitem of menuitem.children">
+                        <a [routerLink]="['/'+childitem.state ]">{{ childitem.name | translate }}</a>
+                        <ul class="dropdown" *ngIf="childitem.type === 'super-sub'">
+                           <li *ngFor="let subchild of childitem.subchildren">
+                              <a [routerLink]="['/'+subchild.state ]">{{subchild.name | translate}}</a>
+                           </li>
+                        </ul>
+                     </li>
+                  </ul>
+                  
+               </li>
+            </ul>
+         </nav>
+      </div>-->
+      <app-http-loader></app-http-loader>
+      <div class="body-container">
+         <router-outlet></router-outlet>
+      </div>
+      <mat-sidenav #end position="end"  mode="over" opened="false">
+         <div style="text-align: center;">Not Yet Scheduled</div>
+         <mat-tab-group [selectedIndex]="1" mat-stretch-tabs>
+             <mat-tab>
+                 <ng-template mat-tab-label>Triggered</ng-template>
+                 <div class="scroll">
+                   <mat-nav-list>
+                                             <ng-template let-item let-last="last" ngFor [ngForOf]="alertMsgTriggerType">
+                                                 <mat-list-item> 
+                                                     <h3 mat-line> {{item.applicant_name}} </h3>
+                                                     <p mat-line> {{item.lender_applicant_id}}</p>
+                                                     <p mat-line> {{item.entity_name}} - {{item.pd_status}} </p>
+                                                 </mat-list-item>
+                                             </ng-template>
+                   </mat-nav-list>
+                 </div>
+             </mat-tab>
+            <!--<mat-tab>
+               <ng-template mat-tab-label>Today</ng-template>
+               <ng-template mat-tab-label>Allocated</ng-template>
+               <div class="scroll">
+                  <mat-list class="pt-1 pb-1">
+                     <mat-list-item>
+                        <div fxLayout="column">
+                           <h2 class="ma-0">{{ today | date:'EEEE' }}</h2>
+                           <h6 class="mat-text-muted ma-0"><span>{{ today | date:'dd' }}</span>&nbsp;<span>{{ today | date:'MMMM' }}</span></h6>
+                        </div>
+                     </mat-list-item>
+                  </mat-list>
+                  <mat-nav-list>
+                     <mat-divider></mat-divider>
+                     <h3 mat-subheader class="text-uppercase font-weight-bold">Projects Stats</h3>
+                     <mat-list-item>
+                        <p class="text-mat" mat-line>Project A</p>
+                        <mat-progress-bar mat-line mode="determinate" color="warn" value="20"></mat-progress-bar>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <p class="text-mat" mat-line>Project B </p>
+                        <mat-progress-bar mat-line mode="determinate" color="accent" value="80"></mat-progress-bar>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <p class="text-mat" mat-line>Project C</p>
+                        <mat-progress-bar mat-line mode="determinate" value="30"></mat-progress-bar>
+                     </mat-list-item>
+                     <mat-divider></mat-divider>
+                     <h3 mat-subheader class="text-uppercase font-weight-bold">Todo</h3>
+                     <mat-list-item>
+                        <a mat-line href="javascript:;">Consectetur adipisicing elit. Nemo omnis.</a>
+                        <p mat-line class="mat-text-muted text-mat">2:45PM</p>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <a mat-line href="javascript:;"> Temporibus cumque cupiditate </a>
+                        <p mat-line class="mat-text-muted text-mat">3:20PM</p>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <a mat-line href="javascript:;">Libero voluptatibus harum quis accusamus</a>
+                        <p mat-line class="mat-text-muted text-mat">16:00PM</p>
+                     </mat-list-item>
+                  </mat-nav-list>
+               </div>
+            </mat-tab>-->
+            <mat-tab>
+               <ng-template mat-tab-label>Allocated</ng-template>
+               <div class="scroll">
                  <mat-nav-list>
-                    <mat-divider></mat-divider>
-                    <h3 mat-subheader class="text-uppercase font-weight-bold">Projects Stats</h3>
-                    <mat-list-item>
-                       <p class="text-mat" mat-line>Project A</p>
-                       <mat-progress-bar mat-line mode="determinate" color="warn" value="20"></mat-progress-bar>
-                    </mat-list-item>
-                    <mat-list-item>
-                       <p class="text-mat" mat-line>Project B </p>
-                       <mat-progress-bar mat-line mode="determinate" color="accent" value="80"></mat-progress-bar>
-                    </mat-list-item>
-                    <mat-list-item>
-                       <p class="text-mat" mat-line>Project C</p>
-                       <mat-progress-bar mat-line mode="determinate" value="30"></mat-progress-bar>
-                    </mat-list-item>
-                    <mat-divider></mat-divider>
-                    <h3 mat-subheader class="text-uppercase font-weight-bold">Todo</h3>
-                    <mat-list-item>
-                       <a mat-line href="javascript:;">Consectetur adipisicing elit. Nemo omnis.</a>
-                       <p mat-line class="mat-text-muted text-mat">2:45PM</p>
-                    </mat-list-item>
-                    <mat-list-item>
-                       <a mat-line href="javascript:;"> Temporibus cumque cupiditate </a>
-                       <p mat-line class="mat-text-muted text-mat">3:20PM</p>
-                    </mat-list-item>
-                    <mat-list-item>
-                       <a mat-line href="javascript:;">Libero voluptatibus harum quis accusamus</a>
-                       <p mat-line class="mat-text-muted text-mat">16:00PM</p>
-                    </mat-list-item>
+                                           <ng-template let-item let-last="last" ngFor [ngForOf]="alertMsgAllocateType">
+                                               <mat-list-item> 
+                                                   <h3 mat-line> {{item.applicant_name}} </h3>
+                                                   <p mat-line> {{item.lender_applicant_id}}</p>
+                                                   <p mat-line> {{item.entity_name}} - {{item.pd_status}} </p>
+                                               </mat-list-item>
+                                           </ng-template>
                  </mat-nav-list>
-              </div>
-           </mat-tab>-->
-           <mat-tab>
-              <ng-template mat-tab-label>Allocated</ng-template>
-              <div class="scroll">
-                <mat-nav-list>
-                                          <ng-template let-item let-last="last" ngFor [ngForOf]="alertMsgAllocateType">
-                                              <mat-list-item> 
-                                                  <h3 mat-line> {{item.applicant_name}} </h3>
-                                                  <p mat-line> {{item.lender_applicant_id}}</p>
-                                                  <p mat-line> {{item.entity_name}} - {{item.pd_status}} </p>
-                                              </mat-list-item>
-                                          </ng-template>
-                </mat-nav-list>
-                <!-- <mat-nav-list>
-                    <mat-list-item>
-                       <mat-icon mat-list-avatar class="mat-text-primary">people</mat-icon>
-                       <h4 mat-line>Social</h4>
-                       <p mat-line> 5 new members joined today</p>
-                    </mat-list-item>
-                    <mat-list-item>
-                       <mat-icon mat-list-avatar class="mat-text-warn">local_offer</mat-icon>
-                       <h4 mat-line>Promotions</h4>
-                       <p mat-line>Updated your email
-                       </p>
-                    </mat-list-item>
-                    <mat-list-item>
-                       <mat-icon mat-list-avatar class="mat-text-accent">info</mat-icon>
-                       <h4 mat-line>Updates</h4>
-                       <p mat-line> 15 new product added</p>
-                    </mat-list-item>
-                    <mat-list-item>
-                       <mat-icon mat-list-avatar class="mat-deep-purple">delete_sweep</mat-icon>
-                       <h4 mat-line> 2 order cancelled</h4>
-                       <span class="text-mat mat-text-muted" mat-line>{{ 1427207139000 | date: 'fullDate' }}</span>
-                    </mat-list-item>
-                    <mat-list-item>
-                       <mat-icon mat-list-avatar>check_circle</mat-icon>
-                       <h4 mat-line>System Scan completed</h4>
-                       <span class="text-mat mat-text-muted" mat-line>{{ 1427412725000 | date: 'fullDate' }}</span>
-                    </mat-list-item>
-                    <mat-list-item>
-                       <mat-icon mat-list-avatar>person_add</mat-icon>
-                       <h4 mat-line>4 Users connected</h4>
-                       <span class="text-mat mat-text-muted" mat-line>{{ 1428275520000 | date: 'fullDate' }}</span>
-                    </mat-list-item>
-                 </mat-nav-list> -->
-              </div>
-           </mat-tab>
-        </mat-tab-group>
-     </mat-sidenav>
-  </mat-sidenav-container>
-  <!-- Settings icon -->
- <!-- <button mat-fab color="warn" class="mat-fab-bottom-right" (click)="showSettings = true">
-     <mat-icon class="mat-24">settings</mat-icon>
-  </button>-->
-  <mat-card class="settings-panel" *ngIf="showSettings">
-     <mat-toolbar color="warn">
-        <span fxFlex>Options</span>
-        <button mat-icon-button (click)="showSettings = false">
-           <mat-icon>close</mat-icon>
-        </button>
-     </mat-toolbar>
-     <mat-card-content class="demo-checkbox">
-        <span class="mb-2 d-block"><strong>Sidebar Image</strong></span>
-        <div class="bg-img clearfix">
-           <div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-1')}">
-              <a (click)="onSelectSidebarImage('bg-1')">
-              <img src="assets/images/bg-5.jpg" alt="">
-              </a>
-           </div>
-           <div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-2')}">
-              <a (click)="onSelectSidebarImage('bg-2')">
-              <img src="assets/images/bg-2.jpg" alt="">
-              </a>
-           </div>
-           <div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-3')}">
-              <a (click)="onSelectSidebarImage('bg-3')">
-              <img src="assets/images/bg-3.jpg" alt="">
-              </a>
-           </div>
-           <div class="pb-2" [ngClass]="{'border-active' : isBgActive('bg-4')}">
-              <a (click)="onSelectSidebarImage('bg-4')">
-              <img src="assets/images/bg-4.jpg" alt="">
-              </a>
-           </div>
+                 <!-- <mat-nav-list>
+                     <mat-list-item>
+                        <mat-icon mat-list-avatar class="mat-text-primary">people</mat-icon>
+                        <h4 mat-line>Social</h4>
+                        <p mat-line> 5 new members joined today</p>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <mat-icon mat-list-avatar class="mat-text-warn">local_offer</mat-icon>
+                        <h4 mat-line>Promotions</h4>
+                        <p mat-line>Updated your email
+                        </p>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <mat-icon mat-list-avatar class="mat-text-accent">info</mat-icon>
+                        <h4 mat-line>Updates</h4>
+                        <p mat-line> 15 new product added</p>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <mat-icon mat-list-avatar class="mat-deep-purple">delete_sweep</mat-icon>
+                        <h4 mat-line> 2 order cancelled</h4>
+                        <span class="text-mat mat-text-muted" mat-line>{{ 1427207139000 | date: 'fullDate' }}</span>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <mat-icon mat-list-avatar>check_circle</mat-icon>
+                        <h4 mat-line>System Scan completed</h4>
+                        <span class="text-mat mat-text-muted" mat-line>{{ 1427412725000 | date: 'fullDate' }}</span>
+                     </mat-list-item>
+                     <mat-list-item>
+                        <mat-icon mat-list-avatar>person_add</mat-icon>
+                        <h4 mat-line>4 Users connected</h4>
+                        <span class="text-mat mat-text-muted" mat-line>{{ 1428275520000 | date: 'fullDate' }}</span>
+                     </mat-list-item>
+                  </mat-nav-list> -->
+               </div>
+            </mat-tab>
+         </mat-tab-group>
+      </mat-sidenav>
+   </mat-sidenav-container>
+   <!-- Settings icon -->
+  <!-- <button mat-fab color="warn" class="mat-fab-bottom-right" (click)="showSettings = true">
+      <mat-icon class="mat-24">settings</mat-icon>
+   </button>-->
+   <mat-card class="settings-panel" *ngIf="showSettings">
+      <mat-toolbar color="warn">
+         <span fxFlex>Options</span>
+         <button mat-icon-button (click)="showSettings = false">
+            <mat-icon>close</mat-icon>
+         </button>
+      </mat-toolbar>
+      <mat-card-content class="demo-checkbox">
+         <span class="mb-2 d-block"><strong>Sidebar Image</strong></span>
+         <div class="bg-img clearfix">
+            <div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-1')}">
+               <a (click)="onSelectSidebarImage('bg-1')">
+               <img src="assets/images/bg-5.jpg" alt="">
+               </a>
+            </div>
+            <div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-2')}">
+               <a (click)="onSelectSidebarImage('bg-2')">
+               <img src="assets/images/bg-2.jpg" alt="">
+               </a>
+            </div>
+            <div class="pb-1" [ngClass]="{'border-active' : isBgActive('bg-3')}">
+               <a (click)="onSelectSidebarImage('bg-3')">
+               <img src="assets/images/bg-3.jpg" alt="">
+               </a>
+            </div>
+            <div class="pb-2" [ngClass]="{'border-active' : isBgActive('bg-4')}">
+               <a (click)="onSelectSidebarImage('bg-4')">
+               <img src="assets/images/bg-4.jpg" alt="">
+               </a>
+            </div>
+         </div>
+         <div class="color-sidebar clearfix">
+            <div class="pb-1">
+               <mat-checkbox [(ngModel)]="sidebarBg">Sidebar Image</mat-checkbox>
+            </div>
+            <span class="mb-2 d-block"><strong>Sidebar Color</strong></span>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-default')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-default')"><i aria-hidden="true" class="color-default fa fa-circle fa-lg def"></i>
+               Default</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-green')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-green')"><i aria-hidden="true" class="color-green fa fa-circle fa-lg"></i>
+               Green</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-red')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-red')"><i aria-hidden="true" class="color-red fa fa-circle fa-lg"></i>
+               Red</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-purple')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-purple')"><i aria-hidden="true" class="color-purple fa fa-circle fa-lg"></i>
+               Purple</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-pink')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-pink')"><i aria-hidden="true" class="color-pink fa fa-circle fa-lg"></i>
+               Pink</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-blue')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-blue')"><i aria-hidden="true" class="color-blue fa fa-circle fa-lg"></i>
+               Blue</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-green-deep')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-green-deep')"><i aria-hidden="true" class="color-green-deep fa fa-circle fa-lg"></i>
+               Green Deep</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-brown')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-brown')"><i aria-hidden="true" class="color-brown fa fa-circle fa-lg"></i>
+               Brown</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-orange')}">
+               <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-orange')"><i aria-hidden="true" class="color-orange fa fa-circle fa-lg"></i>
+               Orange</a>
+            </div>
+         </div>
+         <div class="color-header clearfix">
+            <span class="mb-2 d-block"><strong>Header Color</strong></span>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-default')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-default')"><i aria-hidden="true" class="color-default fa fa-circle fa-lg def"></i>
+               Default</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-green')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-green')"><i aria-hidden="true" class="color-green fa fa-circle fa-lg"></i>
+               Green</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-red')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-red')"><i aria-hidden="true" class="color-red fa fa-circle fa-lg"></i>
+               Red</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-purple')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-purple')"><i aria-hidden="true" class="color-purple fa fa-circle fa-lg"></i>
+               Purple</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-pink')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-pink')"><i aria-hidden="true" class="color-pink fa fa-circle fa-lg"></i>
+               Pink</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-blue')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-blue')"><i aria-hidden="true" class="color-blue fa fa-circle fa-lg"></i>
+               Blue</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-green-deep')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-green-deep')"><i aria-hidden="true" class="color-green-deep fa fa-circle fa-lg"></i>
+               Green Deep</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-brown')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-brown')"><i aria-hidden="true" class="color-brown fa fa-circle fa-lg"></i>
+               Brown</a>
+            </div>
+            <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-orange')}">
+               <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-orange')"><i aria-hidden="true" class="color-orange fa fa-circle fa-lg"></i>
+               Orange</a>
+            </div>
+         </div>
+         <div class="pb-1">
+           <mat-checkbox (change)="changeMenuLayout($event.checked)">Horizontal Menu</mat-checkbox>
         </div>
-        <div class="color-sidebar clearfix">
-           <div class="pb-1">
-              <mat-checkbox [(ngModel)]="sidebarBg">Sidebar Image</mat-checkbox>
-           </div>
-           <span class="mb-2 d-block"><strong>Sidebar Color</strong></span>
-           <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-default')}">
-              <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-default')"><i aria-hidden="true" class="color-default fa fa-circle fa-lg def"></i>
-              Default</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-green')}">
-              <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-green')"><i aria-hidden="true" class="color-green fa fa-circle fa-lg"></i>
-              Green</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-red')}">
-              <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-red')"><i aria-hidden="true" class="color-red fa fa-circle fa-lg"></i>
-              Red</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-purple')}">
-              <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-purple')"><i aria-hidden="true" class="color-purple fa fa-circle fa-lg"></i>
-              Purple</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-pink')}">
-              <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-pink')"><i aria-hidden="true" class="color-pink fa fa-circle fa-lg"></i>
-              Pink</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-blue')}">
-              <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-blue')"><i aria-hidden="true" class="color-blue fa fa-circle fa-lg"></i>
-              Blue</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-green-deep')}">
-              <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-green-deep')"><i aria-hidden="true" class="color-green-deep fa fa-circle fa-lg"></i>
-              Green Deep</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-brown')}">
-              <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-brown')"><i aria-hidden="true" class="color-brown fa fa-circle fa-lg"></i>
-              Brown</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isSidebarActive('sidebar-orange')}">
-              <a href="javascript:void(0)" (click)="onSelectedSidebarColor('sidebar-orange')"><i aria-hidden="true" class="color-orange fa fa-circle fa-lg"></i>
-              Orange</a>
-           </div>
-        </div>
-        <div class="color-header clearfix">
-           <span class="mb-2 d-block"><strong>Header Color</strong></span>
-           <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-default')}">
-              <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-default')"><i aria-hidden="true" class="color-default fa fa-circle fa-lg def"></i>
-              Default</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-green')}">
-              <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-green')"><i aria-hidden="true" class="color-green fa fa-circle fa-lg"></i>
-              Green</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-red')}">
-              <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-red')"><i aria-hidden="true" class="color-red fa fa-circle fa-lg"></i>
-              Red</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-purple')}">
-              <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-purple')"><i aria-hidden="true" class="color-purple fa fa-circle fa-lg"></i>
-              Purple</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-pink')}">
-              <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-pink')"><i aria-hidden="true" class="color-pink fa fa-circle fa-lg"></i>
-              Pink</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-blue')}">
-              <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-blue')"><i aria-hidden="true" class="color-blue fa fa-circle fa-lg"></i>
-              Blue</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-green-deep')}">
-              <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-green-deep')"><i aria-hidden="true" class="color-green-deep fa fa-circle fa-lg"></i>
-              Green Deep</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-brown')}">
-              <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-brown')"><i aria-hidden="true" class="color-brown fa fa-circle fa-lg"></i>
-              Brown</a>
-           </div>
-           <div class="mb-1" [ngClass]="{'border-active' : isHeaderActive('header-orange')}">
-              <a href="javascript:void(0)" (click)="onSelectedHeaderColor('header-orange')"><i aria-hidden="true" class="color-orange fa fa-circle fa-lg"></i>
-              Orange</a>
-           </div>
-        </div>
-        <div class="pb-1">
-          <mat-checkbox (change)="changeMenuLayout($event.checked)">Horizontal Menu</mat-checkbox>
-       </div>
-        <div class="pb-1">
-           <mat-checkbox [(ngModel)]="collapseSidebar" (change)="compactSidebar = false">Collapsed Sidebar</mat-checkbox>
-        </div>
-        <div class="pb-1">
-           <mat-checkbox [(ngModel)]="compactSidebar" (change)="collapseSidebar = false">Compact Sidebar</mat-checkbox>
-        </div>
-        <div class="pb-1">
-           <mat-checkbox [(ngModel)]="boxed">Boxed Layout</mat-checkbox>
-        </div>
-        <div class="pb-1">
-           <mat-checkbox [(ngModel)]="dark" >Dark Mode</mat-checkbox>
-        </div>
-        <div class="pb-1">
-           <mat-checkbox (change)="layoutDir = (layoutDir == 'rtl' ? 'ltr' : 'rtl')" >RTL</mat-checkbox>
-        </div>
-        <div class="pb-3">
-           <mat-form-field>
-              <mat-select placeholder="Language" class="mt-1" [(ngModel)]="currentLang" #langSelect="ngModel" (ngModelChange)="translate.use(currentLang)">
-              <mat-option *ngFor="let lang of translate.getLangs()" [value]="lang">{{ lang }}</mat-option>
-              </mat-select>
-           </mat-form-field>
-        </div>
-     </mat-card-content>
-  </mat-card>
-  <!-- /Demo Purposes Only -->
-  </div>
-  
-  
\ No newline at end of file
+         <div class="pb-1">
+            <mat-checkbox [(ngModel)]="collapseSidebar" (change)="compactSidebar = false">Collapsed Sidebar</mat-checkbox>
+         </div>
+         <div class="pb-1">
+            <mat-checkbox [(ngModel)]="compactSidebar" (change)="collapseSidebar = false">Compact Sidebar</mat-checkbox>
+         </div>
+         <div class="pb-1">
+            <mat-checkbox [(ngModel)]="boxed">Boxed Layout</mat-checkbox>
+         </div>
+         <div class="pb-1">
+            <mat-checkbox [(ngModel)]="dark" >Dark Mode</mat-checkbox>
+         </div>
+         <div class="pb-1">
+            <mat-checkbox (change)="layoutDir = (layoutDir == 'rtl' ? 'ltr' : 'rtl')" >RTL</mat-checkbox>
+         </div>
+         <div class="pb-3">
+            <mat-form-field>
+               <mat-select placeholder="Language" class="mt-1" [(ngModel)]="currentLang" #langSelect="ngModel" (ngModelChange)="translate.use(currentLang)">
+               <mat-option *ngFor="let lang of translate.getLangs()" [value]="lang">{{ lang }}</mat-option>
+               </mat-select>
+            </mat-form-field>
+         </div>
+      </mat-card-content>
+   </mat-card>
+   <!-- /Demo Purposes Only -->
+   </div>
+   
+   
\ No newline at end of file