<div class="border-right">
  <div class="pt-2 pb-2 pl-3 pr-3 d-flex align-items-center o-hidden box-shadow-1 chat-topbar">
    <a appSidebarToggler="chat-sidebar" class="link-icon d-md-none">
      <i class="icon-regular ml-0 mr-3 i-Left"></i> 
    </a>
    <div class="form-group m-0 flex-grow-1">
      <input type="text" class="form-control form-control-rounded" id="search" placeholder="Search contacts">
    </div>
    
  </div>
  
  <div [perfectScrollbar]="{suppressScrollX: true}" class="contacts-scrollable rtl-ps-none">
    <div class="mt-4 pb-2 pl-3 pr-3 font-weight-bold text-muted border-bottom">Recent</div>
    <div *ngFor="let info of currentUser?.chatInfo; let i = index" 
    class="p-3 d-flex align-items-center contact"
    [ngClass]="{
      'border-bottom': i != currentUser?.chatInfo.length - 1, 
      'online': (contacts | getValueByKey:info.contactId:'status') === 'online'
    }"
    (click)="getChatByContact(info.contactId)">
        <img [src]="contacts | getValueByKey:info.contactId:'avatar'" 
        class="avatar-sm rounded-circle mr-3" alt="">
        <div>
            <h6 class="m-0">{{info.contactName}}</h6>
            <span class="text-muted text-small">{{info.lastChatTime  | date}}</span>
        </div>
    </div>
    <div class="mt-3 pb-2 pl-3 pr-3 font-weight-bold text-muted border-bottom">Contacts</div>
    <div *ngFor="let contact of contacts" 
    class="p-3 d-flex border-bottom align-items-center contact"
    [ngClass]="{online: contact.status === 'online'}"
    (click)="getChatByContact(contact.id)">
      <img [src]="contact.avatar" alt="" class="avatar-sm rounded-circle mr-3">
      <h6 class="">{{contact.name}}</h6>
    </div>
  </div>
  
</div>