ildar-shaymukhametov_grandnode-refactorings/Grand.Web/Views/Shared/Header.cshtml
<header role="presentation">
    @await Component.InvokeAsync("Widget", new { widgetZone = "header" })
    <div class="container px-lg-3 px-2">
        <div class="headBottom d-flex align-items-center d-lg-inline-flex text-lg-left text-center mt-0 mb-0">
            <div class="header-logo pr-0 pl-0 d-inline-flex align-items-center">
                @await Component.InvokeAsync("Logo")
            </div>
            <div class="formSearch ml-auto pl-sm-3 pl-2 d-inline-flex align-items-end w-100">
                @await Component.InvokeAsync("SearchBox")
            </div>
            <div class="side-panel d-inline-flex">
                <a class="js-offcanvas-trigger mobile-menu-trigger d-lg-none d-flex justify-content-center align-content-center" data-offcanvas-trigger="mobile_menu" href="#mobile_menu">
                    <span class="mdi mdi-menu"></span>
                </a>
                <a class="js-offcanvas-trigger user-panel-trigger d-flex justify-content-center align-content-center ml-lg-3 ml-0" data-offcanvas-trigger="user_panel" href="#user_panel">
                    <span class="mdi mdi-account-outline"></span>
                </a>
                @await Component.InvokeAsync("ShoppingCartLinks")
            </div>
        </div>
    </div>
    <nav class="navbar mainNav navbar-expand-sm offcanvas-desktop">
        <div class="navbar-collapse container">
            <ul class="navbar-nav">
                @await Component.InvokeAsync("TopMenu")
            </ul>
        </div>
    </nav>
</header>
