fuse-angular/src/app/main/apps/chat/sidenavs/left/chats/chats.component.html

<!-- SIDENAV HEADER -->
<div class="sidenav-header">
    <!-- CHATS TOOLBAR -->
    <md-toolbar>

        <!-- TOOLBAR TOP -->
        <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">

            <!-- USER AVATAR WRAPPER -->
            <div class="avatar-wrapper">

                <!-- USER AVATAR -->
                <img (click)="changeLeftSidenavView('user')"
                     src="{{user.avatar}}"
                     class="md-avatar avatar"
                     alt="{{user.name}}"/>
                <!-- / USER AVATAR -->

                <md-icon class="s-16 status" [ngClass]="user.status" [mdMenuTriggerFor]="userStatusMenu"></md-icon>

                <!-- USER STATUS -->
                <md-menu id="user-status-menu" #userStatusMenu="mdMenu">

                    <button md-menu-item (click)="setUserStatus('online')">
                        <div fxLayout="row" fxLayoutAlign="start center">
                            <md-icon class="s-16 status online"></md-icon>
                            <span>Online</span>
                        </div>
                    </button>

                    <button md-menu-item (click)="setUserStatus('away')">
                        <div fxLayout="row" fxLayoutAlign="start center">
                            <md-icon class="s-16 status away"></md-icon>
                            <span>Away</span>
                        </div>
                    </button>

                    <button md-menu-item (click)="setUserStatus('do-not-disturb')">
                        <div fxLayout="row" fxLayoutAlign="start center">
                            <md-icon class="s-16 status do-not-disturb"></md-icon>
                            <span>Do not disturb</span>
                        </div>
                    </button>

                    <button md-menu-item (click)="setUserStatus('offline')">
                        <div fxLayout="row" fxLayoutAlign="start center">
                            <md-icon class="s-16 status offline"></md-icon>
                            <span>Offline</span>
                        </div>
                    </button>
                </md-menu>
                <!-- / USER STATUS -->

            </div>
            <!-- / USER AVATAR -->

            <div>
                <button md-button class="mat-icon-button"
                        [mdMenuTriggerFor]="userMenu"
                        aria-label="more">
                    <md-icon>more_vert</md-icon>
                </button>
                <md-menu #userMenu="mdMenu">
                    <button md-menu-item (click)="changeLeftSidenavView('user')">
                        Profile
                    </button>
                    <button md-menu-item (click)="logout()">
                        Logout
                    </button>
                </md-menu>
            </div>
        </div>
        <!-- / TOOLBAR TOP -->

        <!-- TOOLBAR BOTTOM -->
        <md-toolbar-row>

            <!-- SEARCH -->
            <div class="search-wrapper" fxFlex fxLayout="row" fxLayoutAlign="start center">

                <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">

                    <md-icon>search</md-icon>

                    <input [(ngModel)]="searchText" type="text" placeholder="Search or start new chat" fxFlex>

                </div>
            </div>
            <!-- / SEARCH -->

        </md-toolbar-row>
        <!-- / TOOLBAR BOTTOM -->

    </md-toolbar>
    <!-- / CHATS TOOLBAR -->

</div>
<!-- / SIDENAV HEADER -->

<!-- SIDENAV CONTENT -->
<div class="sidenav-content" perfect-scrollbar fxFlex>

    <!-- CHATS CONTENT -->
    <div>

        <!-- CHATS LIST-->
        <div class="chat-list" fxLayout="column">

            <div md-subheader *ngIf="(user.chatList | filter: searchText).length > 0">
                Chats
            </div>

            <button md-button class="contact"
                    *ngFor="let chat of user.chatList | filter: searchText"
                    (click)="getChat(chat.contactId)" ngClass="{'unread':contact.unread}">

                <div fxLayout="row" fxLayoutAlign="start center">

                    <div class="avatar-wrapper" fxFlex="0 1 auto" fxLayoutAlign="center center">
                        <img [src]="contacts |getById:chat.contactId:'avatar'"
                             class="avatar"
                             alt="{{contacts |getById:chat.contactId:'name'}}"/>
                        <md-icon class="s-16 status" [ngClass]="contacts |getById:chat.contactId:'status'"></md-icon>
                    </div>

                    <div fxLayout="row" fxFlex>

                        <div class="" fxFlex fxLayout="column" fxLayoutAlign="center start">
                            <div class="contact-name">{{contacts |getById:chat.contactId:'name'}}</div>
                            <p class="contact-last-message text-truncate">{{chat.lastMessage}}</p>
                        </div>

                        <div fxLayout="column" fxLayoutAlign="center end">
                            <div class="contact-last-message-time">
                                {{chat.lastMessageTime | date}}
                            </div>
                            <div *ngIf="chat.unread" class="unread-message-count">{{chat.unread}}</div>
                        </div>
                    </div>
                </div>
            </button>

        </div>
        <!-- / CHATS LIST-->

        <!-- CONTACTS LIST-->
        <div class="contact-list" fxLayout="column">

            <div md-subheader *ngIf="(contacts| filter: searchText).length > 0">
                Contacts
            </div>

            <button md-button class="contact"
                    ng-show="chatSearch"
                    *ngFor="let contact of contacts| filter: searchText"
                    (click)="getChat(contact.id)">

                <div fxLayout="row" fxLayoutAlign="start center">
                    <div class="avatar-wrapper" fxFlex="0 1 auto">
                        <img src="{{contact.avatar}}" class="md-avatar avatar" alt="{{contact.name}}"/>
                        <md-icon class="s-16 status" [ngClass]="contact.status"></md-icon>
                    </div>

                    <div class="" fxLayout="column" fxLayoutAlign="center start">
                        <div class="contact-name">{{contact.name}}</div>
                        <p class="contact-mood">{{contact.mood}}</p>
                    </div>
                </div>
            </button>
        </div>
        <!-- / CONTACTS LIST-->

        <!-- NO RESULTS MESSAGE -->
        <div *ngIf="(contacts| filter: searchText).length === 0" class="no-results-message">
            No results..
        </div>
        <!-- NO RESULTS MESSAGE-->

    </div>
    <!-- / CHATS CONTENT -->

</div>
<!-- / SIDENAV CONTENT -->