@inject IWorkContext workContext
@{ 
    var supportRtl = workContext.WorkingLanguage.Rtl;
}
<div class="header-nav">
    <nav class="navbar navbar-light navbar-expand">
        <b-container id="header-container">
            <div class="menu-container">
                <template>
                    <button aria-label="menu-toggler" class="btn menu-toggler" v-b-toggle.sidebar-menu><span></span><span></span><span></span></button>
                    <b-sidebar id="sidebar-menu"
                               backdrop
                               shadow
                               @if (supportRtl) { <text>right</text> }>
                        <ul class="Menu -vertical">
                            @await Component.InvokeAsync("Menu")
                        </ul>
                    </b-sidebar>
                </template>
            </div>
            <partial name="Partials/Logo" />
            <ul class="navbar-nav top-header-items order-3">
                <template>
                    <li class="nav-item">
                        <span class="nav-link">
                            <template>
                                <b-form-checkbox size="lg" v-model="darkMode" name="contrast-button" class="contrast-switch" switch>
                                    <b-icon icon="sun" class="light" variant="info"></b-icon>
                                    <b-icon icon="moon" class="dark" variant="dark"></b-icon>
                                </b-form-checkbox>
                            </template>
                        </span>
                    </li>
                </template>
                <li class="nav-item">
                    <a href="#" target="_self" class="nav-link">
                        <b-icon icon="search" :variant="[darkMode ? 'white' : 'dark']" v-b-modal.search-box></b-icon>
                    </a>
                </li>
                <b-modal id="search-box" ref="search-box" :dark-theme="darkMode" @@shown="vm.$refs.searchBoxInput.focus()"
                         hide-footer hide-header size="xl">
                    @await Component.InvokeAsync("SearchBox")
                </b-modal>
                <template>
                    <li class="nav-item">
                        <span class="nav-link">
                            <b-icon icon="person-circle" :variant="[darkMode ? 'white' : 'dark']" v-b-toggle.sidebar-right></b-icon>
                        </span>
                        <template>
                            <b-sidebar id="sidebar-right" body-class="user-panel" title="@Loc["Account.MyAccount"]" @if (!supportRtl) { <text>right</text> } backdrop>
                                <div class="d-inline-flex flex-wrap mb-2">
                                    <partial name="Partials/Selector_TaxType" />
                                    <partial name="Partials/Selector_Currency" />
                                    <partial name="Partials/Selector_Language" />
                                    <partial name="Partials/Selector_Store" />
                                    <partial name="Partials/Selector_Theme" />
                                    @await Component.InvokeAsync("Widget", new { widgetZone = "header_selectors" })
                                </div>
                                <partial name="Partials/HeaderLinks" />
                            </b-sidebar>
                        </template>
                    </li>
                </template>
                <partial name="Partials/ShoppingCartLinks" />
            </ul>
        </b-container>
    </nav>
</div>
