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

<section class="bg-white dark:bg-gray-900">
    <div id="calendar-todo-list" [ngStyle]="{'height': '748px', 'width': width, float:'Right'}">
        <ejs-sidebar class="w-full h-full flex flex-col bg-white dark:bg-gray-900" #sidebar position="Right" type="push" [width]="width" [isOpen]="true" showBackdrop="true" role="sidebar" style="display: block;">
            <div class="flex-none border-b border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900">
                <div class="flex justify-between items-center px-4 py-3 border-b border-gray-200 dark:border-gray-600">
                    <h2 class="text-base font-semibold text-gray-900 dark:text-white">To-Do List</h2>
                    <button ejs-button class="e-icons e-flat font-semibold" (click)="sidebar.toggle()" iconCss="e-icons e-close" content=" " type="button" aria-label="close sidebar" role="button"></button>
                </div>
                <div class="p-4 flex justify-center">
                    <ejs-calendar class="e-bigger shadow-none border-none"></ejs-calendar>
                </div>
            </div>
            <div class="flex-grow overflow-y-auto bg-white dark:bg-gray-900">
                <p class="text-sm font-semibold text-gray-900 dark:text-white p-4 pt-6">Sep 22</p>
                <ejs-listview class="!border-0" cssClass="e-list-template" [dataSource]="data" aria-label="list of to-do tasks" role="list">
                    <ng-template #template let-data>
                        <div class="flex px-4 py-2">
                            <span>
                                <ejs-checkbox [checked]="data.completed" (change)="data.completed = !data.completed" [attr.aria-label]="data.header.toLowerCase()" role="checkbox"></ejs-checkbox>
                            </span>
                            <div class="ml-2.5">
                                <p class="text-sm font-medium text-gray-700 dark:text-gray-300" [ngClass]="{'line-through': data.completed}">{{data.header}}</p>
                                <p class="mt-1 text-gray-500 dark:text-gray-400 text-xs">{{ data.date }}</p>
                            </div>
                        </div>
                    </ng-template>
                </ejs-listview>
            </div>
            <div class="flex-none px-3 py-2 border-t border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800">
                <button ejs-button class="e-primary e-flat text-xs" content="Create New" iconCss="e-icons e-plus" type="button" aria-label="create new" role="button"></button>
            </div>
        </ejs-sidebar>
    </div>
</section>
<!-- SB Code - Start -->
<div class="p-3 absolute top-0 right-0">
    <button ejs-button cssClass="e-large e-icons e-chevron-left 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="calendar-todo-list" [ngStyle]="{'height': '776px', 'width': width, float:'Right'}">
        <ejs-sidebar class="d-flex flex-column h-100 bg-body" #sidebar position="Right" type="push" [width]="width" [isOpen]="true" showBackdrop="true" role="sidebar" style="display: block;">
            <div class="bg-body">
                <div class="border-bottom flex-shrink-0 B5 border-light-subtle">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom border-light-subtle">
                        <h2 class="mb-0 fs-6 fw-bold text-body mb-0">To-Do List</h2>
                        <button ejs-button class="e-icons e-btn e-flat btn btn-link fs-6" (click)="sidebar.toggle()" iconCss="e-icons e-close" content=" " aria-label="close sidebar" role="button"></button>
                    </div>
                    <div class="pb-0 d-flex justify-content-center align-items-center">
                        <ejs-calendar class="e-bigger shadow-none w-100 border-0"></ejs-calendar>
                    </div>
                </div>
                <div class="flex-grow-1 overflow-auto">
                    <p class="mb-0 fw-bold text-body-emphasis p-3 pt-4">Sep 22</p>
                    <ejs-listview class="border-0 py-1" cssClass="e-list-template" [dataSource]="data" aria-label="list of to-do tasks" role="list">
                        <ng-template #template let-data>
                            <div class="d-flex px-3 py-2">
                                <span>
                                    <ejs-checkbox [checked]="data.completed" (change)="data.completed = !data.completed" [attr.aria-label]="data.header.toLowerCase()" role="checkbox"></ejs-checkbox>
                                </span>
                                <div class="ms-2">
                                    <p class="mb-1 fw-medium text-body-emphasis" [ngClass]="{'text-decoration-line-through': data.completed}">{{data.header}}</p>
                                    <p class="mt-1 mb-0 text-body-secondary">{{ data.date }}</p>
                                </div>
                            </div>
                        </ng-template>
                    </ejs-listview>
                </div>
                <div class="flex-shrink-0 px-3 py-2 border-top border-light-subtle bg-body-tertiary">
                    <button ejs-button class="e-btn e-primary e-flat btn btn-primary btn-sm" content="Create New" iconCss="e-icons e-plus" aria-label="create new" role="button"></button>
                </div>
            </div>
        </ejs-sidebar>
    </div>
</section>
<!-- SB Code - Start -->
<div class="p-3 position-absolute top-0 end-0">
    <button ejs-button cssClass="e-large e-icons e-chevron-left e-round" type="button" (click)="sidebar?.show()" aria-label="expand menu" role="button"></button>
</div>
<!-- SB Code - End -->

}