@chat21/chat21-ionic 3.0.79-rc.1 → 3.0.79-rc.3

package/src/app/chatlib/conversation-detail/ion-conversation-detail/ion-conversation-detail.component.ts

@@ -1,3 +1,4 @@
+import { MessageModel } from 'src/chat21-core/models/message';
 import { ConversationContentComponent } from '../conversation-content/conversation-content.component';
 import { ChangeDetectorRef, Component, Input, OnInit, Output, EventEmitter, SimpleChange, SimpleChanges } from '@angular/core';
 
@@ -13,6 +14,8 @@ import { TiledeskAuthService } from 'src/chat21-core/providers/tiledesk/tiledesk
 import { TranslateService } from '@ngx-translate/core';
 import * as moment from 'moment';
 import { AppConfigProvider } from 'src/app/services/app-config';
+import { ModalController } from '@ionic/angular';
+import { CreateCannedResponsePage } from 'src/app/pages/create-canned-response/create-canned-response.page';
 @Component({
   selector: 'ion-conversation-detail',
   templateUrl: './ion-conversation-detail.component.html',
@@ -61,6 +64,7 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     public tiledeskAuthService: TiledeskAuthService,
     private translate: TranslateService,
     public appConfigProvider: AppConfigProvider,
+    public modalController: ModalController,
   ) {
     super(cdref, uploadService)
 
@@ -160,4 +164,24 @@ export class IonConversationDetailComponent extends ConversationContentComponent
     // console.log('[CONVS-DETAIL][ION-CONVS-DETAIL] - trackByFn item', item)
     return item.uid || index;
   }
+
+
+  async presentCreateCannedResponseModal(message: MessageModel): Promise<any> {
+    this.logger.log('[BUBBLE-MESSAGE] PRESENT CREATE CANNED RESPONSE MODAL ')
+    const attributes = {
+       message: message,
+    }
+    const modal: HTMLIonModalElement = await this.modalController.create({
+      component: CreateCannedResponsePage,
+      componentProps: attributes,
+      swipeToClose: false,
+      backdropDismiss: false,
+    })
+    modal.onDidDismiss().then((dataReturned: any) => {
+      // 
+      this.logger.log('[BUBBLE-MESSAGE] ', dataReturned.data)
+    })
+
+    return await modal.present()
+  }
 }

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.html

@@ -43,10 +43,6 @@
 
     <!-- [tooltip]="timeTooltipLeft" [options]="tooltipOptions" placement="left" content-type="template" (click)="handleTooltipEvents($event)" -->
     <div *ngIf="message?.text">
-      <span class="message-date"> {{message.timestamp | date:'HH:mm' }} </span>
-      <!-- <ng-template #timeTooltipLeft>
-        <span> {{message.timestamp | amCalendar }} </span>
-      </ng-template> -->
 
       <chat-text *ngIf="message?.type !=='html'"
         [text]="message?.text" 
@@ -60,20 +56,6 @@
         [htmlText]="message?.text">
       </chat-html>
 
-      <ng-container *ngIf="areVisibleCAR && supportMode">
-        <ion-button shape="round" size="small" class="btn-add-msg canned" ion-button fill="clear"
-          (click)="presentCreateCannedResponseModal()" tooltip="{{addAsCannedResponseTooltipText}}"
-          [options]="tooltipOptions" placement="bottom">
-          <ion-icon slot="icon-only" name="flash-outline" style="font-size: 1em;"> </ion-icon>
-        </ion-button>
-      </ng-container>
-      <!-- <ng-container *ngIf="supportMode">
-        <ion-button shape="round" size="small" class="btn-add-msg emoji" ion-button fill="clear"
-          (click)="presentEmojiiModal()" tooltip="{{addAsCannedResponseTooltipText}}"
-          [options]="tooltipOptions" placement="bottom">
-          <ion-icon slot="icon-only" name="happy-outline" style="font-size: 1em;"> </ion-icon>
-        </ion-button>
-      </ng-container> -->
     </div>
   </div>
 

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.scss

@@ -48,16 +48,7 @@
 
 }
 // > .button-native
-.btn-add-msg {
-    border-radius: 50%;
-    --padding-end: 7px;
-    --padding-start: 7px;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6);
-
-    ion-icon{
-        font-size: 1.2em;
-    }
-}
+
 
 
 

package/src/app/chatlib/conversation-detail/message/bubble-message/bubble-message.component.ts

@@ -21,15 +21,13 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
   @Input() fontColor: string;
   @Input() fontSize: string;
   @Input() fontFamily: string;
