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

<section class="bg-white dark:bg-gray-950">
    <div style="height: 605px;">
        <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 flex-col h-screen justify-between">
                <div>
                    <div class="flex items-center p-4">
                        <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>
                    <div class="px-4 py-3">
                        <div class="e-input-group">
                            <span class="e-input-group-icon e-icons e-search"></span>
                            <input class="e-input !pl-0" type="text" placeholder="Search projects" aria-label="search projects" role="textbox" />
                        </div>
                    </div>
                    <div>
                        <ejs-listview class="border-0" [dataSource]="data1" [template]="itemTemplate1" aria-label="main navigation links" role="list">
                            <ng-template #itemTemplate1 let-data>
                                <div class="e-list-wrapper flex items-center px-1">
                                    <span class="e-icons {{data.fontIcon}} text-base"></span>
                                    <span class="text-base font-normal pl-4">{{data.field}}</span>
                                </div>
                            </ng-template>
                        </ejs-listview>
                    </div>
                    <hr class="m-4 border-gray-200 dark:border-gray-700" />
                    <div>
                        <ejs-listview class="border-0" [dataSource]="data2" [template]="itemTemplate2" aria-label="other navigation links" role="list">
                            <ng-template #itemTemplate2 let-data>
                                <div class="e-list-wrapper flex items-center px-1">
                                    <span class="e-icons {{data.fontIcon}}"></span>
                                    <span class="text-base font-normal pl-4">{{data.field}}</span>
                                </div>
                            </ng-template>
                        </ejs-listview>
                    </div>
                </div>
                <div class="p-4">
                    <div>
                        <p class="text-base text-gray-700 dark:text-gray-300">Space Left</p>
                        <h3 class="text-xl mt-2 text-gray-700 font-semibold dark:text-gray-300">70 GB free of 150 GB</h3>
                    </div>
                    <div class="py-3">
                        <ejs-progressbar type="Linear" value="54" height="8" width="205" trackThickness="8" progressThickness="8" progressColor="#4F46E5" aria-label="memory space left" role="progressbar"></ejs-progressbar>
                    </div>
                    <div class="py-3">
                        <button ejs-button iconCss="e-icons sf-icon-upload-cloud text-base" class="e-outline w-full" content="Upgrade to Pro" type="button" aria-label="upgrade to professional version" role="button"></button>
                    </div>
                </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: 630px;">
        <ejs-sidebar #sidebar width="256px" aria-label="main navigation menu" role="complementary" style="display: block;">
            <div class="d-flex flex-column vh-100 justify-content-between">
                <div>
                    <div class="d-flex align-items-center px-3 pb-3 mt-4">
                        <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="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>
                    <div class="px-3">
                        <div class="e-input-group">
                            <span class="e-input-group-icon e-icons e-search border-end-0"></span>
                            <input class="e-input" type="text" placeholder="Search projects" aria-label="search projects" role="textbox" />
                        </div>
                    </div>
                    <div class="mt-3">
                        <ejs-listview class="border-0 e-bigger" [dataSource]="data1" [template]="itemTemplate1" aria-label="main navigation links" role="list">
                            <ng-template #itemTemplate1 let-data>
                                <div class="e-list-wrapper d-flex align-items-center px-1">
                                    <span class="e-icons {{data.fontIcon}} fs-6"></span>
                                    <span class="fs-6 fw-normal ps-2 ms-1">{{data.field}}</span>
                                </div>
                            </ng-template>
                        </ejs-listview>
                    </div>
                    <p class="m-3 fs-6 text-body-secondary">Others</p>
                    <div>
                        <ejs-listview class="border-0 e-bigger" [dataSource]="data2" [template]="itemTemplate2" aria-label="other navigation links" role="list">
                            <ng-template #itemTemplate2 let-data>
                                <div class="e-list-wrapper d-flex align-items-center px-1">
                                    <span class="e-icons {{data.fontIcon}}"></span>
                                    <span class="fs-6 fw-normal ps-2 ms-1">{{data.field}}</span>
                                </div>
                            </ng-template>
                        </ejs-listview>
                    </div>
                </div>
                <div class="p-3">
                    <div>
                        <span class="text-body-secondary fs-6 mb-0">Space Left</span>
                        <h3 class="mt-1 text-body fw-medium fs-5 mb-0">70 GB free of 150 GB</h3>
                    </div>
                    <div class="mt-2">
                        <ejs-progressbar type="Linear" value="54" height="8" width="205" trackThickness="8" progressThickness="8" progressColor="#0D6EFD" cornerRadius="Round" aria-label="memory space left" role="progressbar"></ejs-progressbar>
                    </div>
                    <div class="mt-3">
                        <button ejs-button class="e-outline w-100" iconCss="e-icons sf-icon-upload-cloud fs-6" content="Upgrade to Pro" type="button" aria-label="upgrade to professional version" role="button"></button>
                    </div>
                </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 -->

}