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

<section class="bg-white dark:bg-gray-950">
    <div id="alert-sidebar" style="height: 710px;">
        <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="h-screen">
                <div class="flex items-center py-4 px-3">
                    <img src="assets/images/common/brand-logos/svg/vector.svg" alt="company logo" />
                    <span class="text-lg font-bold text-gray-900 dark:text-white ml-3">Company Name</span>
                </div>
                <div class="mt-1">
                    <ejs-listview class="border-0" [dataSource]="data" [template]="itemTemplate" aria-label="main navigation links" role="list">
                        <ng-template #itemTemplate let-data>
                            <div class="e-list-wrapper flex items-center justify-between pr-2">
                                <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 e-bigger !px-1.5" *ngIf="data.field === 'Notifications'">99+</span>
                            </div>
                        </ng-template>
                    </ejs-listview>
                </div>
                <hr class="border-gray-200 dark:border-gray-700 m-4" />
                <ejs-accordion #accordion class="bg-transparent !border-0" expandMode="Single" 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 e-people e-medium" cssClass="!border-0">
                            <ng-template #header>
                                <div class="text-base font-normal pl-2">Groups</div>
                            </ng-template>
                            <ng-template #content>
                                <div></div>
                            </ng-template>
                        </e-accordionitem>
                        <e-accordionitem expanded="true" iconCss="e-icons sf-icon-sandglass text-base" cssClass="!border-0">
                            <ng-template #header>
                                <div class="text-base font-normal pl-2">Resources</div>
                            </ng-template>
                            <ng-template #content>
                                <div>
                                    <ul>
                                        <li class="text-base pb-3 pl-8">Cards</li>
                                        <li class="text-base pb-3 pl-8">Widgets</li>
                                        <li class="text-base pl-8">Components</li>
                                    </ul>
                                </div>
                            </ng-template>
                        </e-accordionitem>
                        <e-accordionitem iconCss="e-icons sf-icon-laptop-01 text-base" cssClass="!border-0">
                            <ng-template #header>
                                <div class="text-base font-normal pl-2">Office</div>
                            </ng-template>
                            <ng-template #content>
                                <div></div>
                            </ng-template>
                        </e-accordionitem>
                    </e-accordionitems>
                </ejs-accordion>
                <div id="toast" class="!absolute bottom-0 left-0"></div>
                <ejs-toast #element [position]="{ X: 'Left', Y: 'Bottom' }" cssClass="e-toast-info" width="224" showCloseButton="true" timeOut="0" target="#toast" newestOnTop="true" aria-label="alert message" role="alert" (created)="element.show();">
                    <ng-template #title>
                        <div class="pr-2">Adaptive Tiles Meeting</div>
                    </ng-template>
                    <ng-template #content>
                        <div>There was a problem with your network connection</div>
                    </ng-template>
                </ejs-toast>
            </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 id="alert-sidebar" style="height: 710px;">
        <ejs-sidebar #sidebar width="256px" aria-label="main navigation menu" role="complementary" style="display: block;">
            <div class="min-vh-100">
                <div class="d-flex align-items-center p-3">
                    <img src="assets/images/common/brand-logos/svg/vector.svg" alt="company logo" />
                    <span class="fs-5 ms-2 fw-bold text-body lh-sm">Company Name</span>
                </div>
                <div class="mt-1">
                    <ejs-listview class="border-0 e-bigger" [dataSource]="data" [template]="itemTemplate" aria-label="main navigation links" role="list">
                        <ng-template #itemTemplate let-data>
                            <div class="e-list-wrapper px-1 d-flex justify-content-between align-items-center">
                                <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" *ngIf="data.field === 'Notifications'">99+</span>
                            </div>
                        </ng-template>
                    </ejs-listview>
                </div>
                <p class="m-3 fs-6 text-body-secondary">Others</p>
                <ejs-accordion #accordion class="bg-transparent border-0" expandMode="Single" 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 e-people e-medium" 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-accordionitem expanded="true" iconCss="e-icons sf-icon-sandglass fs-6" cssClass="border-0">
                            <ng-template #header>
                                <div class="fs-6 fw-normal ps-1">Resources</div>
                            </ng-template>
                            <ng-template #content>
                                <div>
                                    <ul class="list-unstyled" style="margin-bottom: 0;">
                                        <li class="fs-6 ps-4 ms-2 pb-3">Cards</li>
                                        <li class="fs-6 ps-4 ms-2 pb-3">Widgets</li>
                                        <li class="fs-6 ps-4 ms-2">Components</li>
                                    </ul>
                                </div>
                            </ng-template>
                        </e-accordionitem>
                        <e-accordionitem iconCss="e-icons sf-icon-laptop-01 fs-6" cssClass="border-0">
                            <ng-template #header>
                                <div class="fs-6 fw-normal ps-1">Office</div>
                            </ng-template>
                            <ng-template #content>
                                <div></div>
                            </ng-template>
                        </e-accordionitem>
                    </e-accordionitems>
                </ejs-accordion>
                <div id="toast" class="position-absolute bottom-0 start-0"></div>
                <ejs-toast #element [position]="{ X: 'Left', Y: 'Bottom' }" cssClass="e-toast-info" width="224" showCloseButton="true" timeOut="0" target="#toast" newestOnTop="true" aria-label="alert message" role="alert" (created)="element.show();">
                    <ng-template #title>
                        <div>Adaptive Tiles Meeting</div>
                    </ng-template>
                    <ng-template #content>
                        <div>There was a problem with your network connection.</div>
                    </ng-template>
                </ejs-toast>
            </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 -->

}