@chat21/chat21-ionic 3.0.60-rc6 → 3.0.61-rc2

package/src/app/components/conversation-info/info-content/info-content.component.html

@@ -10,9 +10,9 @@
     [groupDetail]="groupDetail">
   </app-info-group>
 
-  <app-info-support-group *ngIf="panelType === 'support-group-panel'"
+  <!-- <app-info-support-group *ngIf="panelType === 'support-group-panel'"
     [urlConversationSupportGroup]="urlConversationSupportGroup">
-  </app-info-support-group>
+  </app-info-support-group> -->
 
 
 </ion-content>

package/src/app/components/ddp-header/ddp-header.component.html

@@ -1,24 +1,31 @@
+<ion-toolbar style="height:60px" [ngClass]="{'bottom-border-on-mobile':IS_ON_MOBILE_DEVICE === true }">
 
-<ion-toolbar>
-  
-  <ion-buttons slot="start">
+  <ion-buttons *ngIf="IS_ON_MOBILE_DEVICE === true || supportMode === false" slot="start" style="height:60px">
     <ion-button ion-button icon-only fill="clear" (click)="onOpenProfileInfo($event)">
       <ion-icon slot="icon-only" name="reorder-three-outline"></ion-icon>
     </ion-button>
   </ion-buttons>
 
   <ion-title>
-    <img src="assets/chat21-logo.svg" class="header-logo" alt="header-logo">
+    <!-- <img src="assets/chat21-logo.svg" class="header-logo" alt="header-logo"> -->
     <div *ngIf="numberOpenConv > 0" class="number-open-conv">({{numberOpenConv}})</div>
   </ion-title>
 
   <ion-buttons slot="end">
 
-    <ion-button *ngIf="supportMode" ion-button fill="clear" (click)="onOpenContactsDirectory($event)">
-      <ion-icon slot="icon-only" name="create-outline"></ion-icon>
+    <ion-button *ngIf="archived_btn" ion-button fill="clear" (click)="onClickArchivedConversation()">
+      <ion-icon slot="icon-only" name="file-tray-full-outline"></ion-icon>
+      <!-- <ion-icon name="file-tray-stacked-outline"></ion-icon> -->
+      <!-- <ion-icon name="file-tray-full-outline"></ion-icon> -->
     </ion-button>
 
-    <!-- <button ion-button icon-only (click)="onOpenArchivedConversationsPage()">
+    <ion-button *ngIf="teammates_btn" ion-button fill="clear" (click)="onOpenContactsDirectory($event)">
+      <!-- <ion-icon slot="icon-only" name="create-outline"></ion-icon> -->
+      <ion-icon slot="icon-only" name="people-outline"></ion-icon>
+
+    </ion-button>
+
+    <!--   <button ion-button icon-only (click)="onOpenArchivedConversationsPage()">
       <span class="material-icons">history</span>
     </button>
 

package/src/app/components/ddp-header/ddp-header.component.scss

