POC fullscreen search

lang/nl.json

@@ -88,6 +88,7 @@
     "Shipping address": "Verzendadres",
     "Shipping method": "Verzendmethode",
     "Show cart": "Bekijk winkelwagen",
+    "Show more": "Toon meer",
     "Show results": "Bekijk resultaten",
     "Sign up for our newsletter to stay up to date.": "Meld je aan voor onze nieuwsbrief om op de hoogte te blijven.",
     "Sorry! No image": "Sorry! Geen afbeelding",

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/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>