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

<section class="bg-white dark:bg-gray-950">
    <div id="user-contact-sidebar" style="height: 680px;">
        <ejs-sidebar #sidebar class="bg-gray-50 dark:bg-gray-900 !border-r !border-gray-200 dark:!border-gray-700" width="256px" aria-label="main navigation menu" role="complementary" style="display: block;">
            <div class="flex items-center p-3 justify-between">
                <div class="flex items-center">
                    <span class="e-avatar e-avatar-circle e-avatar-small">
                        <img src="assets/images/common/avatar/avatar-2.jpg" alt="profile picture" />
                    </span>
                    <div class="ml-3">
                        <div class="text-base font-medium leading-normal text-gray-900 dark:text-white">John Wick</div>
                        <p class="mb-0 text-gray-900 dark:text-white">johnwick&#64;123.com</p>
                    </div>
                </div>
                <button ejs-button cssClass="e-icons e-chevron-down-double e-flat e-large px-1" type="button" aria-label="view additional profile settings" role="button"></button>
            </div>
            <div>
                <ejs-accordion class="bg-transparent !border-0" role="button">
                    <e-accordionitems>
                        <e-accordionitem iconCss="e-icons e-notes e-medium" cssClass="!border-0">
                            <ng-template #header>
                                <div class="text-base font-normal pl-2">News</div>
                            </ng-template>
                        </e-accordionitem>
                        <e-accordionitem iconCss="e-icons sf-icon-announcement-01 text-base" cssClass="!border-0">
                            <ng-template #header>
                                <div class="text-base font-normal pl-2">Events</div>
                            </ng-template>
                        </e-accordionitem>
                        <e-accordionitem iconCss="e-icons e-user e-medium" cssClass="!border-0">
                            <ng-template #header>
                                <div class="text-base font-normal pl-2">People</div>
                            </ng-template>
                            <ng-template #content>
                                <div></div>
                            </ng-template>
                        </e-accordionitem>
                        <e-accordionitem iconCss="e-icons sf-icon-user-group-01 text-base" cssClass="!border-0">
                            <ng-template #header>
                                <div class="text-base font-normal pl-2 text-gray-900 dark:text-white">Groups</div>
                            </ng-template>
                            <ng-template #content>
                                <div></div>
                            </ng-template>
                        </e-accordionitem>
                    </e-accordionitems>
                </ejs-accordion>
            </div>
            <hr class="my-4 mx-3 border-gray-200 dark:border-gray-700" />
            <p class="text-base text-gray-900 dark:text-white pb-3 px-3">Active Contacts</p>
            <ejs-listview class="border-0" [dataSource]="data" [template]="itemTemplate" aria-label="view active 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>
        </ejs-sidebar>
    </div>
</section>
<!-- SB Code - Start -->
<div class="p-3 top-0 left-0 absolute">
    <button ejs-button cssClass="e-large e-icons e-chevron-right 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 id="user-contact-sidebar" style="height: 700px;">
        <ejs-sidebar #sidebar width="256px" aria-label="main navigation menu" role="complementary" style="display: block;">
            <div class="d-flex justify-content-between align-items-center px-3 pb-3 mt-4">
                <div class="d-flex align-items-center">
                    <span class="e-avatar e-avatar-small e-avatar-circle">
                        <img src="assets/images/common/avatar/avatar-2.jpg" alt="profile picture" />
                    </span>
                    <div class="ms-2">
                        <div class="fs-6 fw-medium text-body">John Wick</div>
                        <p class="mb-0 text-body-secondary">johnwick&#64;123.com</p>
                    </div>
                </div>
                <button ejs-button cssClass="e-icons e-chevron-down-double e-flat" type="button" aria-label="view additional profile settings" role="button"></button>
            </div>
            <div>
                <ejs-accordion class="border-0 bg-transparent" role="button">
                    <e-accordionitems>
                        <e-accordionitem iconCss="e-icons e-notes e-medium" cssClass="border-0">
                            <ng-template #header>
                                <div class="fs-6 fw-normal ps-1">News</div>
                            </ng-template>
                        </e-accordionitem>
                        <e-accordionitem iconCss="e-icons sf-icon-announcement-01 fs-6" cssClass="border-0">
                            <ng-template #header>
                                <div class="fs-6 fw-normal ps-1">Events</div>
                            </ng-template>
                        </e-accordionitem>
                        <e-accordionitem iconCss="e-icons e-user e-medium" cssClass="border-0">
                            <ng-template #header>
                                <div class="fs-6 fw-normal ps-1">People</div>
                            </ng-template>
                            <ng-template #content>
                                <div></div>
                            </ng-template>
                        </e-accordionitem>
                        <e-accordionitem iconCss="e-icons sf-icon-user-group-01 fs-6" cssClass="border-0">
                            <ng-template #header>
                                <div class="fs-6 fw-normal ps-1">Groups</div>
                            </ng-template>
                            <ng-template #content>
                                <div></div>
                            </ng-template>
                        </e-accordionitem>
                    </e-accordionitems>
                </ejs-accordion>
            </div>
            <hr class="mx-3 opacity-100 border-light-subtle" />
            <p class="fs-6 text-body-secondary m-3">Active Contacts</p>
            <ejs-listview class="border-0 e-bigger pb-3" [dataSource]="data" [template]="itemTemplate" aria-label="view active contacts" role="list">
                <ng-template #itemTemplate let-data>
                    <div class="e-list-wrapper d-flex justify-content-between align-items-center ps-1">
                        <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>
        </ejs-sidebar>
    </div>
</section>
<!-- SB Code - Start -->
<div class="py-3 px-1 position-absolute top-0 start-0">
    <button ejs-button cssClass="e-large e-icons e-chevron-right e-round" type="button" (click)="sidebar?.show()" aria-label="expand menu" role="button"></button>
</div>
<!-- SB Code - End -->

}