-  @Input() areVisibleCAR: boolean;
-  @Input() supportMode: boolean;
   @Output() onBeforeMessageRender = new EventEmitter();
   @Output() onAfterMessageRender = new EventEmitter();
   @Output() onElementRendered = new EventEmitter<{element: string, status: boolean}>();
+  
   isImage = isImage;
   isFile = isFile;
   isFrame = isFrame;
-  @Input() addAsCannedResponseTooltipText : string;
   public browserLang: string;
 
   tooltipOptions = {
@@ -196,25 +194,6 @@ export class BubbleMessageComponent implements OnInit, OnChanges {
     this.onElementRendered.emit({element: event.element, status: event.status})
   }
 
-  async presentCreateCannedResponseModal(): Promise<any> {
-    this.logger.log('[BUBBLE-MESSAGE] PRESENT CREATE CANNED RESPONSE MODAL ')
-    const attributes = {
-       message: this.message,
-    }
-    const modal: HTMLIonModalElement = await this.modalController.create({
-      component: CreateCannedResponsePage,
-      componentProps: attributes,
-      swipeToClose: false,
-      backdropDismiss: false,
-    })
-    modal.onDidDismiss().then((dataReturned: any) => {
-      // 
-      this.logger.log('[BUBBLE-MESSAGE] ', dataReturned.data)
-    })
-
-    return await modal.present()
-  }
-
 
   // printMessage(message, messageEl, component) {
   //   const messageOBJ = { message: message, sanitizer: this.sanitizer, messageEl: messageEl, component: component}

package/src/app/chatlib/conversation-detail/message/message-attachment/message-attachment.component.scss

@@ -1,10 +1,8 @@
 #buttons-in-message {
     text-align: left;
     display: block; 
-    margin-top: -6px;
-    margin-bottom: 5px;
     height: auto;
-    padding-left: 8px;
+    margin: 0px 20px 5px 10px;
 
     .div-button {
         display: inline-block;

package/src/app/chatlib/list-conversations-component/ion-list-conversations/ion-list-conversations.component.scss

@@ -112,6 +112,7 @@ ion-item {
         }
         
         .conversation_message {
+            margin: 5px 0px;
             p {
                 color: #6e6f73; //#3c4858;
                 font-size: 15px;

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.html

@@ -10,8 +10,7 @@
 
       <div *ngIf="conversationAvatar" class="avatar-and-typing-wpr" [ngClass]="{'mobile': isMobile}">
         <!-- [ngStyle] = "{ 'left': platformName === 'ios' ? '55px' : ''  }" -->
-        <div class="avatar-container" style="cursor: pointer"
-          [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
+        <div class="avatar-container" [ngClass]="{ 'avatar-container-ios': platformName === 'ios' }">
           <app-avatar-profile 
             [itemAvatar]=conversationAvatar>
           </app-avatar-profile>

package/src/app/components/conversation-detail/header-conversation-detail/header-conversation-detail.component.scss

@@ -141,7 +141,7 @@ ion-header {
 }
 
 .avatar-container {
-    background-color: #fff;
+    // background-color: #fff;
     color: #fff;
     text-align: center;
     width: 44px;
@@ -158,6 +158,12 @@ ion-header {
     border-width: 0px;
     line-height: 40px;
     display: inline-block;
+    cursor: pointer;
+}
+
+.avatar-container-ios {
+    left: 55px;
+    top: 10px;
 }
 
 .info-container{
@@ -216,7 +222,4 @@ ion-header {
     left: 63px;
 }
 
-.avatar-container-ios {
-    left: 55px;
-    top: 10px;
-}
+

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.html

@@ -40,27 +40,28 @@
 
       <div class="start-buttons" style="position: absolute;display: flex; top: 2px;">
 
+        <!-- CANNED RESPONSES -->
         <ng-container *ngIf="areVisibleCAR && supportMode">
           <div class="canned-responses-btn-wpr" style="margin-left: -5px;"
             tooltip="{{translationMap?.get('CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top">
             <ion-button ion-button fill="clear" class="canned-responses-btn" (click)="openCannedResponses()"
-              [disabled]="!IS_SUPPORT_GROUP_CONVERSATION || disableTextarea">
+              [disabled]="!conversationWith?.startsWith(TYPE_SUPPORT_GROUP) || disableTextarea">
               <ion-icon slot="icon-only" lazy="true" name="flash-outline" style="font-size: 24px;"></ion-icon>
             </ion-button>
           </div>
-          <div *ngIf="IS_SUPPORT_GROUP_CONVERSATION  && tagsCannedCount === 0"
+          <div *ngIf="conversationWith?.startsWith(TYPE_SUPPORT_GROUP)  && tagsCannedCount === 0"
             tooltip="{{translationMap?.get('NO_CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top"
             class="no-canned-responses-btn-badge">
             <ion-icon name="alert-sharp" style="vertical-align: middle;"></ion-icon>
           </div>
-          <div *ngIf="IS_SUPPORT_GROUP_CONVERSATION  && tagsCannedCount > 0"
+          <div *ngIf="conversationWith?.startsWith(TYPE_SUPPORT_GROUP)  && tagsCannedCount > 0"
             tooltip="{{translationMap?.get('YES_CANNED_RESPONSES')}}" [options]="tooltipOptions" placement="top"
             class="canned-responses-btn-badge">
             <ion-icon name="information-sharp" style="vertical-align: middle;"></ion-icon>
           </div>
         </ng-container>
 
-
+        <!-- UPLOAD ATTACHMENT -->
         <div class="upload-image-btn-wpr" tooltip="{{translationMap?.get('UPLOAD')}}" [options]="tooltipOptions"
           placement="top">
           <ion-button ion-button fill="clear" class="upload-image-btn" [disabled]="disableTextarea">
@@ -110,7 +111,7 @@
 
       <div class="text-message" [ngClass]="{'text-message-no-cr': areVisibleCAR === false || supportMode === false}">
         <ion-textarea id="ion-textarea" #messageTextArea #message_text_area #textArea rows="1"
-          [placeholder]="TEXAREA_PLACEHOLDER" autosize="false" auto-grow="true" autofocus="true" [value]=""
+          [placeholder]="translationMap?.get('LABEL_ENTER_MSG_SHORT')" autosize="false" auto-grow="true" autofocus="true" [value]=""
           [(ngModel)]="messageString" (ionChange)="ionChange($event);" [disabled]="disableTextarea"
           (keydown.enter)="onKeydown($event, messageString)" (paste)="onPaste($event)">
         </ion-textarea>

package/src/app/components/conversation-detail/message-text-area/message-text-area.component.ts

@@ -9,7 +9,7 @@ import { LoaderPreviewPage } from 'src/app/pages/loader-preview/loader-preview.p
 // Services 
 import { UploadService } from 'src/chat21-core/providers/abstract/upload.service';
 // utils
-import { TYPE_MSG_TEXT } from 'src/chat21-core/utils/constants';
+import { TYPE_MSG_TEXT, TYPE_SUPPORT_GROUP } from 'src/chat21-core/utils/constants';
 // Models
 import { UploadModel } from 'src/chat21-core/models/upload';
 import { Observable } from 'rxjs';
@@ -62,16 +62,12 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   public messageString: string;
   public HAS_PASTED: boolean = false;
   public toastMsg: string;
-  public TEXAREA_PLACEHOLDER: string;
-  public LONG_TEXAREA_PLACEHOLDER: string;
-  public SHORT_TEXAREA_PLACEHOLDER: string;
-  public SHORTER_TEXAREA_PLACEHOLDER: string;
-  public currentWindowWidth: any;
   private logger: LoggerService = LoggerInstance.getInstance();
   public countClicks: number = 0;
   public openCanned: boolean = false;
-  public IS_SUPPORT_GROUP_CONVERSATION: boolean;
   public IS_ON_MOBILE_DEVICE: boolean;
+
+  TYPE_SUPPORT_GROUP = TYPE_SUPPORT_GROUP;
   TYPE_MSG_TEXT = TYPE_MSG_TEXT;
   msg: string
 
@@ -118,15 +114,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     if (this.areVisibleCAR === false) {
       this.emojiPerLine = 7
     }
-    // this.events.subscribe((cannedmessage) => {
-    //   this.logger.log("[CONVS-DETAIL] [MSG-TEXT-AREA] events.subscribe cannedmessage ", cannedmessage);
-    // })
 
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] LONG_TEXAREA_PLACEHOLDER ", this.LONG_TEXAREA_PLACEHOLDER);
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] SHORT_TEXAREA_PLACEHOLDER ", this.SHORT_TEXAREA_PLACEHOLDER);
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] SHORTER_TEXAREA_PLACEHOLDER ", this.SHORTER_TEXAREA_PLACEHOLDER);
     this.listenToNewCannedResponseCreated()
-    this.getWindowWidth();
     this.isOnMobileDevice()
   }
 
@@ -147,15 +136,8 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
       // this.SHORT_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
       // this.SHORTER_TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORTER')
 
-      this.TEXAREA_PLACEHOLDER = this.translationMap.get('LABEL_ENTER_MSG_SHORT')
-
     }
 
-    if (this.conversationWith.startsWith("support-group")) {
-      this.IS_SUPPORT_GROUP_CONVERSATION = true
-    } else {
-      this.IS_SUPPORT_GROUP_CONVERSATION = false
-    }
     // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges supportMode ', this.supportMode)
     // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges disableTextarea ', this.disableTextarea)
     // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] ngOnChanges DROP EVENT ", this.dropEvent);
@@ -206,36 +188,6 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
     }
   }
 