@@ -23,4 +23,8 @@ ion-title img {
 
 .header-logo {
     margin-top: 5px;
+}
+
+.bottom-border-on-mobile {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }

package/src/app/components/ddp-header/ddp-header.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-
+import { EventsService } from 'src/app/services/events-service';
 @Component({
   selector: 'app-ddp-header',
   templateUrl: './ddp-header.component.html',
@@ -8,11 +8,26 @@ import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 export class DdpHeaderComponent implements OnInit {
   @Input() numberOpenConv: number;
   @Input() supportMode: boolean;
+  @Input() archived_btn: boolean;
+  @Input() teammates_btn: boolean;
   @Output() openContactsDirectory = new EventEmitter();
   @Output() openProfileInfo = new EventEmitter();
+  IS_ON_MOBILE_DEVICE: boolean;
 
   constructor(
-  ) { }
+    public events: EventsService,
+  ) { 
+    this.isOnMobileDevice()
+  }
+
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false;
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true;
+    }
+    console.log('[DDP-HEADER] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE;
+  }
 
   ngOnInit() {
     // console.log('DDP HEADER SUPPORT MODE ', this.supportMode)
@@ -30,4 +45,8 @@ export class DdpHeaderComponent implements OnInit {
   }
   // END @Output() //
 
+  onClickArchivedConversation() {
+    this.events.publish('profileInfoButtonClick:changed', 'displayArchived');
+  }
+
 }

package/src/app/components/project-item/project-item.component.html

@@ -32,29 +32,50 @@
             </div>
 
             <ng-template #conversationsInQueue>
-              <span>{{ unservedRequestCount }} {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}</span>
+              <span *ngIf="unservedRequestCount > 1">
+                {{ unservedRequestCount }}
+                {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}
+              </span>
+              <span *ngIf="unservedRequestCount === 1">
+                {{ unservedRequestCount }}
+                {{translationMap?.get('CONVERSATION_IN_QUEUE') }}
+              </span>
+              <span *ngIf="unservedRequestCount === 0">
+                {{translationMap?.get('NO_CONVERSATION_IN_QUEUE') }}
+
+              </span>
             </ng-template>
 
 
             <div class="flex-child-right">
-              <div class="project-name-project-for-panel" [tooltip]="conversationsInQueueOnProjectName" [options]="tooltipOptions"
-                placement="top" content-type="template" (click)="openUnservedConvs()">
+              <div class="project-name-project-for-panel" [ngClass]="{'project-name-project-for-panel-on-desktop': IS_ON_MOBILE_DEVICE === false}" [tooltip]="conversationsInQueueOnProjectName"
+                [options]="tooltipOptions" placement="top" content-type="template" (click)="openUnservedConvs()">
                 <div class="project---name"> {{ project?.id_project?.name }} </div>
               </div>
               <ng-template #conversationsInQueueOnProjectName>
-                <span>{{ unservedRequestCount }} {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}</span>
+                <span *ngIf="unservedRequestCount > 1">
+                  {{ unservedRequestCount }}
+                  {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}
+                </span>
+                <span *ngIf="unservedRequestCount === 1">
+                  {{ unservedRequestCount }}
+                  {{translationMap?.get('CONVERSATION_IN_QUEUE') }}
+                </span>
+                <span *ngIf="unservedRequestCount === 0">
+                  {{translationMap?.get('NO_CONVERSATION_IN_QUEUE') }}
+                </span>
               </ng-template>
 
               <div class="availabily-and-busy-wpr">
                 <div class="availabily---wpr" tooltip="{{avaialble_status_for_tooltip}}" [options]="tooltipOptions">
-                  <div class="onoffswitch" 
+                  <div class="onoffswitch"
                     (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
-                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="switchavailableunavailablestatus"
-                      tabindex="0" [checked]="project?.ws_projct_user_available">
+                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
+                      id="switchavailableunavailablestatus" tabindex="0" [checked]="project?.ws_projct_user_available">
                     <label class="onoffswitch-label" for="switchavailableunavailablestatus"></label>
                   </div>
                 </div>
-              
+
 
                 <!-- (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" -->
                 <span *ngIf="project?.ws_projct_user_available === true" class="availibility-status-text"
@@ -66,7 +87,9 @@
                   [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
                   {{translationMap?.get('Unavailable')}}
                 </span>
-                <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true">
+
+                <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true" tooltip="  {{translationMap?.get('Busy')}}"
+                [options]="tooltipOptions" placement="top" >
                   <!-- <span class="material-icons project-item--isBusy-icon">
                       access_time
                     </span> -->
@@ -81,18 +104,19 @@
                     </g>
                   </svg>
                 </div>
-                <span *ngIf="project?.ws_projct_user_isBusy === true"
+                <!-- <span *ngIf="project?.ws_projct_user_isBusy === true"
                   class="project-item--isBusy-busy-text text-pulse-animation">
                   {{translationMap?.get('Busy')}}
-                </span>
+                </span> -->
               </div>
             </div>
 
-            <div class="flex-child-view-all-convs">
+            <div *ngIf="IS_ON_MOBILE_DEVICE === true" class="flex-child-view-all-convs">
               <div class="view-all-convs-icon-wpr" style="cursor: pointer;" [tooltip]="viewAllConvs"
                 [options]="tooltipOptions" placement="top" content-type="template">
 
-                <ion-button ion-button fill="clear" class="open-unserved-convs-btn" (click)="openUnservedConvsAndGoToProjectList()">
+                <ion-button ion-button fill="clear" class="open-unserved-convs-btn"
+                  (click)="openUnservedConvsAndGoToProjectList()">
 
                   <span class="push-icon-and-list-wpr">
                     <!--   <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg"
@@ -131,7 +155,6 @@
               </div>
               <ng-template #viewAllConvs>
                 <span>
-
                   {{translationMap?.get('CHANGE_PINNED_PROJECT') }}</span>
               </ng-template>
             </div>

package/src/app/components/project-item/project-item.component.scss

@@ -20,10 +20,7 @@
 // .main-content-project-for-panel:hover {
 //     background-color: rgb(244, 243, 244);
 // }
-.container-project-for-panel {
-    padding: 0px !important;
-    width: 296px;
-}
+
 
 /* Hide scrollbar for Chrome, Safari and Opera */
 .main-content-projects-for-panel::-webkit-scrollbar {
@@ -218,24 +215,38 @@
     }
 }
 
+.container-project-for-panel {
+    padding: 0px !important;
+    width: 296px;
+}
+
 .flex-container-project-for-panel {
     display: flex;
     width: 100%;
     justify-content: center;
     align-items: center;
-    position: relative;
+    // position: relative;
     // cursor: pointer;
     -moz-transition: all 0.2s ease-in;
     -o-transition: all 0.2s ease-in;
     -webkit-transition: all 0.2s ease-in;
     transition: all 0.2s ease-in;
-    height: 60px;
+    height: 64px;
 }
 
 .flex-container:hover {
     background-color: rgba(200, 200, 200, 0.2);
 }
 
+.flex-child-right {
+    flex: 1;
+    padding: 18px 0px;
+    // width: 227px;
+    // width: 207px;
+    height: 100%;
+}
+
+
 .flex-child-left {
     // flex: 0 0 20%;
     width: 60px;
@@ -245,14 +256,6 @@
 }
 // border: 2px solid yellow;
 
-.flex-child-right {
-    flex: 1;
-    padding: 18px 0px;
-    // width: 227px;
-    width: 207px;
-    height: 100%;
-}
-
 .flex-child-view-all-convs {
     width: 40px;
     text-align: center;
@@ -262,6 +265,18 @@
     margin-right: 10px;
 }
 
+@media (max-width: 768px) {
+    .container-project-for-panel {
+        width: 100%;
+    }
+    .flex-child-view-all-convs {
+        margin-right: 20px;
+    }
+}
+
+
+
+
 .status--icon-project-for-panel {
     width: 13px;
     height: 13px;
@@ -296,7 +311,7 @@
     color: #1e2129;
     font-weight: 400;
     margin-left: 10px;
-    width: 185px !important;
+    width: 185px ;
     // width: 220px !important;
     white-space: nowrap !important;
     overflow: hidden !important;
@@ -308,6 +323,11 @@
     cursor: pointer;
 }
 
+
+.project-name-project-for-panel-on-desktop {
+    width: 217px
+}
+
 // .project-name-project-for-panel:hover span {
 //     color: rgba(0, 0, 0, 0.35);
 //     // display: none;

package/src/app/components/project-item/project-item.component.ts

@@ -17,6 +17,8 @@ import { AppConfigProvider } from 'src/app/services/app-config';
   styleUrls: ['./project-item.component.scss'],
 })
 export class ProjectItemComponent implements OnInit {
+  private logger: LoggerService = LoggerInstance.getInstance();
+
   @Output() projectIdEvent = new EventEmitter<string>()
   @Output() openUnsevedConvsEvent = new EventEmitter<any>()
 
@@ -29,7 +31,7 @@ export class ProjectItemComponent implements OnInit {
   ROLE_IS_AGENT: boolean;
   currentUserId: string;
   public translationMap: Map<string, string>;
-  private logger: LoggerService = LoggerInstance.getInstance();
+ 
   window_width_is_60: boolean;
   newInnerWidth: any;
   avaialble_status_for_tooltip: string;
@@ -42,7 +44,7 @@ export class ProjectItemComponent implements OnInit {
     'hideDelayAfterClick': 3000,
     'hide-delay': 200
   };
-
+  IS_ON_MOBILE_DEVICE: boolean;
   constructor(
     public wsService: WebsocketService,
     public appStorageService: AppStorageService,
@@ -59,9 +61,20 @@ export class ProjectItemComponent implements OnInit {
     this.translations();
     this.listenToPostMsgs();
     this.onInitWindowWidth();
+
+    this.isOnMobileDevice()
     // console.log('[PROJECT-ITEM] - on INIT')
   }
 
+  isOnMobileDevice() {
+    this.IS_ON_MOBILE_DEVICE = false;
+    if (/Android|iPhone/i.test(window.navigator.userAgent)) {
+      this.IS_ON_MOBILE_DEVICE = true;
+    }
+    console.log('[PROJECT-ITEM] IS_ON_MOBILE_DEVICE', this.IS_ON_MOBILE_DEVICE)
+    return this.IS_ON_MOBILE_DEVICE;
+  }
+
   openUnservedConvs() {
     this.openUnsevedConvsEvent.emit('notificationsorprjctbtn')
   }
@@ -117,6 +130,8 @@ export class ProjectItemComponent implements OnInit {
       'Busy',
       'VIEW_ALL_CONVERSATIONS',
       'CONVERSATIONS_IN_QUEUE',
+      'CONVERSATION_IN_QUEUE',
+      'NO_CONVERSATION_IN_QUEUE',
       'PINNED_PROJECT',
       'CHANGE_PINNED_PROJECT',
       "CHANGE_TO_YOUR_STATUS_TO_AVAILABLE",
@@ -208,8 +223,6 @@ export class ProjectItemComponent implements OnInit {
       this.logger.log('[PROJECT-ITEM] - user_role ', user_role)
       this.projectIdEvent.emit(project.id_project._id)
 
-
-
       if (user_role === 'agent') {
         this.ROLE_IS_AGENT = true;
 

package/src/app/components/sidebar/sidebar.component.html

@@ -0,0 +1,210 @@
+<!-- *ngIf="project"  -->
+<div class="logo" style="background-color:#1e2129!important; padding-bottom: 5px;min-height: 60px;    width: 60px;">
+  <a class="logo-img-wpr" [ngClass]="{'small-sidebar-logo-img-wpr' : SIDEBAR_IS_SMALL === true }">
+    <div class="logo-img" (click)="goToHome()" style="cursor: pointer;">
+      <img class="small-sidebar__logo" src="assets/tiledesk-solo-logo.png" />
+    </div>
+  </a>
+</div>
+
+<div class="sidebar-wrapper">
+  <!-- // NK start NEW: AVATAR ON THE SIDEBAR  -->
+  <div class="user tiledesk-nav-user" [ngClass]="{'small-sidebar-tiledesk-nav-user' : SIDEBAR_IS_SMALL === true }"
+    fxlayout="column" style="flex-direction: column; box-sizing: border-box; display: flex;">
+    <div class="h3 username" style="font-size: 16px;font-weight: 400;margin-top: 15px; margin-bottom: 5px;"
+      [ngClass]="{'small-sidebar-userfullname' : SIDEBAR_IS_SMALL === true }">
+
+      {{ user?.firstname }} {{ user?.lastname }}
+    </div>
+    <div class="h5 email hint-text mt-8"
+      style="color: rgba(255,255,255,.5)!important;font-size: 13px;margin-top: 0px!important;font-weight: 400;"
+      [ngClass]="{'small-sidebar-email' : SIDEBAR_IS_SMALL === true }">
+      {{ user?.email }}
+    </div>
+
+
+    <div id="sidebaravatar-img-wpr" class="avatar-container tiledesk-nav-avatar" (click)="openUserDetailSidePanel()"
+      style="cursor: pointer;" [ngClass]="{'small-sidebar-avatar' : SIDEBAR_IS_SMALL === true }">
+      
+      <img id="sidebaravatar-img" class="sidebar-avatar" [src]="photo_profile_URL" onerror="this.src='assets/images/no_image_user.png'" />
+
+
+      <!-- matTooltipClass="custom-mat-tooltip" matTooltip="{{ tooltip_text_for_availability_status}}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100" -->
+      <!-- (click)="changeAvailabilityState(IS_AVAILABLE = !IS_AVAILABLE)"  -->
+      <div id="sidebaravatar-status-icon" class="status-icon"
+        [ngClass]="{'is-user-online' : IS_AVAILABLE === true, 'is-user-offline' : IS_AVAILABLE === false, 'small-sidebar-status-icon' : SIDEBAR_IS_SMALL === true  }">
+      </div>
+
+    </div>
+    <!-- CAMERA ICONS OVER THE AVATAR -->
+    <!--  [ngClass]="{'hover-effect' : isOverAvar}"  -->
+    <!-- <i class="material-icons is-over-camera"
+      [ngClass]="{'small-sidebar-camera-icon' : SIDEBAR_IS_SMALL === true, 'is-over-camera-decrease-top':IS_BUSY === true }">
+      camera_alt
+    </i> -->
+
+
+    <!-- matTooltipClass="custom-mat-tooltip" matTooltip="{{ 'Busy' | translate }}" #tooltip="matTooltip"  matTooltipPosition='right' matTooltipHideDelay="100" -->
+    <div id="sidebaravatar-isbusy-icon-wpr" class="sidebar--isBusy-icon-wpr" *ngIf="IS_BUSY === true" style="cursor:pointer">
+      <span id="sidebaravatar-isbusy-icon" class="material-icons sidebar-is-busy-icon">
+        access_time
+      </span>
+    </div>
+  </div>
+
+  <div class="nav-container">
+    <!-- [ngClass]="{'is-desktop-menu' : IS_MOBILE_MENU === false, 'is-mobile-menu' : IS_MOBILE_MENU === true  }" -->
+    <ul style="padding-bottom: 65px;" class="nav">
+
+      <!-- ------------------------------------------- -->
+      <!-- CHAT  -->
+      <!-- ------------------------------------------- -->
+      <li class="item-active" style="cursor: unset;" matTooltipClass="custom-mat-tooltip" matTooltip="Chat"
+        #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">chat</i>
+        </a>
+      </li>
+
+      <!-- ------------------------------------------- -->
+      <!-- HOME  -->
+      <!-- ------------------------------------------- -->
+      <li (click)="goToHome()" matTooltip="Home" #tooltip="matTooltip" matTooltipPosition='right'
+        matTooltipHideDelay="100" matTooltipClass="custom-mat-tooltip">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">
+            home
+          </i>
+        </a>
+      </li>
+
+      <!-- ------------------------------------------- -->
+      <!-- REQUESTS (VISITORS)  -->
+      <!-- ------------------------------------------- -->
+      <li (click)="goToConversations()"
+         matTooltipClass="custom-mat-tooltip" matTooltip="{{ conversations_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">forum</i>
+        </a>
+      </li>
+
+      <!-- ------------------------------------------- -->
+      <!-- CONTACTS (LEADS)  -->
+      <!-- ------------------------------------------- -->
+      <li (click)="goToContacts()"
+      matTooltipClass="custom-mat-tooltip" matTooltip="{{ contacts_lbl }}" #tooltip="matTooltip" matTooltipPosition='right'  matTooltipHideDelay="100">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">contacts</i>
+        </a>
+      </li>
+
+      <!-- ------------------------------------------- -->
+      <!-- APPS  -->
+      <!-- ------------------------------------------- -->
+      <ng-container *ngIf="isVisibleAPP && USER_ROLE !== 'agent'">
+        <li (click)="goToAppStore()"
+        matTooltipClass="custom-mat-tooltip" matTooltip="{{ apps_lbl }}" #tooltip="matTooltip" matTooltipPosition='right'  matTooltipHideDelay="100" >
+          <a class="customAncor">
+            <i class="material-icons sidebar-icons">apps</i>
+          </a>
+        </li>
+      </ng-container>
+
+      <!-- ------------------------------------------- -->
+      <!-- ANALYTICS -->
+      <!-- ------------------------------------------- -->
+      <ng-container *ngIf="isVisibleANA && USER_ROLE !== 'agent'">
+        <li (click)="goToAnalytics()" 
+        matTooltipClass="custom-mat-tooltip" matTooltip="{{ analytics_lbl }}"  #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+          <a class="customAncor">
+            <i class="material-icons sidebar-icons">trending_up</i>
+          </a>
+        </li>
+      </ng-container>
+
+      <!-- ------------------------------------------- -->
+      <!-- ACTIVITIES -->
+      <!-- ------------------------------------------- -->
+      <ng-container *ngIf="isVisibleACT">
+        <li *ngIf="USER_ROLE !== 'agent'" (click)="goToActivities()" 
+        matTooltipClass="custom-mat-tooltip" matTooltip="{{ activities_lbl }}" #tooltip="matTooltip" matTooltipPosition='right' matTooltipHideDelay="100">
+          <a class="customAncor">
+            <i class="material-icons sidebar-icons">assignment</i>
+          </a>
+        </li>
+      </ng-container>
+
+
+      <!-- ------------------------------------------- -->
+      <!-- REQUESTS HISTORY -->
+      <!-- ------------------------------------------- -->
+      <li (click)="goToHistory()" 
+        matTooltipClass="custom-mat-tooltip" matTooltip="{{ history_lbl }}"  #tooltip="matTooltip"   matTooltipPosition='right' matTooltipHideDelay="100">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">history</i>
+        </a>
+      </li>
+
+      <!-- ------------------------------------------- -->
+      <!-- SETTINGS -->
+      <!-- ------------------------------------------- -->
+      <li *ngIf="USER_ROLE !== 'agent'" (click)="goToSettings_CannedResponses()"
+      matTooltipClass="custom-mat-tooltip" matTooltip="{{ settings_lbl }}"  #tooltip="matTooltip"   matTooltipPosition='right' matTooltipHideDelay="100">
+        <a class="customAncor">
+          <i class="material-icons sidebar-icons">settings</i>
+        </a>
+      </li>
+
+
+      <!-- [_prjct_profile_name]="_prjct_profile_name" [plan_subscription_is_active]="plan_subscription_is_active"
+  [plan_name]="plan_name"
+  [plan_type]="plan_type"
+  [isVisiblePAY]="isVisiblePAY"
+  [prjct_name]="prjct_name" -->
+  <!-- HAS_CLICKED_OPEN_USER_DETAIL {{ HAS_CLICKED_OPEN_USER_DETAIL }} -->
+  <!-- [HAS_CLICKED_OPEN_USER_DETAIL]='HAS_CLICKED_OPEN_USER_DETAIL' -->
+  <!-- tabindex="-1"  style="z-index: 20001;"  -->
+
+
+  <!-- <app-sidebar-user-details    
+  (onCloseUserDetailsSidebar)='onCloseUserDetailsSidebar($event)'>
+</app-sidebar-user-details> -->
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    </ul>
+  </div>
+</div>

package/src/app/components/sidebar/sidebar.component.scss

@@ -0,0 +1,11 @@
+::ng-deep .custom-mat-tooltip {
+  background-color: #2d323e;
+  font-size: 12px;
+}
+
+.sidebar-is-busy-icon {
+  font-size: 14px;
+  color: #feb92c;
+  background-color: #2d323e;
+  border-radius: 50%;
+}

package/src/app/components/sidebar/sidebar.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SidebarComponent ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});