POC fullscreen search

lang/nl.json

@@ -49,6 +49,7 @@
     "Maximum image width": "Maximale breedte",
     "Middlename": "Tussenvoegsel",
     "More options": "Meer opties",
+    "Show more": "Toon meer",
     "My billing and shipping address are the same": "Mijn factuur- en verzendadres zijn hetzelfde",
     "New address": "Nieuw adres",
     "Next": "Volgende",

package.json

@@ -19,7 +19,8 @@
         "@types/node": "^24.0.1",
         "@vitejs/plugin-vue2": "^2.2.0",
         "@vueuse/core": "^11.1.0",
-        "@vueuse/integrations": "^10.11.0",
+        "@vueuse/integrations": "^11.1.0",
+        "@vueuse/components": "^11.1.0",
         "autoprefixer": "^10.4.15",
         "cross-env": "^7.0.3",
         "dotenv": "^17.2.0",

resources/js/components/Elements/Toggler.vue

@@ -19,8 +19,8 @@ export default {
         this.isOpen = this.open
     },
     methods: {
-        toggle() {
-            this.isOpen = !this.isOpen
+        toggle(shouldOpen) {
+            this.isOpen = shouldOpen ?? !this.isOpen
 
             if (this.callback) {
                 this.callback(this.isOpen)

resources/js/instantsearch.js

@@ -3,6 +3,7 @@ import { addQuery } from './stores/useSearchHistory'
 // Shared between Autocomplete and Listing
 Vue.component('ais-instant-search', () => import('vue-instantsearch/vue2/es/src/components/InstantSearch'))
 Vue.component('ais-hits', () => import('vue-instantsearch/vue2/es/src/components/Hits.js'))
+Vue.component('ais-infinite-hits', () => import('vue-instantsearch/vue2/es/src/components/InfiniteHits.vue.js'))
 Vue.component('ais-configure', () => import('vue-instantsearch/vue2/es/src/components/Configure.js'))
 Vue.component('ais-autocomplete', () => import('vue-instantsearch/vue2/es/src/components/Autocomplete.vue.js'))
 Vue.component('ais-search-box', () => import('vue-instantsearch/vue2/es/src/components/SearchBox.vue.js'))

resources/js/vue.js

@@ -2,7 +2,9 @@ import Vue from 'vue'
 window.Vue = Vue
 
 import { directive as onClickaway } from 'vue-clickaway'
+import { vIntersectionObserver } from '@vueuse/components'
 Vue.directive('on-click-away', onClickaway)
+Vue.directive('intersection-observer', vIntersectionObserver)
 Vue.directive('blur', (el) => {
     el.removeAttribute('v-blur')
 })

resources/views/components/autocomplete/input.blade.php

@@ -2,7 +2,7 @@
     id="autocomplete-form"
     method="get"
     action="{{ route('search') }}"
-    class="flex relative z-header-autocomplete"
+    class="flex relative w-full"
     {{-- Turbo does not understand redirects to external URLs yet --}}
     data-turbo="false"
 >

resources/views/layouts/partials/header.blade.php

@@ -14,7 +14,7 @@
                 <x-heroicon-o-bars-3 class="inline w-7" />
             </label>
         </div>
-        <div class="flex items-center h-12 max-md:order-last max-md:w-full md:max-w-lg md:flex-1 max-lg:mt-2">
+        <div class="max-md:order-last h-12 w-full md:max-w-lg max-lg:mt-2 md:flex-1">
             @include('rapidez::layouts.partials.header.autocomplete')
         </div>
         <div class="ml-auto flex items-center justify-end pl-3">
@@ -28,4 +28,5 @@
             </div>
         </nav>
     </div>
+
 </header>

tailwind.config.js

@@ -74,7 +74,6 @@ export default {
             },
             zIndex: {
                 'header': '100',
-                'header-autocomplete-overlay': '10',
                 'header-autocomplete': '20',
                 'header-dropdown': '30',
                 'header-minicart': '30',