-
-  getWindowWidth(): any {
-    this.currentWindowWidth = window.innerWidth;
-
-
-    // if (this.currentWindowWidth >= 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
-    //   this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] currentWindowWidth', this.currentWindowWidth, ' - DISPLAY LONG_TEXAREA_PLACEHOLDER ');
-    // } else if (this.currentWindowWidth >= 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // } else if (this.currentWindowWidth < 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // } else if (this.currentWindowWidth < 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
-    // } else if (!this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // }
-
-    // this.logger.log("[CONVS-DETAIL][MSG-TEXT-AREA] checkPlatformIsMobile() ", checkPlatformIsMobile());
-    if (checkPlatformIsMobile() === true) {
-
-      if (this.currentWindowWidth <= 430 && this.currentWindowWidth >= 274) {
-        this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-
-      } else if (this.currentWindowWidth <= 273) {
-        this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
-      }
-    }
-  }
-
   // -------------------------------------------------------------------------------------------
   // Change the placeholder of the 'send message' textarea according to the width of the window  
   // -------------------------------------------------------------------------------------------
@@ -243,37 +195,6 @@ export class MessageTextAreaComponent implements OnInit, AfterViewInit, OnChange
   onResize(event) {
     // this.getIfTexareaIsEmpty('onResize')
     //  console.log("[CONVS-DETAIL][MSG-TEXT-AREA]  event.target.innerWidth; ", event.target.innerWidth);
-
-
-
-    // if (event.target.innerWidth >= 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
-    // } else if (event.target.innerWidth >= 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // } else if (event.target.innerWidth < 844 && this.isOpenInfoConversation === false && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // } else if (event.target.innerWidth < 844 && this.isOpenInfoConversation === true && this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
-    // } else if (!this.conversationWith.startsWith("support-group")) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // }
-
-    // this.logger.log('[CONVS-DETAIL][MSG-TEXT-AREA] checkPlatformIsMobile() ', checkPlatformIsMobile());
-    if (checkPlatformIsMobile() === true) {
-
-      if (event.target.innerWidth <= 430 && event.target.innerWidth >= 274) {
-        this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-      } else if (this.currentWindowWidth <= 273) {
-        this.TEXAREA_PLACEHOLDER = this.SHORTER_TEXAREA_PLACEHOLDER;
-      }
-
-    }
-
-    // if (checkPlatformIsMobile && event.target.innerWidth <= 430) {
-    //   this.TEXAREA_PLACEHOLDER = this.SHORT_TEXAREA_PLACEHOLDER;
-    // } else if (checkPlatformIsMobile && event.target.innerWidth > 430) { 
-    //   this.TEXAREA_PLACEHOLDER = this.LONG_TEXAREA_PLACEHOLDER;
-    // }
   }
 
 

