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

<section class="bg-white dark:bg-gray-950">
    <div class="flex relative" style="height: 600px;">
        <ejs-sidebar #sidebar class="bg-gray-50 dark:bg-gray-900 !border-r !border-gray-200 dark:!border-gray-700" width="72px" aria-label="main navigation menu" role="complementary" style="display: block;">
            <div class="pt-6">
                <div class="flex justify-center items-center mb-3 px-3">
                    <img src="assets/images/common/brand-logos/svg/vector.svg" alt="company logo" />
                </div>
                <ejs-listview class="border-0 e-bigger" [dataSource]="data" [template]="itemTemplate" aria-label="quick navigation links" role="list">
                    <ng-template #itemTemplate let-data>
                        <div class="e-list-wrapper flex justify-center items-center">
                            <span class="e-large e-icons {{data.fontIcon}}"></span>
                        </div>
                    </ng-template>
                </ejs-listview>
            </div>
        </ejs-sidebar>
        <div class="p-3 bottom-0 left-0 absolute !right-full">
            <button ejs-button cssClass="e-large e-icons e-chevron-right e-round" type="button" aria-label="expand/collapse menu" role="button"></button>
        </div>
    </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 class="d-flex position-relative" style="height: 600px;">
        <ejs-sidebar #sidebar class="border-end border-light-subtle" width="72px" aria-label="main navigation menu" role="complementary" style="display: block;">
            <div class="pt-4 d-flex flex-column align-items-center">
                <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]="data" [template]="itemTemplate" aria-label="quick navigation links" role="list">
                    <ng-template #itemTemplate let-data>
                        <div class="e-list-wrapper d-flex justify-content-center align-items-center">
                            <span class="e-large e-icons {{data.fontIcon}}"></span>
                        </div>
                    </ng-template>
                </ejs-listview>
            </div>
        </ejs-sidebar>
        <div class="py-3 px-1 position-absolute bottom-0 start-0">
            <button ejs-button cssClass="e-large e-icons e-chevron-right e-round" type="button" aria-label="expand/collapse menu" role="button"></button>
        </div>
    </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 -->

}