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

<section class="bg-white dark:bg-gray-900">
    <div [ngStyle]="{'height': '650px', 'width': width, float:'Right'}">
        <ejs-sidebar class="w-full bg-white dark:bg-gray-900" #sidebar position="Right" type="push" [width]="width" [isOpen]="true" [closeOnDocumentClick]="false" showBackdrop="true" role="sidebar" style="display: block;">
            <div class="bg-white dark:bg-gray-900 min-h-screen">
                <div class="border-b border-gray-200 dark:border-gray-600">
                    <div class="flex justify-between items-center px-4 py-3 border-b border-gray-200 dark:border-gray-600">
                        <h2 class="text-lg text-gray-900 dark:text-white">Meetings</h2>
                        <button ejs-button class="e-icons e-btn e-flat" (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 items-center">
                        <ejs-calendar class="e-bigger shadow-none border-none"></ejs-calendar>
                    </div>
                </div>
                <div class="p-4 pt-4 bg-white dark:bg-gray-900">
                    <div class="flex items-center flex-wrap space-y-5 pt-2 rounded-lg">
                        <div class="w-full">
                            <div class="flex">
                                <div class="w-10 py-1">
                                    <p class="text-sm text-gray-900 dark:text-white">10:00</p>
                                    <span class="text-xs text-gray-700 dark:text-gray-300">1 hour</span>
                                </div>
                                <div class="w-1 h-100 rounded-lg bg-cyan-500 ml-2 mr-4"></div>
                                <div class="py-1">
                                    <h5 class="font-medium text-gray-700 dark:text-gray-300">Project Kickoff</h5>
                                    <p class="text-xs text-gray-700 dark:text-gray-300">Online</p>
                                </div>
                            </div>
                        </div>
                        <div class="w-full">
                            <div class="flex">
                                <div class="w-10 py-1">
                                    <p class="text-sm text-gray-900 dark:text-white">11:00</p>
                                    <span class="text-xs text-gray-700 dark:text-gray-300">1 hour</span>
                                </div>
                                <div class="w-1 h-100 rounded-lg bg-red-500 ml-2 mr-4"></div>
                                <div class="py-1">
                                    <h5 class="font-medium text-gray-700 dark:text-gray-300">Marketing Strategy</h5>
                                    <p class="text-xs text-gray-700 dark:text-gray-300">Online</p>
                                </div>
                            </div>
                        </div>
                        <div class="w-full">
                            <div class="flex">
                                <div class="w-10 py-1">
                                    <p class="text-sm text-gray-900 dark:text-white">12:00</p>
                                    <span class="text-xs text-gray-700 dark:text-gray-300">1 hour</span>
                                </div>
                                <div class="w-1 h-100 rounded-lg bg-orange-500 ml-2 mr-4"></div>
                                <div class="py-1">
                                    <h5 class="font-medium text-gray-700 dark:text-gray-300">Product Design Review</h5>
                                    <p class="text-xs text-gray-700 dark:text-gray-300">Online</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </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 [ngStyle]="{'height': '676px', 'width': width, float:'Right'}">
        <ejs-sidebar class="bg-body" #sidebar position="Right" type="push" [width]="width" [isOpen]="true" [closeOnDocumentClick]="false" showBackdrop="true" role="sidebar" style="display: block;">
            <div class="bg-body">
                <div class="border-bottom border-light-subtle">
                    <div class="d-flex justify-content-between align-items-center p-3 border-bottom border-light-subtle">
                        <div class="text-body fw-bold fs-6 mb-0">Meetings</div>
                        <button ejs-button class="e-icons e-btn e-flat fs-6" (click)="sidebar.toggle()" iconCss="e-icons e-close" content=" " type="button" aria-label="close sidebar" role="button"></button>
                    </div>
                    <div class="p-3 d-flex justify-content-center align-items-center">
                        <ejs-calendar class="e-bigger shadow-none border-0"></ejs-calendar>
                    </div>
                </div>
                <div class="p-3 pt-3 bg-body">
                    <div class="row gap-4 pt-2 rounded">
                        <div class="w-100">
                            <div class="d-flex">
                                <div class="border-end border-info border-2 pe-3">
                                    <p class="fw-normal text-body-emphasis mb-1">10:00</p>
                                    <span class="text-body-secondary">1 hour</span>
                                </div>
                                <div class="ms-3">
                                    <p class="fw-medium text-body-emphasis mb-1">Project Kickoff</p>
                                    <p class="text-body-secondary mb-0">Online</p>
                                </div>
                            </div>
                        </div>
                        <div class="w-100">
                            <div class="d-flex">
                                <div class="border-end border-danger border-2 pe-3">
                                    <p class="fw-normal text-body-emphasis mb-1">11:00</p>
                                    <span class="text-body-secondary">1 hour</span>
                                </div>
                                <div class="ms-3">
                                    <p class="fw-medium text-body-emphasis mb-1">Marketing Strategy</p>
                                    <p class="text-body-secondary mb-0">Online</p>
                                </div>
                            </div>
                        </div>
                        <div class="w-100">
                            <div class="d-flex">
                                <div class="border-end border-warning border-2 pe-3">
                                    <p class="fw-normal text-body-emphasisk mb-1">12:00</p>
                                    <span class="text-body-secondary">1 hour</span>
                                </div>
                                <div class="ms-3">
                                    <p class="fw-medium text-body-emphasis mb-1">Product Design Review</p>
                                    <p class="text-body-secondary mb-0">Online</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </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 -->

}