Look and feel update

src/app/app.component.ts

@@ -1,39 +1,62 @@
-import { Component, OnInit } from '@angular/core';
-import {NavigationEnd, Router} from '@angular/router';
-import {
-  trigger,
-  state,
-  style,
-  animate,
-  transition,
-  query,
-} from '@angular/animations'
+import { Component } from '@angular/core';
+import { NavigationStart, NavigationEnd, Router } from '@angular/router';
+import { Meta } from '@angular/platform-browser';
+
+import { environment } from './../environments/environment';
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
-  
+
 
 })
 export class AppComponent {
-  title = 'app';
+
+
+  loading:boolean = true;
+  baseURL:string= environment.baseURL == '' ? window.location.origin : environment.baseURL;
+  metaImage:string= this.baseURL + "/assets/icons/apple-touch-icon-180x180.png";
+  static storageKey = 'xcash-explorer-theme-preference';
+
+
   getRouteAnimation(outlet) {
-      
+
       return outlet.activatedRouteData.animation
   }
 
-  constructor(private router: Router)
-  {
+  constructor(private router: Router,  private meta: Meta) {
     // override the route reuse strategy
-    this.router.routeReuseStrategy.shouldReuseRoute = () => false;  
+    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
   }
 
-  ngOnInit() {    
-    this.router.events.subscribe((evt) => {
-      if (!(evt instanceof NavigationEnd)) {
-        return;
+
+  ngOnInit()  {
+
+    this.router.events.subscribe((event) => {
+
+      if(event instanceof NavigationStart) {
+        this.loading = true;
+      }else if(event instanceof NavigationEnd) {
+        this.loading = false;
+
+        //override default meta tags
+        this.meta.updateTag({ property: 'og:url', content: this.baseURL  });
+        this.meta.updateTag({ property: 'og:image', content: this.metaImage  });
+        this.meta.updateTag({ name: 'twitter:domain', value: this.baseURL  });
+        this.meta.updateTag({ name: 'twitter:url', value: window.location.href  });
+        this.meta.updateTag({ name: 'twitter:image', content: this.metaImage  });
       }
+
       window.scrollTo(0, 0);
     });
+
+    var theme = window.localStorage.getItem('xcash-explorer-theme-preference');
+    if (theme) {
+      let body = document.getElementsByTagName('body')[0];
+      body.classList.remove("dark-theme","light-theme","unicorn-theme","darksea-theme");   //remove theme class
+      body.classList.add(theme + "-theme");   //add selected theme
+    }
+
   }
 }

src/app/app.module.ts

@@ -8,20 +8,40 @@ import { CoreModule } from './core/core.module';
 import {HttpClientModule} from '@angular/common/http';
 import {HttpdataService} from 'app/services/http-request.service'
 import {public_address} from 'app/services/public_address.service'
+import { AuthComponent } from './auth/auth.component';
+
+
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTabsModule } from '@angular/material';
+
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
+import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
 
 
 
 @NgModule({
   declarations: [
     AppComponent,
-
+    AuthComponent
   ],
   imports: [
     BrowserModule,
     LazyLoadModule,
     CoreModule,
     BrowserAnimationsModule,
-    HttpClientModule
+    HttpClientModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    MatTabsModule,
+    CoreModule,
+    MatSidenavModule,
+    PerfectScrollbarModule,
+
   ],
   providers: [
     HttpdataService,

src/app/auth/auth.component.html

@@ -2,27 +2,38 @@
 
 <mat-sidenav-container class="container" fullscreen>
     <mat-sidenav [mode]="sideNavMode" class="sidenav" #sidenav [opened]="sideNavOpened" style="overflow: hidden;">
-      <mat-toolbar color="whitesmoke" class="mat-elevation-z4">
-          <img class="xcash_logo" alt="XCASH" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzM3NTgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDQ2LjIyODAwMSA0Ni4yMjI3MTciCiAgIGhlaWdodD0iNDYuMjIyNzE3bW0iCiAgIHdpZHRoPSI0Ni4yMjgwMDFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczM3NTIiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMzc1NSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi41ODgzNzksLTAuOTg5ODI4NTkpIgogICAgIGlkPSJsYXllcjEiPgogICAgPGcKICAgICAgIGlkPSJnMzc5MCI+CiAgICAgIDxjaXJjbGUKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZhNzQxYztzdHJva2Utd2lkdGg6MC4yNjQ1ODMzMiIKICAgICAgICAgaWQ9ImNpcmNsZTE2IgogICAgICAgICByPSI3LjcwNzMxMjEiCiAgICAgICAgIGN5PSI4LjY5NzE0MDciCiAgICAgICAgIGN4PSIxMC4yOTgzMzYiCiAgICAgICAgIGNsYXNzPSJzdDAiIC8+CiAgICAgIDxwYXRoCiAgICAgICAgIHN0eWxlPSJmaWxsOiMxMTg5YTU7c3Ryb2tlLXdpZHRoOjAuMjY0NTgzMzIiCiAgICAgICAgIGlkPSJwYXRoMTgtMyIKICAgICAgICAgZD0ibSAyMC41NjY4MTksMjQuMTAxMTk1IGMgMCw1LjY3MjY2IC00LjU5ODQ2LDcuNjk2NzMgLTEwLjI3MTEzLDcuNjk2NzMgLTQuMjU3MTQsMCAtNy43MDczMSwzLjQ1MDE2IC03LjcwNzMxLDcuNzA3MzEgMCw0LjI1NzE0IDMuNDUwMTcsNy43MDczMSA3LjcwNzMxLDcuNzA3MzEgNC4yNTcxNSwwIDcuNzA3MzIsLTMuNDUwMTcgNy43MDczMiwtNy43MDczMSAwLC01LjY3MjY3IDIuMDI5MzUsLTEwLjI3MTEzIDcuNzAyMDIsLTEwLjI3MTEzIDUuNjcyNjYsMCA3LjY5NjczLDQuNTk4NDYgNy42OTY3MywxMC4yNzExMyAwLDQuMjU3MTQgMy40NTAxNiw3LjcwNzMxIDcuNzA3MzEsNy43MDczMSA0LjI1NzE0LDAgNy43MDczMSwtMy40NTAxNyA3LjcwNzMxLC03LjcwNzMxIDAsLTQuMjU3MTUgLTMuNDUwMTcsLTcuNzA3MzEgLTcuNzA3MzEsLTcuNzA3MzEgLTUuNjcyNjcsMCAtMTAuMjcxMTMsLTIuMDI0MDcgLTEwLjI3MTEzLC03LjY5NjczIDAsLTUuNjcyNjcgNC42MDExMSwtNy42OTY3MyAxMC4yNzExMywtNy42OTY3MyA0LjI1NzE0LDAgNy43MDczMSwtMy40NTAxNyA3LjcwNzMxLC03LjcwNzMwOTggMCwtNC4yNTcxNSAtMy40NTAxNywtNy43MDczMTk5NiAtNy43MDczMSwtNy43MDczMTk5NiAtNC4yNTcxNSwwIC03LjcwNzMxLDMuNDUwMTY5OTYgLTcuNzA3MzEsNy43MDczMTk5NiAwLDUuNjcyNjU5OCAtMi4wMjY3MSwxMC4yNjg0Njk4IC03LjY5OTM4LDEwLjI2ODQ2OTggdiAwLjAwMyBjIC0yLjgzMzY5LDAgLTUuMTMyOTIsMi4yOTkyMyAtNS4xMzI5Miw1LjEzMjkyIgogICAgICAgICBjbGFzcz0ic3QxIiAvPgogICAgICA8Y2lyY2xlCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmYTc0MWM7c3Ryb2tlLXdpZHRoOjAuMjY0NTgzMzIiCiAgICAgICAgIGlkPSJjaXJjbGUyMCIKICAgICAgICAgcj0iMy4xODU1ODM0IgogICAgICAgICBjeT0iMTcuMDE1NjUyIgogICAgICAgICBjeD0iMTkuMzMxMjE5IgogICAgICAgICBjbGFzcz0ic3QwIiAvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==" />
+        <mat-toolbar class="mat-elevation-z4"  id="logo-header">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46.2 46.2" height="50" width="50" class="xcash_logo">
+            <g transform="translate(-2.6 -1)">
+              <circle r="7.7" cy="8.7" cx="10.3" class="xca0"/>
+              <path d="M20.6 24.1c0 5.7-4.6 7.7-10.3 7.7a7.7 7.7 0 107.7 7.7c0-5.7 2-10.3 7.7-10.3s7.7 4.6 7.7 10.3a7.7 7.7 0 107.7-7.7c-5.7 0-10.3-2-10.3-7.7s4.6-7.7 10.3-7.7a7.7 7.7 0 10-7.7-7.7c0 5.7-2 10.3-7.7 10.3a5.1 5.1 0 00-5.1 5.1" class="xca1" />
+              <circle r="3.2" cy="17" cx="19.3" class="xca0"/>
+            </g>
+          </svg>
           <h1 class="logo">
               Solo Delegate
           </h1>
-      </mat-toolbar>
-      <cdk-sidemenu></cdk-sidemenu>
+        </mat-toolbar>
+        <cdk-sidemenu></cdk-sidemenu>
     </mat-sidenav>
     <mat-sidenav-content style="z-index: unset;overflow: hidden;">
         <mat-drawer-container fullscreen>
             <mat-drawer mode="side" #drawer class="drawer" [opened]="matDrawerOpened" style="overflow: hidden;">
-                <mat-toolbar color="whitesmoke" class="mat-elevation-z4">
-                    <img class="xcash_logo" alt="XCASH" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgaWQ9InN2ZzM3NTgiCiAgIHZlcnNpb249IjEuMSIKICAgdmlld0JveD0iMCAwIDQ2LjIyODAwMSA0Ni4yMjI3MTciCiAgIGhlaWdodD0iNDYuMjIyNzE3bW0iCiAgIHdpZHRoPSI0Ni4yMjgwMDFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczM3NTIiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMzc1NSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi41ODgzNzksLTAuOTg5ODI4NTkpIgogICAgIGlkPSJsYXllcjEiPgogICAgPGcKICAgICAgIGlkPSJnMzc5MCI+CiAgICAgIDxjaXJjbGUKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZhNzQxYztzdHJva2Utd2lkdGg6MC4yNjQ1ODMzMiIKICAgICAgICAgaWQ9ImNpcmNsZTE2IgogICAgICAgICByPSI3LjcwNzMxMjEiCiAgICAgICAgIGN5PSI4LjY5NzE0MDciCiAgICAgICAgIGN4PSIxMC4yOTgzMzYiCiAgICAgICAgIGNsYXNzPSJzdDAiIC8+CiAgICAgIDxwYXRoCiAgICAgICAgIHN0eWxlPSJmaWxsOiMxMTg5YTU7c3Ryb2tlLXdpZHRoOjAuMjY0NTgzMzIiCiAgICAgICAgIGlkPSJwYXRoMTgtMyIKICAgICAgICAgZD0ibSAyMC41NjY4MTksMjQuMTAxMTk1IGMgMCw1LjY3MjY2IC00LjU5ODQ2LDcuNjk2NzMgLTEwLjI3MTEzLDcuNjk2NzMgLTQuMjU3MTQsMCAtNy43MDczMSwzLjQ1MDE2IC03LjcwNzMxLDcuNzA3MzEgMCw0LjI1NzE0IDMuNDUwMTcsNy43MDczMSA3LjcwNzMxLDcuNzA3MzEgNC4yNTcxNSwwIDcuNzA3MzIsLTMuNDUwMTcgNy43MDczMiwtNy43MDczMSAwLC01LjY3MjY3IDIuMDI5MzUsLTEwLjI3MTEzIDcuNzAyMDIsLTEwLjI3MTEzIDUuNjcyNjYsMCA3LjY5NjczLDQuNTk4NDYgNy42OTY3MywxMC4yNzExMyAwLDQuMjU3MTQgMy40NTAxNiw3LjcwNzMxIDcuNzA3MzEsNy43MDczMSA0LjI1NzE0LDAgNy43MDczMSwtMy40NTAxNyA3LjcwNzMxLC03LjcwNzMxIDAsLTQuMjU3MTUgLTMuNDUwMTcsLTcuNzA3MzEgLTcuNzA3MzEsLTcuNzA3MzEgLTUuNjcyNjcsMCAtMTAuMjcxMTMsLTIuMDI0MDcgLTEwLjI3MTEzLC03LjY5NjczIDAsLTUuNjcyNjcgNC42MDExMSwtNy42OTY3MyAxMC4yNzExMywtNy42OTY3MyA0LjI1NzE0LDAgNy43MDczMSwtMy40NTAxNyA3LjcwNzMxLC03LjcwNzMwOTggMCwtNC4yNTcxNSAtMy40NTAxNywtNy43MDczMTk5NiAtNy43MDczMSwtNy43MDczMTk5NiAtNC4yNTcxNSwwIC03LjcwNzMxLDMuNDUwMTY5OTYgLTcuNzA3MzEsNy43MDczMTk5NiAwLDUuNjcyNjU5OCAtMi4wMjY3MSwxMC4yNjg0Njk4IC03LjY5OTM4LDEwLjI2ODQ2OTggdiAwLjAwMyBjIC0yLjgzMzY5LDAgLTUuMTMyOTIsMi4yOTkyMyAtNS4xMzI5Miw1LjEzMjkyIgogICAgICAgICBjbGFzcz0ic3QxIiAvPgogICAgICA8Y2lyY2xlCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmYTc0MWM7c3Ryb2tlLXdpZHRoOjAuMjY0NTgzMzIiCiAgICAgICAgIGlkPSJjaXJjbGUyMCIKICAgICAgICAgcj0iMy4xODU1ODM0IgogICAgICAgICBjeT0iMTcuMDE1NjUyIgogICAgICAgICBjeD0iMTkuMzMxMjE5IgogICAgICAgICBjbGFzcz0ic3QwIiAvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==">
+                <mat-toolbar class="mat-elevation-z4"  id="logo-header-xs">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46.2 46.2" height="50" width="50" class="xcash_logo">
+                    <g transform="translate(-2.6 -1)">
+                      <circle r="7.7" cy="8.7" cx="10.3" class="xca0"/>
+                      <path d="M20.6 24.1c0 5.7-4.6 7.7-10.3 7.7a7.7 7.7 0 107.7 7.7c0-5.7 2-10.3 7.7-10.3s7.7 4.6 7.7 10.3a7.7 7.7 0 107.7-7.7c-5.7 0-10.3-2-10.3-7.7s4.6-7.7 10.3-7.7a7.7 7.7 0 10-7.7-7.7c0 5.7-2 10.3-7.7 10.3a5.1 5.1 0 00-5.1 5.1" class="xca1" />
+                      <circle r="3.2" cy="17" cx="19.3" class="xca0"/>
+                    </g>
+                  </svg>
                 </mat-toolbar>
                 <cdk-sidemenu [iconOnly]="true"></cdk-sidemenu>
             </mat-drawer>
             <mat-drawer-content style="overflow: hidden;">
 
                 <cdk-toolbar [sidenav]="sidenav" [drawer]="drawer" [sidebar]="sidenav2" [matDrawerShow]="matDrawerShow" style="z-index: 500"></cdk-toolbar>
 
-
                 <perfect-scrollbar  style="height: calc(100% - 33px);" >
                     <router-outlet></router-outlet>
                 </perfect-scrollbar>

src/app/auth/auth.component.scss

@@ -1,43 +1,26 @@
 
 @mixin auth($theme) {
-    $primary: map-get($theme, primary);
-    $accent: map-get($theme, accent);
-    $warn: map-get($theme, warn);
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
 
-
-    .sidenav{
-        //background: mat-color($primary,400);
-        background: #1189a5;
-        overflow: hidden;
-        position: relative;
-        width: 250px;
-    }
-    .drawer{
-        //background: mat-color($primary,400);
-        background: #1189a5;
-        overflow: hidden;
-        position: relative;
-        width: 80px;
-    }
-    [no-over-flow] {
-        overflow: hidden;
-    }
-    .router-outlet{
-        position: relative;padding: 0px 5px;
-    }
-    .spacer {
-        width: 100%;
-    }
-    .xcash_logo{
-        width: 26px;
-        padding-left: 4px;
-    }
-    .logo{
-        font-size: 24px;
-        font-family: Roboto, Serif;
-        font-weight:500;
-        color:#fa741c;
-        margin-top: 8px;
-        padding-left:14px;
-    }
+  .sidenav{
+    background: mat-color($primary);
+    overflow: hidden;
+    width: 250px;
+  }
+  .drawer{
+    background: mat-color($primary);
+    overflow: hidden;
+    width: 80px;
+  }
+  [no-over-flow] {
+      overflow: hidden;
+  }
+  .router-outlet{
+      position: relative;padding: 0px 5px;
+  }
+  .spacer {
+      width: 100%;
+  }
 }

src/app/auth/auth.component.ts

@@ -15,9 +15,9 @@ export class AuthComponent implements OnInit{
   @Input() isVisible : boolean = true;
   visibility = 'shown';
 
-  sideNavOpened: boolean = true;
+  sideNavOpened: boolean = false;
   matDrawerOpened: boolean = false;
-  matDrawerShow: boolean = true;
+  matDrawerShow: boolean = false;
   sideNavMode: string = 'side';
 
   ngOnChanges() {
@@ -40,14 +40,14 @@ export class AuthComponent implements OnInit{
 	toggleView() {
 		if (this.media.isActive('gt-md')) {
             this.sideNavMode = 'side';
-            this.sideNavOpened = true;
+            this.sideNavOpened = false;
             this.matDrawerOpened = false;
-            this.matDrawerShow = true;
+            this.matDrawerShow = false;
         } else if(this.media.isActive('gt-xs')) {
             this.sideNavMode = 'side';
             this.sideNavOpened = false;
-            this.matDrawerOpened = true;
-            this.matDrawerShow = true;
+            this.matDrawerOpened = false;
+            this.matDrawerShow = false;
         } else if (this.media.isActive('lt-sm')) {
             this.sideNavMode = 'over';
             this.sideNavOpened = false;

src/app/auth/auth.module.ts

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { AuthComponent } from './auth.component';
 import { RouterModule } from '@angular/router';
 
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -13,7 +12,7 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
 import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
 
-import { appRoutes } from './lazyloader.routes';
+//import { appRoutes } from './lazyloader.routes';
 
 const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
     suppressScrollX: true
@@ -25,7 +24,7 @@ import { CoreModule } from '../core/core.module';
 @NgModule({
     imports: [
         CommonModule,
-        RouterModule.forChild(appRoutes),
+        //RouterModule.forChild(appRoutes),
         MatToolbarModule,
         MatButtonModule,
         MatIconModule,
@@ -34,7 +33,6 @@ import { CoreModule } from '../core/core.module';
         MatSidenavModule,
         PerfectScrollbarModule,
     ],
-    declarations: [AuthComponent],
     providers: [
         {
             provide: PERFECT_SCROLLBAR_CONFIG,

src/app/core/core.module.ts

@@ -9,7 +9,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatTabsModule } from '@angular/material';
 import { RouterModule } from '@angular/router';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar';
@@ -19,9 +18,11 @@ import { ToolbarComponent } from './toolbar/toolbar.component';
 import { SearchBarComponent } from './search-bar/search-bar.component';
 import { FullscreenComponent } from './fullscreen/fullscreen.component';
 import {
-    MatSidenavModule,
-    MatSliderModule,
-    MatProgressBarModule,
+  MatMenuModule,
+  MatTabsModule,
+  MatSidenavModule,
+  MatSliderModule,
+  MatProgressBarModule,
 } from '@angular/material';
 
 
@@ -55,6 +56,7 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
         MatTabsModule,
         MatSliderModule,
         MatProgressBarModule,
+        MatMenuModule
     ],
 
 

src/app/core/sidemenu-item/sidemenu-item.component.scss

@@ -8,6 +8,10 @@
 }
 
 @mixin sidemenu-item($theme,$icon-size) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+
     .sidenav-dropdown-indicator {
         transition: transform .25s;
         &.indicateOpen {
@@ -17,15 +21,15 @@
     mat-nav-list {
         overflow: hidden;
         padding-top: 0px;
-        
+
     }
     .primary{
-        transition: max-height .4s cubic-bezier(.35, 0, .25, 1);  
+        transition: max-height .4s cubic-bezier(.35, 0, .25, 1);
         padding-top: 0px;
     }
     .secondaryMenu {
         background:  mat-color($primary, 500);
-        transition: max-height .4s cubic-bezier(.35, 0, .25, 1);  
+        transition: max-height .4s cubic-bezier(.35, 0, .25, 1);
         padding-top: 0px;
     }
 
@@ -39,6 +43,5 @@
         font-size: 14px;
     }
 
-
-}
 
+}