VirtoCommerce · goldenmaya · Oct 30, 2025 · Oct 30, 2025 · Oct 31, 2025 · Nov 5, 2025
@@ -118,8 +118,6 @@
   "color_mobile_menu_navigation": "#e0c287",
   "color_mobile_menu_control": "#ad863f",
 
-  "color_mobile_search_bar_bg": "#78591f",
-
   "color_header_top_bg": "#ffffff",
   "color_header_top_text": "#141517",
   "color_header_top_link": "#867d7a",

@@ -117,8 +117,6 @@
   "color_mobile_menu_navigation": "#b08878",
   "color_mobile_menu_control": "#996c5a",
 
-  "color_mobile_search_bar_bg": "#283034",
-
   "color_header_top_bg": "#3d2b24",
   "color_header_top_text": "#ffffff",
   "color_header_top_link": "#c4a79b",

@@ -118,8 +118,6 @@
   "color_mobile_menu_navigation": "#d84786",
   "color_mobile_active_control": "#d84786",
 
-  "color_mobile_search_bar_bg": "#322252",
-
   "color_header_top_bg": "#ffffff",
   "color_header_top_text": "#322252",
   "color_header_top_link": "#306ac2",

@@ -118,8 +118,6 @@
   "color_mobile_menu_navigation": "#aeb85f",
   "color_mobile_menu_control": "#aeb85f",
 
-  "color_mobile_search_bar_bg": "#484d22",
-
   "color_header_top_bg": "#332829",
   "color_header_top_text": "#ffffff",
   "color_header_top_link": "#d4c9c9",

@@ -37,7 +37,7 @@
 --footer-bottom-link-hover-color: var(--color-footer-bottom-link-hover, var(--color-additional-50));
 --footer-bottom-link-active-color: var(--color-footer-bottom-link-active, var(--color-additional-50));
 
---mobile-search-bar-bg: var(--color-mobile-search-bar-bg, var(--color-secondary-800));
+--mobile-search-bar-bg: var(--color-mobile-search-bar-bg, var(--color-additional-50));
 
 --mobile-menu-bg-color: var(--color-mobile-menu-bg, var(--color-secondary-900));
 --mobile-menu-text-color: var(--color-mobile-menu-text, var(--color-additional-50));

