From 852535d793260c8651a894a7f7682b2027bcc8e9 Mon Sep 17 00:00:00 2001
From: Krecik <przemyslaw.koroscik@gmail.com>
Date: Thu, 1 Oct 2020 10:18:53 +0200
Subject: [PATCH 1/4] feat(default-theme): added searchbar on mobile devices

---
 .../default-theme/components/SwHeader.vue     |  2 +-
 .../default-theme/components/SwSearchBar.vue  | 36 ++++++++++++++-----
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/default-theme/components/SwHeader.vue b/packages/default-theme/components/SwHeader.vue
index 75cf3ffb5..e8f70f5e5 100644
--- a/packages/default-theme/components/SwHeader.vue
+++ b/packages/default-theme/components/SwHeader.vue
@@ -8,7 +8,7 @@
 
     <SfHeader
       :title="$t('page.title')"
-      class="sw-header"
+      class="sw-header sf-header--has-mobile-search"
       :has-mobile-search="false"
       :is-sticky="false"
     >
diff --git a/packages/default-theme/components/SwSearchBar.vue b/packages/default-theme/components/SwSearchBar.vue
index 0ebb0f6e1..1b8086eac 100644
--- a/packages/default-theme/components/SwSearchBar.vue
+++ b/packages/default-theme/components/SwSearchBar.vue
@@ -1,16 +1,18 @@
 <template>
   <div class="sw-search-bar">
     <SfSearchBar
+      v-model="typingQuery"
       :placeholder="$t('Search for products')"
       :aria-label="$t('Search for products')"
-      class="sf-header__search desktop-only"
-      v-model="typingQuery"
-      @keyup.native="performSuggestSearch"
+      class="sf-header__search"
+      data-cy="search-bar"
+      @keyup.native="searchbarQuery"
       @enter="performSearch"
       @focus="isSuggestBoxOpen = true"
-      data-cy="search-bar"
     />
+
     <SwSuggestSearch
+      v-if="!isMobile"
       :products="suggestResultProducts"
       :total-found="suggestResultTotal"
       :search-phrase="typingQuery"
@@ -22,9 +24,13 @@
 </template>
 
 <script>
-import { ref, reactive, onMounted, watch, computed } from "@vue/composition-api"
+import { ref, computed } from "@vue/composition-api"
 import { getSearchPageUrl } from "@shopware-pwa/default-theme/helpers"
 import { SfSearchBar } from "@storefront-ui/vue"
+import {
+  mapMobileObserver,
+  unMapMobileObserver,
+} from "@storefront-ui/vue/src/utilities/mobile-observer"
 import { useProductSearch } from "@shopware-pwa/composables"
 import { debounce } from "@shopware-pwa/helpers"
 import SwSuggestSearch from "@shopware-pwa/default-theme/components/SwSuggestSearch"
@@ -78,6 +84,17 @@ export default {
       performSuggestSearch,
     }
   },
+  computed: {
+    ...mapMobileObserver(),
+  },
+  watch: {
+    $route(to, from) {
+      this.isSuggestBoxOpen = false
+    },
+  },
+  beforeDestroy() {
+    unMapMobileObserver()
+  },
   methods: {
     performSearch() {
       if (this.typingQuery.length > 0) {
@@ -85,10 +102,11 @@ export default {
         this.$router.push(this.$i18n.path(getSearchPageUrl(this.typingQuery)))
       }
     },
-  },
-  watch: {
-    $route(to, from) {
-      this.isSuggestBoxOpen = false
+
+    searchbarQuery() {
+      if (!this.isMobile) {
+        this.performSuggestSearch()
+      }
     },
   },
 }

From c7ff3c47584fe416f2fc33eba067446346ba55b7 Mon Sep 17 00:00:00 2001
From: patzick <13100280+patzick@users.noreply.github.com>
Date: Fri, 9 Oct 2020 13:02:29 +0200
Subject: [PATCH 2/4] feat: load component only for desktop

---
 packages/default-theme/components/SwSearchBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/default-theme/components/SwSearchBar.vue b/packages/default-theme/components/SwSearchBar.vue
index 0247b61d8..3c26b2ddf 100644
--- a/packages/default-theme/components/SwSearchBar.vue
+++ b/packages/default-theme/components/SwSearchBar.vue
@@ -32,7 +32,7 @@ import {
   unMapMobileObserver,
 } from "@storefront-ui/vue/src/utilities/mobile-observer"
 import { debounce } from "@shopware-pwa/helpers"
-import SwSuggestSearch from "@/components/SwSuggestSearch"
+const SwSuggestSearch = () => import("@/components/SwSuggestSearch")
 
 export default {
   components: {

From aad8b5ba36b00878b538d69404d49bf981ee3564 Mon Sep 17 00:00:00 2001
From: patzick <13100280+patzick@users.noreply.github.com>
Date: Fri, 9 Oct 2020 13:19:01 +0200
Subject: [PATCH 3/4] chore: update after moving from setup

---
 packages/default-theme/components/SwSearchBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/default-theme/components/SwSearchBar.vue b/packages/default-theme/components/SwSearchBar.vue
index 3c26b2ddf..aecae0917 100644
--- a/packages/default-theme/components/SwSearchBar.vue
+++ b/packages/default-theme/components/SwSearchBar.vue
@@ -73,7 +73,7 @@ export default {
     },
     typingQuery(value) {
       if (!this.isMobile) {
-        performSuggestSearch(typingQuery.value)
+        this.performSuggestSearch(value)
       }
     },
   },

From f3cc10153813a829c0eb4a5211dc6abda896963d Mon Sep 17 00:00:00 2001
From: patzick <13100280+patzick@users.noreply.github.com>
Date: Fri, 9 Oct 2020 15:07:05 +0200
Subject: [PATCH 4/4] chore: add missing return

---
 packages/default-theme/components/SwSearchBar.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/default-theme/components/SwSearchBar.vue b/packages/default-theme/components/SwSearchBar.vue
index aecae0917..ff00a07ac 100644
--- a/packages/default-theme/components/SwSearchBar.vue
+++ b/packages/default-theme/components/SwSearchBar.vue
@@ -62,6 +62,7 @@ export default {
       getTotal,
       isSuggestBoxOpen,
       typingQuery,
+      performSuggestSearch,
     }
   },
   computed: {