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

<section class="bg-white dark:bg-gray-950">
    <div style="height: 580px;">
        <ejs-sidebar #sidebar class="bg-gray-50 dark:bg-gray-900 !border-r !border-gray-200 dark:!border-gray-700" width="328px" aria-label="main navigation menu" role="complementary" style="display: block;">
            <div class="flex h-screen">
                <div class="py-4" style="width: 72px;">
                    <div class="flex justify-center items-center px-3 mb-2">
                        <img src="assets/images/common/brand-logos/svg/vector.svg" alt="company logo" />
                    </div>
                    <ejs-listview class="border-0 e-bigger" [dataSource]="data1" [template]="itemTemplate1" aria-label="quick navigation links" role="list">
                        <ng-template #itemTemplate1 let-data>
                            <div class="e-list-wrapper flex justify-center items-center">
                                <span class="e-icons e-large {{data.fontIcon}}"></span>
                            </div>
                        </ng-template>
                    </ejs-listview>
                </div>
                <div class="pt-4 border-l h-screen border-gray-200 dark:border-gray-700 flex flex-col justify-between" style="width: 256px;">
                    <div>
                        <p class="text-base text-gray-700 dark:text-gray-300 pb-2 px-4">Overview</p>
                        <ejs-listview class="border-0" [dataSource]="data2" [template]="itemTemplate2" aria-label="main navigation links" role="list">
                            <ng-template #itemTemplate2 let-data>
                                <div class="e-list-wrapper flex items-center justify-between ml-1.5 pr-1.5">
                                    <span class="flex items-center">
                                        <span class="e-icons {{data.fontIcon}} text-base"></span>
                                        <span class="text-base font-normal pl-4">{{data.field}}</span>
                                    </span>
                                    <span class="e-badge e-badge-info e-badge-pill !px-1.5 e-bigger" *ngIf="data.field =='My Inbox'">99+</span>
                                    <span class="e-badge e-badge-info e-badge-pill !px-1.5 e-bigger" *ngIf="data.field =='Chats'">10</span>
                                </div>
                            </ng-template>
                        </ejs-listview>
                        <hr class="border-gray-200 dark:border-gray-700 m-4" />
                        <div>
                            <ejs-listview class="!border-0" [dataSource]="data3" [template]="itemTemplate3" aria-label="other navigation links" role="list">
                                <ng-template #itemTemplate3 let-data>
                                    <div class="e-list-wrapper ml-1.5">
                                        <span class="text-base font-normal">{{data.field}}</span>
                                    </div>
                                </ng-template>
                            </ejs-listview>
                        </div>
                    </div>
                    <button ejs-button cssClass="e-icons e-chevron-left e-large e-flat ml-auto m-4" type="button" aria-label="expand/collapse menu" role="button"></button>
                </div>
            </div>
        </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 style="height: 600px;">
        <ejs-sidebar #sidebar width="328px" aria-label="main navigation menu" role="complementary" style="display: block;">
            <div class="d-flex vh-100">
                <div class="py-4 d-flex flex-column align-items-center" style="width: 72px;">
                    <div class="d-flex justify-content-center align-items-center px-3 mb-2">
                        <img src="assets/images/common/brand-logos/svg/vector.svg" alt="company logo" />
                    </div>
                    <ejs-listview class="border-0 e-bigger" [dataSource]="data1" [template]="itemTemplate1" aria-label="quick navigation links" role="list">
                        <ng-template #itemTemplate1 let-data>
                            <div class="e-list-wrapper d-flex justify-content-center align-items-center">
                                <span class="e-icons e-large {{data.fontIcon}}"></span>
                            </div>
                        </ng-template>
                    </ejs-listview>
                </div>
                <div class="pt-4 vh-100 border-start border-light-subtle opacity-100 d-flex flex-column justify-content-between" style="width: 256px;">
                    <div>
                        <p class="text-body-secondary pb-2 px-3 mb-0 fs-6 mt-2">Overview</p>
                        <ejs-listview class="border-0 e-bigger" [dataSource]="data2" [template]="itemTemplate2" aria-label="main navigation links" role="list">
                            <ng-template #itemTemplate2 let-data>
                                <div class="e-list-wrapper d-flex align-items-center justify-content-between ps-1 pe-2">
                                    <span class="d-flex align-items-center">
                                        <span class="e-icons {{data.fontIcon}} fs-6"></span>
                                        <span class="fs-6 fw-normal ps-2 ms-1">{{data.field}}</span>
                                    </span>
                                    <span class="e-badge e-badge-info e-badge-pill e-bigger px-1" *ngIf="data.field =='My Inbox'">99+</span>
                                    <span class="e-badge e-badge-info e-badge-pill e-bigger px-1" *ngIf="data.field =='Chats'">10</span>
                                </div>
                            </ng-template>
                        </ejs-listview>
                        <p class="m-3 fs-6 text-body-secondary">Others</p>
                        <div>
                            <ejs-listview class="border-0 e-bigger" [dataSource]="data3" [template]="itemTemplate3" aria-label="other navigation links" role="list">
                                <ng-template #itemTemplate3 let-data>
                                    <div class="e-list-wrapper px-1">
                                        <span class="fs-6 fw-normal">{{data.field}}</span>
                                    </div>
                                </ng-template>
                            </ejs-listview>
                        </div>
                    </div>
                    <button ejs-button cssClass="e-icons e-chevron-left e-large e-flat ms-auto m-3" type="button" aria-label="expand/collapse menu" role="button"></button>
                </div>
            </div>
        </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 -->

}