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

<section class="bg-gray-50 dark:bg-gray-950">
    <div>
        <div class="border border-r-0 border-l-0 border-gray-200 dark:border-gray-600 bg-gray-100 dark:bg-gray-700">
            <div class="flex items-center justify-between ms-6 me-2 lg:me-6 py-2">
                <div class="flex items-center">
                    <img class="mr-3 h-7" src="assets/images/common/brand-logos/svg/vector.svg" alt="company logo" />
                    <span class="text-lg font-semibold text-gray-900 dark:text-white">Company Name</span>
                </div>
                <div class="flex hidden lg:block px-4">
                    <button ejs-button class="e-flat py-2 mr-1.5" type="button" aria-label="home" role="button">Home</button>
                    <button ejs-button class="e-flat py-2 mr-1.5" type="button" aria-label="clients" role="button">Clients</button>
                    <button ejs-button class="e-flat py-2 mr-1.5" type="button" aria-label="marketing" role="button">Marketing</button>
                    <button ejs-button class="e-flat py-2 mr-1.5" type="button" aria-label="contacts" role="button">Contacts</button>
                </div>
                <div class="flex items-center">
                    <button ejs-button class="mr-2 hidden sm:block" cssClass="e-primary" iconCss="e-icons e-plus" iconPosition="Left" content="Upgrade" type="button" aria-label="upgrade" role="button"></button>
                    <div class="border border-gray-200 dark:border-gray-600 h-7 hidden sm:block mx-2"></div>
                    <button ejs-button cssClass="e-flat" class="sf-icon-notification-bell-02 text-base leading-3 hidden sm:block" type="button" aria-label="notification" role="button"></button>
                    <div class="border border-r border-gray-200 dark:border-gray-600 h-7 hidden sm:block mx-2"></div>
                    <button ejs-button cssClass="e-flat" class="e-icons e-grid-view hidden sm:block mr-2" type="button" aria-label="grid view" role="button"></button>
                    <div class="border border-r border-gray-200 dark:border-gray-600 h-7 hidden sm:block mr-2"></div>
                    <span class="e-avatar e-avatar-small e-avatar-circle ml-1.5 mr-1.5 lg:mr-0">
                        <img src="assets/images/common/avatar/avatar-3.jpg" alt="profile picture" />
                    </span>
                    <div class="border border-r border-gray-200 dark:border-gray-600 h-7 block lg:hidden ml-2"></div>
                    <span id="menu" class="block lg:hidden">
                       <ejs-menu [hamburgerMode]="true" showItemOnClick="true" title="" [items]="[{text: 'Home'}, {text: 'Clients'}, {text: 'Marketing'}, {text: 'Contacts'}, {text: 'Others', items: [{text: 'Demos'}, {text: 'Features'}, {text: 'Video Tutorials'}, {text: 'Support Center'}, {text: 'Forum'}]}]" aria-label="menu items" role="menu"></ejs-menu>
                    </span>
                </div>
            </div>
        </div>
        <div class="hidden lg:flex justify-between ps-4 pe-6 py-1 bg-gray-100 dark:bg-gray-700 border border-t-0 border-r-0 border-l-0 border-gray-200 dark:border-gray-600">
            <ejs-menu [items]="[{text: 'Demos'}, {text: 'Features'}, {text: 'Video Tutorials'}, {text: 'Support Center'}, {text: 'Forum'}]" aria-label="menu items" role="menu"></ejs-menu>
            <div class="flex items-center">
                <div class="e-input-group w-72">
                    <input class="e-input" type="text" placeholder="Search" aria-label="search" role="textbox" />
                    <span class="e-input-group-icon e-icons e-search"></span>
                </div>
            </div>
        </div>
    </div>
</section>

} @else if (currentTheme === 'bootstrap5.3') {

<section>
    <div class="border border-light-subtle">
        <div class="d-flex align-items-center justify-content-between bg-body-tertiary ps-4 pe-2 pe-lg-4 py-2">
            <div class="d-flex align-items-center">
                <img class="me-2" src="assets/images/common/brand-logos/svg/vector.svg" alt="company logo" />
                <h5 class="fw-bold text-body fs-5 mb-0">Company Name</h5>
            </div>
            <div class="d-none d-lg-flex px-3">
                <button ejs-button class="e-flat py-2 me-2" type="button" aria-label="home" role="button">Home</button>
                <button ejs-button class="e-flat py-2 me-2" type="button" aria-label="clients" role="button">Clients</button>
                <button ejs-button class="e-flat text-sm py-2 me-2" type="button" aria-label="marketing" role="button">Marketing</button>
                <button ejs-button class="e-flat py-2 me-2" type="button" aria-label="contacts" role="button">Contacts</button>
            </div>
            <div class="d-flex align-items-center">
                <button ejs-button class="me-3 d-none d-sm-block" cssClass="e-primary" iconCss="e-icons e-plus" iconPosition="Left" content="Upgrade" type="button" aria-label="upgrade" role="button"></button>
                <div class="border-end border-secondary-subtle d-none d-sm-block me-3" style="height: 24px;"></div>
                <button ejs-button cssClass="e-flat sf-icons sf-icon-notification-bell-01 fs-6 d-none d-sm-block me-3" type="button" aria-label="notification" role="button"></button>
                <div class="border-end border-secondary-subtle d-none d-sm-block me-3" style="height: 24px;"></div>
                <button ejs-button cssClass="e-flat e-icons e-grid-view d-none d-sm-block me-3 e-medium" type="button" aria-label="grid view" role="button"></button>
                <div class="border-end border-secondary-subtle d-none d-sm-block me-3" style="height: 24px;"></div>
                <span class="e-avatar e-avatar-small e-avatar-circle">
                    <img src="assets/images/common/avatar/avatar-3.jpg" alt="profile picture" />
                </span>
                <div class="border-end border-secondary-subtle d-block d-lg-none ms-3" style="height: 24px;"></div>
                <span id="menu" class="d-lg-none">
                    <ejs-menu class="bg-body-tertiary" [hamburgerMode]="true" showItemOnClick="true" title="" [items]="[{text: 'Home'}, {text: 'Clients'}, {text: 'Marketing'}, {text: 'Contacts'}, {text: 'Others', items: [{text: 'Demos'}, {text: 'Features'}, {text: 'Video Tutorials'}, {text: 'Support Center'}, {text: 'Forum'}]}]" aria-label="menu items" role="menu"></ejs-menu>
                </span>
            </div>
        </div>
    </div>
    <div class="d-none d-lg-block border border-top-0 border-light-subtle bg-body-tertiary py-1 ps-3 pe-4">
        <div class="justify-content-between" style="height: 40px; display: flex; align-items: center;">
            <ejs-menu [items]="[{text: 'Demos'}, {text: 'Features'}, {text: 'Video Tutorials'}, {text: 'Support Center'}, {text: 'Forum'}]" aria-label="menu items" role="menu"></ejs-menu>
            <div class="d-flex align-items-center w-md-auto col-6 col-xl-2 col-lg-3 col-md-2">
                <div class="e-input-group">
                    <input class="e-input" type="text" placeholder="Search" aria-label="search" role="textbox" />
                    <span class="e-input-group-icon e-icons e-search border-start-0"></span>
                </div>
            </div>
        </div>
    </div>
</section>

}