<div class="bg-card flex h-full flex-auto flex-col overflow-hidden dark:bg-default" > <!-- Header --> <div class="-mb-px flex h-18 flex-0 items-center bg-gray-50 px-6 dark:bg-transparent" > <button mat-icon-button (click)="drawer.close()"> <mat-icon [svgIcon]="'heroicons_outline:arrow-long-left'" ></mat-icon> </button> <div class="ml-2 text-2xl font-semibold">New chat</div> </div> <div class="relative overflow-y-auto"> @if (contacts.length) { @for ( contact of contacts; track trackByFn(i, contact); let i = $index ) { <!-- Group --> @if ( i === 0 || contact.name.charAt(0) !== contacts[i - 1].name.charAt(0) ) { <div class="text-secondary sticky top-0 z-10 -mt-px border-b border-t bg-gray-100 px-6 py-1 font-medium uppercase dark:bg-gray-900 md:px-8" > {{ contact.name.charAt(0) }} </div> } <!-- Contact --> <div class="z-20 flex cursor-pointer items-center border-b px-6 py-4 dark:hover:bg-hover hover:bg-gray-100 md:px-8" > <div class="flex h-10 w-10 flex-0 items-center justify-center overflow-hidden rounded-full" > @if (contact.avatar) { <img class="h-full w-full object-cover" [src]="contact.avatar" alt="Contact avatar" /> } @if (!contact.avatar) { <div class="flex h-full w-full items-center justify-center rounded-full bg-gray-200 text-lg uppercase text-gray-600 dark:bg-gray-700 dark:text-gray-200" > {{ contact.name.charAt(0) }} </div> } </div> <div class="ml-4 min-w-0"> <div class="truncate font-medium leading-5"> {{ contact.name }} </div> <div class="text-secondary truncate leading-5"> {{ contact.about }} </div> </div> </div> } } @else { <div class="border-t p-8 text-center text-4xl font-semibold tracking-tight sm:p-16" > There are no contacts! </div> } </div> <!-- No contacts --> </div>