package/src/app/components/conversations-list/header-conversations-list/header-conversations-list.component.html

@@ -11,7 +11,7 @@
     <div *ngIf="numberOpenConv > 0" class="number-open-conv">({{numberOpenConv}})</div>
   </ion-title>
 
-  <ion-buttons slot="start">
+  <ion-buttons slot="start" *ngIf="isMobile">
     <ion-button *ngIf="sound_btn==='enabled'" ion-button fill="clear" (click)="onSoundChangeFN('disabled')">
       <ion-icon slot="icon-only" name="volume-high-outline" ></ion-icon>
     </ion-button>

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

@@ -0,0 +1,103 @@
+<ion-navbar class="navbar navbar-absolute">
+  <div class="container-fluid">
+      <!-- <div class="navbar-left">
+        left
+      </div> -->
+      <div class="navbar-right">
+        <!-- test site -->
+        <ng-container *ngIf="project">
+          <button class="btn simulate-visitor-btn btn-success-no-boxshadow " (click)="testWidgetPage()">
+            <i class="material-icons" style="padding-top: 0px;font-size: 24px;">play_arrow</i>
+            {{translationsMap.get('NAVBAR.SIMULATE_VISITOR')}}
+          </button>
+        </ng-container>
+
+        <!--  ------ PROJECTS  DROPDOWN ------ -->
+        <ng-container *ngIf="project">
+            <li>
+              <button class="btn dropdown-toggle project-dropdown" (click)="openDropdownProjects = !openDropdownProjects">
+                <i class="material-icons" style="margin-right: 3px;">keyboard_arrow_down</i>
+                <span style="text-transform: none"> {{ project?.id_project?.name }} </span>
+              </button>
+              <div class="ripple-container"></div>
+              <div id="navbar_dropdown" class="dropdown-menu" [ngClass]="{'open': openDropdownProjects}">
+                
+                <!--  PROJECT SETTINGS  -->
+                <!-- <li *ngIf="USER_ROLE !== 'agent'">
+                  <a (click)="onClickDropdownOption('projectSettings')">
+                    <i class="material-icons" style="padding-right: 5px; margin-bottom: 2px; font-size: 20px">settings</i>
+                    {{translationsMap?.get('NAVBAR.PROJECT_SETTINGS')}}
+                  </a>
+                </li> -->
+  
+                <!--  ALL PROJECTS -->
+                <li (click)="onClickDropdownOption('allProjects')">
+                  <a style="cursor: pointer">
+                    <i class="material-icons" style="padding-right: 5px; margin-bottom: 2px; font-size: 20px">view_list</i>
+                    {{translationsMap?.get('NAVBAR.VIEW_ALL_PROJECTS')}}
+                  </a>
+                </li>
+  
+                <!--  ADD PROJECT -->
+                <li id="navbar_create_prjct" *ngIf="MT === true" (click)="onClickDropdownOption('addProject')">
+                  <a style="cursor: pointer">
+                    <i class="material-icons" style="padding-right: 5px; margin-bottom: 2px; font-size: 20px">add_circle_outline </i>
+                    {{translationsMap?.get('NAVBAR.ADD_PROJECT')}}
+                  </a>
+                </li>
+  
+                <li class="divider"></li>
+  
+                <!--  RECENT PROJECTS -->
+                <li>
+                  <span style="padding-left: 24px;font-size: 12px; color: rgb(118,149,165);font-weight: 400">
+                    {{translationsMap?.get('NAVBAR.RECENT_PROJECTS')}}
+                  </span>
+                </li>
+                <!-- 
+                ***** ngFor - reverse order of output using the index *****
+                Reverse() works in place. It means, it will change the original array. 
+                Slice without parameters returns a copy of projects, so original array, in this case, stays unchanged.  
+                let prjct of projects?.reverse()
+                -->
+                <!-- *ngFor="let prjct of projects?.slice().reverse() | slice:0:5; let i=index" -->
+                <li *ngFor="let prjct of projects?.slice() | slice:0:5; let i=index" style="cursor: pointer">
+                  <a (click)="goToHome(prjct?.id_project?._id, prjct?.id_project?.name)"
+                    [ngClass]="{'li-selected' : prjct?.id_project?._id === project?.id_project?.id }">
+  
+                    <span> {{ prjct?.id_project?.name }} </span>
+                  </a>
+                </li>
+
+                <ng-container *ngIf="projects?.length > 5">
+                  <li class="divider"></li>
+                  <li>
+                    <span style="padding-left: 24px;font-size: 12px; color: rgb(118,149,165);font-weight: 400">
+                      {{translationsMap?.get('NAVBAR.OTHER_PROJECTS')}}
+                    </span>
+                  </li>
+    
+                  <!-- *ngFor="let prjct of projects?.slice().reverse() | slice:5:10; let i=index" -->
+                  <li *ngFor="let prjct of projects?.slice() | slice:5:10; let i=index" style="cursor: pointer">
+                    <a (click)="goToHome(prjct?.id_project?._id, prjct?.id_project?.name)">
+                      {{ prjct?.id_project?.name }}
+                    </a>
+                  </li>
+                </ng-container>
+  
+              </div>
+            </li>
+        </ng-container>
+
+        <!--  Sound on / off -->
+        <ng-container *ngIf="project">
+          <button class="btn volume" style="cursor: pointer;" *ngIf="isSoundEnabled" (click)="onClickSound('disabled')">
+            <i class="material-icons">volume_up</i>
+          </button>
+          <button class="btn volume" style="cursor: pointer;" *ngIf="!isSoundEnabled" (click)="onClickSound('enabled')">
+            <i class="material-icons">volume_off</i>
+          </button>
+        </ng-container>
+      </div>
+  </div>
+</ion-navbar>