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

<section class="bg-white dark:bg-gray-900">
    <div [ngStyle]="{'height': '752px', '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" [closeOnDocumentClick]="false" showBackdrop="true" role="sidebar" style="display: block;">
            <div class="flex-none bg-white dark:bg-gray-900">
                <div class="flex justify-between items-center px-4 border-gray-200 dark:border-gray-600">
                    <div class="py-3 pe-10">
                        <h2 class="text-xs mb-1 text-gray-700 dark:text-gray-300">CALENDAR</h2>
                        <ejs-datepicker class="shadow-none border-none" placeholder="Enter date" aria-label="enter a date here" role="combobox"></ejs-datepicker>
                    </div>
                    <button ejs-button class="e-icons e-btn e-flat e-icons e-close text-lg" (click)="sidebar.toggle()" type="button" aria-label="close sidebar" role="button"></button>
                </div>
            </div>
            <div class="flex-grow overflow-y-auto bg-white dark:bg-gray-900">
                <div class="flex justify-between border-b border-t border-gray-200 dark:border-gray-600 p-4 py-3">
                    <button ejs-button class="e-btn e-outline w-16 text-xs py-1 px-3" type="button" aria-label="today" role="button">Today</button>
                    <button ejs-button class="e-btn e-flat e-icons e-more-vertical-1" type="button" aria-label="more actions" role="button"></button>
                </div>
                <div class="space-y-3 p-4">
                    <h6 class="text-xs text-gray-500">SEPTEMBER</h6>
                    <div>
                        <h5 class="text-sm text-gray-700 dark:text-gray-300 mb-1">Mon, Sep 2</h5>
                        <p class="w-full text-cyan-700 dark:text-cyan-50 bg-cyan-100 dark:bg-cyan-800 rounded pl-3 p-1">Labor Day</p>
                    </div>
                    <div>
                        <h5 class="text-sm text-primary-600 dark:text-primary-400 mb-1">Wed, Sep 11</h5>
                        <p class="w-full text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 rounded pl-3 p-1">Patriot Day (Remembrance)</p>
                    </div>
                    <div>
                        <h5 class="text-sm text-gray-700 dark:text-gray-300 mb-1">Fri, Sep 13</h5>
                        <p class="w-full text-cyan-700 dark:text-cyan-50 bg-cyan-100 dark:bg-cyan-800 rounded pl-3 p-1">National Grandparents Day</p>
                    </div>
                    <div>
                        <h5 class="text-sm text-gray-700 dark:text-gray-300 mb-1">Fri, Sep 20</h5>
                        <p class="w-full text-cyan-700 dark:text-cyan-50 bg-cyan-100 dark:bg-cyan-800 rounded pl-3 p-1">POW/MIA Recognition Day</p>
                    </div>
                    <h6 class="text-xs text-gray-500 pt-2">OCTOBER</h6>
                    <div>
                        <h5 class="text-sm text-gray-700 dark:text-gray-300 mb-1">Tue, Oct 8</h5>
                        <p class="w-full text-cyan-700 dark:text-cyan-50 bg-cyan-100 dark:bg-cyan-800 rounded pl-3 p-1">Yom Kippur (Jewish Holiday)</p>
                    </div>
                    <div>
                        <h5 class="text-sm text-gray-700 dark:text-gray-300 mb-1">Mon, Oct 14</h5>
                        <p class="w-full text-cyan-700 dark:text-cyan-50 bg-cyan-100 dark:bg-cyan-800 rounded pl-3 p-1">Columbus Day (Federal)</p>
                    </div>
                    <div>
                        <h5 class="text-sm text-gray-700 dark:text-gray-300 mb-1">Fri, Oct 18</h5>
                        <p class="w-full text-cyan-700 dark:text-cyan-50 bg-cyan-100 dark:bg-cyan-800 rounded pl-3 p-1">Alaska Day</p>
                    </div>
                    <div>
                        <h5 class="text-sm text-gray-700 dark:text-gray-300 mb-1">Thu, Oct 31</h5>
                        <p class="w-full text-cyan-700 dark:text-cyan-50 bg-cyan-100 dark:bg-cyan-800 rounded pl-3 p-1">Halloween (Cultural, not federal)</p>
                    </div>
                </div>
            </div>
            <div class="flex-none py-2 px-4 w-full border-t border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800">
                <button ejs-button class="e-btn e-flat e-primary" type="button" content="Create an event" iconCss="e-icons e-plus" aria-label="create an event" 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 [ngStyle]="{'height': '798px', 'width': width, float:'Right'}">
        <ejs-sidebar class="h-100 d-flex flex-column 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="flex-shrink-0">
                    <div class="d-flex justify-content-between align-items-center px-3 border-bottom border-light-subtle">
                        <div class="py-2 pe-5 pt-2">
                            <h2 class="small text-muted mb-1">CALENDAR</h2>
                            <ejs-datepicker class="shadow-none border-0" placeholder="Enter date" aria-label="enter a date here" role="combobox"></ejs-datepicker>
                        </div>
                        <button ejs-button class="e-icons e-btn e-flat e-icons e-close fs-6" (click)="sidebar.toggle()" aria-label="close sidebar" role="button"></button>
                    </div>
                </div>
                <div class="flex-grow-1 overflow-auto bg-body">
                    <div class="d-flex justify-content-between border-bottom border-light-subtle p-3">
                        <button ejs-button class="e-btn e-outline px-2 p-1" aria-label="today" role="button">Today</button>
                        <button ejs-button class="e-btn e-flat e-icons e-more-vertical-1" aria-label="more actions" role="button"></button>
                    </div>
                    <div class="px-3 py-3">
                        <h6 class="small text-muted">SEPTEMBER</h6>
                        <div>
                            <h5 class="fs-6 text-body-secondary">Mon, Sep 2</h5>
                            <p class="w-100 text-info bg-info-subtle rounded ps-3 p-1">Labor Day</p>
                        </div>
                        <div>
                            <h5 class="fs-6 text-primary">Wed, Sep 11</h5>
                            <p class="w-100 text-body-secondary bg-body-secondary rounded ps-3 p-1">Patriot Day (Remembrance)</p>
                        </div>
                        <div>
                            <h5 class="fs-6 text-body-secondary">Fri, Sep 13</h5>
                            <p class="w-100 text-info bg-info-subtle rounded ps-3 p-1">National Grandparents Day</p>
                        </div>
                        <div>
                            <h5 class="fs-6 text-body-secondary">Fri, Sep 20</h5>
                            <p class="w-100 text-info bg-info-subtle rounded ps-3 p-1">POW/MIA Recognition Day</p>
                        </div>
                        <h6 class="small text-muted pt-2">OCTOBER</h6>
                        <div>
                            <h5 class="fs-6 text-body-secondary">Tue, Oct 8</h5>
                            <p class="w-100 text-info bg-info-subtle rounded ps-3 p-1">Yom Kippur (Jewish Holiday)</p>
                        </div>
                        <div>
                            <h5 class="fs-6 text-body-secondary">Mon, Oct 14</h5>
                            <p class="w-100 text-info bg-info-subtle rounded ps-3 p-1">Columbus Day (Federal)</p>
                        </div>
                        <div>
                            <h5 class="fs-6 text-body-secondary">Fri, Oct 18</h5>
                            <p class="w-100 text-info bg-info-subtle rounded ps-3 p-1">Alaska Day</p>
                        </div>
                        <div>
                            <h5 class="fs-6 text-body-secondary">Thu, Oct 31</h5>
                            <p class="w-100 text-info bg-info-subtle rounded ps-3 p-1 mb-0">Halloween (Cultural, not federal)</p>
                        </div>
                    </div>
                </div>
                <div class="flex-shrink-0 py-2 px-4 w-100 border-top border-light-subtle bg-body-tertiary">
                    <button ejs-button class="e-btn e-flat e-primary" content="Create an event" iconCss="e-icons e-plus" aria-label="create an event" 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 -->

}