@@ -580,6 +580,10 @@ function isRouteLocationRaw(value: unknown): value is RouteLocationRaw {
 whenever(() => !isMobile.value, hideFiltersSidebar);
 const { addScopeItem, removeScopeItemByType, setQueryScope, preparingScope } = useSearchScore();
 
+const { clearSearchResults } = useSearchBar();
+
+const isMobileLg = breakpoints.smaller("lg");
+
 watch(
   () => props.categoryId,
   async (categoryId) => {
@@ -665,8 +669,6 @@ watchDebounced(
   },
 );
 
-const { clearSearchResults } = useSearchBar();
-
 function changeSearchBarScope(categoryId: string, label?: string) {
   clearCategoryScope();
 
@@ -689,7 +691,10 @@ onBeforeUnmount(() => {
 
 function clearCategoryScope() {
   removeScopeItemByType("category");
-  clearSearchResults();
+
+  if (!isMobileLg.value) {
+    clearSearchResults();
+  }
 }
 
 onMounted(() => {

@@ -80,8 +80,8 @@ import { computed, nextTick, ref, shallowRef, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useNavigations, useWhiteLabeling } from "@/core/composables";
 import { useUser } from "@/shared/account/composables/useUser";
-import { SearchBar } from "@/shared/layout";
 import CatalogMenu from "./catalog-menu.vue";
+import SearchBar from "./search-bar/search-bar.vue";
 import type { StyleValue } from "vue";
 import LinkDefault from "@/shared/layout/components/header/_internal/link-components/link-default.vue";
 

@@ -4,14 +4,17 @@
       <ShipToSelector />
     </div>
 
-    <div class="relative z-[1] bg-[--header-bottom-bg-color]">
+    <div class="relative z-[1]">
       <!-- region Default slot -->
       <transition :name="isAnimated ? 'slide-fade-top' : ''" mode="out-in">
-        <div v-if="customSlots.default">
+        <div v-if="customSlots.default" class="relative z-20 bg-[--header-bottom-bg-color]">
           <component :is="customSlots.default" />
         </div>
 
-        <div v-else class="relative z-10 flex h-14 w-full items-center justify-between gap-x-2 sm:gap-x-6">
+        <div
+          v-else
+          class="relative z-20 flex h-14 w-full items-center justify-between gap-x-2 border-b bg-[--header-bottom-bg-color] sm:gap-x-6"
+        >
           <!-- region Left slot -->
           <component :is="customSlots.left" v-if="customSlots.left" />
 
@@ -91,29 +94,8 @@
       <!-- endregion Default slot -->
 
       <!-- region Mobile Search Bar -->
-      <div v-show="searchBarVisible" class="flex select-none items-center bg-[--mobile-search-bar-bg] p-4">
-        <VcInput
-          v-model="searchPhrase"
-          type="search"
-          maxlength="64"
-          :placeholder="$t('shared.layout.header.mobile.search_bar.input_placeholder')"
-          class="mr-4 grow"
-          :clearable="!!searchPhrase"
-          no-border
-          @clear="reset"
-          @keydown.enter="handleSearch"
-        >
-          <template #append>
-            <BarcodeScanner v-if="!searchPhrase" @scanned-code="onBarcodeScanned" />
-          </template>
-        </VcInput>
-
-        <VcButton :to="searchPhrase && searchPageLink" icon="search" />
-
-        <button type="button" class="-mr-2 ml-2 h-11 appearance-none px-3" @click="hideSearchBar">
-          <VcIcon name="delete-thin" class="fill-additional-50" />
-        </button>
-      </div>
+      <MobileSearchBar :visible="searchBarVisible" />
+      <!-- endregion Mobile Search Bar -->
     </div>
   </header>
 
@@ -137,84 +119,39 @@
 </template>
 
 <script setup lang="ts">
-import { syncRefs, useElementSize, useScrollLock, whenever } from "@vueuse/core";
+import { syncRefs, useElementSize, useScrollLock } from "@vueuse/core";
 import { computed, ref } from "vue";
-import { useRouter } from "vue-router";
-import { useRouteQueryParam, useWhiteLabeling } from "@/core/composables";
-import { useHistoricalEvents } from "@/core/composables/useHistoricalEvents";
+import { useWhiteLabeling } from "@/core/composables";
 import { useModuleSettings } from "@/core/composables/useModuleSettings";
 import { MODULE_XAPI_KEYS } from "@/core/constants/modules";
-import { QueryParamName } from "@/core/enums";
 import { ROUTES } from "@/router/routes/constants";
 import { useShortCart } from "@/shared/cart";
 import { useNestedMobileHeader } from "@/shared/layout";
 import { useSearchBar } from "@/shared/layout/composables/useSearchBar";
-import { useSearchScore } from "@/shared/layout/composables/useSearchScore";
 import { ShipToSelector } from "@/shared/ship-to-location";
 import MobileMenu from "./mobile-menu/mobile-menu.vue";
+import MobileSearchBar from "./mobile-search-bar.vue";
 import type { StyleValue } from "vue";
-import type { RouteLocationRaw } from "vue-router";
-import BarcodeScanner from "@/shared/layout/components/search-bar/barcode-scanner.vue";
 
-const router = useRouter();
-
-const searchPhrase = ref("");
-const searchPhraseInUrl = useRouteQueryParam<string>(QueryParamName.SearchPhrase);
 const mobileMenuVisible = ref(false);
 const headerElement = ref(null);
+
 const { getSettingValue } = useModuleSettings(MODULE_XAPI_KEYS.MODULE_ID);
 const support_phone_number = getSettingValue(MODULE_XAPI_KEYS.SUPPORT_PHONE_NUMBER);
 
 const { customSlots, isAnimated } = useNestedMobileHeader();
-const { searchBarVisible, toggleSearchBar, hideSearchBar } = useSearchBar();
+const { searchBarVisible, toggleSearchBar } = useSearchBar();
+
 const { height } = useElementSize(headerElement);
 const { cart } = useShortCart();
 const { logoUrl } = useWhiteLabeling();
-const { saveSearchQuery } = useHistoricalEvents();
-const { isCategoryScope } = useSearchScore();
 
 const placeholderStyle = computed<StyleValue | undefined>(() =>
   height.value ? { height: height.value + "px" } : undefined,
 );
 
-const searchPageLink = computed<RouteLocationRaw>(() => {
-  if (isCategoryScope.value) {
-    return {
-      path: router.currentRoute.value.path,
-      query: {
-        [QueryParamName.SearchPhrase]: searchPhrase.value.trim(),
-      },
-    };
-  } else {
-    return {
-      name: ROUTES.SEARCH.NAME,
-      query: {
-        [QueryParamName.SearchPhrase]: searchPhrase.value.trim(),
-      },
-    };
-  }
-});
-
-function reset() {
-  searchPhrase.value = "";
-}
-
-function onBarcodeScanned(value: string) {
-  if (value) {
-    searchPhrase.value = value;
-    void router.push(searchPageLink.value);
-  }
-}
-
-function handleSearch() {
-  if (searchPhrase.value) {
-    void saveSearchQuery(searchPhrase.value);
-
-    void router.replace(searchPageLink.value);
-  }
-}
-
-syncRefs(mobileMenuVisible, useScrollLock(document.body));
-
-whenever(searchBarVisible, () => (searchPhrase.value = searchPhraseInUrl.value ?? ""), { immediate: true });
+const isScrollLocked = computed(() => mobileMenuVisible.value || searchBarVisible.value);
+const scrollLock = useScrollLock(document.body);
+
+syncRefs(isScrollLocked, scrollLock);
 </script>