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

<section class="bg-white dark:bg-gray-800">
    <div [ngStyle]="{'height': '815px', 'width': width, float:'Right'}">
        <ejs-sidebar class="w-full bg-white dark:bg-gray-800" #sidebar position="Right" type="push" [width]="width" [isOpen]="true" [closeOnDocumentClick]="false" showBackdrop="true" role="sidebar" style="display: block;">
            <div class="border-b border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800">
                <div class="flex justify-between items-center px-4 py-3 border-b border-gray-200 dark:border-gray-600">
                    <h2 class="text-base text-gray-900 dark:text-white">Quick view</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 bg-white dark:bg-gray-800 pt-4">
                <h6 class="text-sm font-semibold text-gray-900 dark:text-white">Sep, 22</h6>
                <div class="flex items-center flex-wrap space-y-3 pt-3">
                    <div class="e-card w-full !ml-0 pt-3">
                        <div class="e-card-content !px-2">
                            <div class="flex">
                                <div class="w-1 h-100 rounded-lg bg-cyan-500 mr-4"></div>
                                <div class="e-card-stacked">
                                    <h5 class="font-medium text-gray-700 dark:text-gray-300 mb-1">Project Kickoff</h5>
                                    <p class="text-xs text-gray-700 dark:text-gray-300">10:00 AM - 11:00 AM</p>
                                    <div class="flex items-center space-x-2 mt-1">
                                        <span class="w-6 h-6 bg-green-700 dark:bg-green-500 text-xs text-white dark:text-black flex items-center justify-center rounded-full">JB</span>
                                        <span class="text-sm text-gray-700 dark:text-gray-300">Jerome Bell</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="e-card w-full !ml-0 pt-3">
                        <div class="e-card-content !px-2">
                            <div class="flex">
                                <div class="w-1 h-100 rounded-lg bg-red-500 mr-4"></div>
                                <div class="e-card-stacked">
                                    <h5 class="font-medium text-gray-700 dark:text-gray-300 mb-1">Marketing Strategy</h5>
                                    <p class="text-xs text-gray-700 dark:text-gray-300">02:00 PM - 04:00 PM</p>
                                    <div class="flex items-center space-x-2 mt-1">
                                        <span class="w-6 h-6 bg-primary-600 dark:bg-primary-400 text-xs text-white dark:text-black flex items-center justify-center rounded-full">JP</span>
                                        <span class="text-sm text-gray-700 dark:text-gray-300">John Peterson</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="e-card w-full !ml-0 pt-3">
                        <div class="e-card-content !px-2">
                            <div class="flex">
                                <div class="w-1 h-100 rounded-lg bg-orange-500 mr-4"></div>
                                <div class="e-card-stacked">
                                    <h5 class="font-medium text-gray-700 dark:text-gray-300 mb-1">Product Design Review</h5>
                                    <p class="text-xs text-gray-700 dark:text-gray-300">05:00 PM - 06:30 PM</p>
                                    <div class="flex items-center space-x-2 mt-1">
                                        <span class="w-6 h-6 bg-orange-700 dark:bg-orange-500 text-xs text-white dark:text-black flex items-center justify-center rounded-full">KW</span>
                                        <span class="text-sm text-gray-700 dark:text-gray-300">Kristin Watson</span>
                                    </div>
                                </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': '930px', 'width': width, float:'Right'}">
        <ejs-sidebar class="d-flex flex-column h-100 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">
                    <div class="d-flex justify-content-between align-items-center px-3 py-2 pt-3 border-bottom">
                        <h2 class="h6 text-body fw-bold mb-0">Quick view</h2>
                        <button ejs-button class="e-icons e-btn e-flat fs-6" (click)="sidebar.toggle()" type="button" aria-label="close sidebar" role="button">
                            <i class="e-icons e-close"></i>
                        </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">
                    <h6 class="fs-6 fw-bold text-body">Sep, 22</h6>
                    <div class="d-flex flex-column">
                        <div class="e-card w-100 mt-2">
                            <div class="e-card-content px-1">
                                <div class="d-flex">
                                    <div class="bg-info rounded me-2" style="width: 4px; height: 98px;"></div>
                                    <div class="e-card-stacked">
                                        <h5 class="fs-6 fw-medium text-body mb-1">Project Kickoff</h5>
                                        <p class="fs-sm text-body-secondary mb-1">10:00 AM - 11:00 AM</p>
                                        <div class="d-flex align-items-center mt-1">
                                            <span class="bg-success text-white p-1 px-2 rounded-circle">JB</span>
                                            <span class="fs-sm fw-medium text-body ms-2">Jerome Bell</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="e-card w-100 mt-3">
                            <div class="e-card-content px-1">
                                <div class="d-flex">
                                    <div class="bg-danger rounded me-2" style="width: 4px; height: 98px;"></div>
                                    <div class="e-card-stacked">
                                        <h5 class="fs-6 fw-medium text-body mb-1">Marketing Strategy</h5>
                                        <p class="fs-sm text-body-secondary mb-1">02:00 PM - 04:00 PM</p>
                                        <div class="d-flex align-items-center mt-1">
                                            <span class="bg-info text-white p-1 px-2 rounded-circle">JP</span>
                                            <span class="fs-sm fw-medium text-body ms-2">John Peterson</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="e-card w-100 mt-3">
                            <div class="e-card-content px-1">
                                <div class="d-flex">
                                    <div class="bg-success rounded me-2" style="width: 4px; height: 98px;"></div>
                                    <div class="e-card-stacked">
                                        <h5 class="fs-6 fw-medium text-body mb-1">Product Design Review</h5>
                                        <p class="fs-sm text-body-secondary mb-1">05:00 PM - 06:30 PM</p>
                                        <div class="d-flex align-items-center mt-1">
                                            <span class="bg-warning text-white p-1 rounded-circle">KW</span>
                                            <span class="fs-sm fw-medium text-body ms-2">Kristin Watson</span>
                                        </div>
                                    </div>
                                </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 -->

}