@if (currentTheme === 'tailwind') {

<section class="bg-white dark:bg-gray-950">
    <div class="float-right" style="height: 600px;">
        <ejs-sidebar #sidebar class="bg-gray-50 dark:bg-gray-900 !border-l !border-gray-200 dark:!border-gray-700" width="256px" position="Right" showBackdrop="true" aria-label="main navigation menu" role="complementary" style="display: block;">
            <div class="py-6 h-screen">
                <div class="flex justify-between mb-2 px-3">
                    <span class="text-base text-gray-900 dark:text-white">Contacts</span>
                    <span class="flex justify-end">
                        <button ejs-button cssClass="e-medium e-icons e-view-side e-flat mr-2" type="button" aria-label="view side" role="button"></button>
                        <button ejs-button cssClass="e-medium e-icons e-search e-flat mr-2" type="button" aria-label="search" role="button"></button>
                        <button ejs-button cssClass="e-medium e-icons e-more-horizontal-1 e-flat" type="button" aria-label="more options" role="button"></button>
                    </span>
                </div>
                <ejs-listview class="border-0" [dataSource]="data" [template]="itemTemplate" aria-label="main contacts" role="list">
                    <ng-template #itemTemplate let-data>
                        <div class="e-list-wrapper flex items-center">
                            <span class="flex items-center">
                                <span class="e-avatar e-avatar-xsmall e-avatar-circle">
                                    <img src="assets/images/common/avatar/{{data.profileImage}}" alt="profile picture" />
                                </span>
                                <span class="text-base text-gray-700 dark:text-gray-300 ml-3">{{data.name}}</span>
                            </span>
                        </div>
                    </ng-template>
                </ejs-listview>
                <hr class="border-gray-200 dark:border-gray-700 my-4 mx-3" />
                <div class="flex justify-between items-center px-3 mt-3">
                    <span class="text-base text-gray-700 dark:text-gray-300">Group Conversations</span>
                    <button ejs-button cssClass="e-medium e-icons e-plus e-flat" type="button" aria-label="add group conversations" role="button"></button>
                </div>
            </div>
        </ejs-sidebar>
    </div>
</section>
<!-- SB Code - Start -->
<div class="p-3 top-0 right-0 absolute">
    <button ejs-button cssClass="e-large e-icons e-chevron-left e-round" type="button" (click)="sidebar?.show()" aria-label="expand menu" role="button"></button>
</div>
<!-- SB Code - End -->

} @else if (currentTheme === 'bootstrap5.3') {

<section class="bg-body">
    <div class="float-end" style="height: 600px;">
        <ejs-sidebar #sidebar width="256px" position="Right" showBackdrop="true" aria-label="main navigation menu" role="complementary" style="display: block;">
            <div class="py-4 vh-100">
                <div class="d-flex justify-content-between mb-2 px-2 ms-1">
                    <span class="fs-6 text-body-secondary">Contacts</span>
                    <span class="d-flex justify-content-end">
                        <button ejs-button class="e-medium e-icons e-view-side e-flat" type="button" aria-label="view side" role="button"></button>
                        <button ejs-button class="e-medium e-icons e-search e-flat ms-2" type="button" aria-label="search" role="button"></button>
                        <button ejs-button class="e-medium e-icons e-more-horizontal-1 e-flat ms-2" type="button" aria-label="more options" role="button"></button>
                    </span>
                </div>
                <ejs-listview class="border-0 e-bigger" [dataSource]="data" [template]="itemTemplate" aria-label="main contacts" role="list">
                    <ng-template #itemTemplate let-data>
                        <div class="e-list-wrapper d-flex justify-content-between align-items-center">
                            <span class="d-flex align-items-center">
                                <span class="e-avatar e-avatar-xsmall e-avatar-circle">
                                    <img src="assets/images/common/avatar/{{data.profileImage}}" alt="profile picture" />
                                </span>
                                <span class="fs-6 fw-normal ps-2 ms-1">{{data.name}}</span>
                            </span>
                        </div>
                    </ng-template>
                </ejs-listview>
                <div class="d-flex justify-content-between align-items-center mt-3 px-2 ms-1">
                    <span class="fs-6 text-body-secondary">Group Conversations</span>
                    <button ejs-button class="e-medium e-icons e-plus e-flat" type="button" aria-label="add group conversations" role="button"></button>
                </div>
            </div>
        </ejs-sidebar>
    </div>
</section>
<!-- SB Code - Start -->
<div class="py-3 px-1 position-absolute top-0 end-0">
    <button ejs-button cssClass="e-large e-icons e-chevron-left e-round" type="button" (click)="sidebar?.show()" aria-label="expand menu" role="button"></button>
</div>
<!-- SB Code - End -->

}