POC fullscreen search

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"
     {{-- Turbo does not understand redirects to external URLs yet --}}
     data-turbo="false"
 >

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

@@ -1,42 +1,55 @@
 <autocomplete v-slot="autocompleteSlotProps" :hits-per-page="{{ config('rapidez.frontend.autocomplete.size', 3) }}">
-    <div class="relative w-full">
-        <ais-instant-search
-            v-if="autocompleteSlotProps.searchClient"
-            :search-client="autocompleteSlotProps.searchClient"
-            :middlewares="autocompleteSlotProps.middlewares"
-            :index-name="config.index.product"
-            class="contents"
-            v-cloak
-        >
-            <div class="contents">
-                <div class="searchbox group/autocomplete">
-                    <ais-autocomplete>
-                        <template v-slot="{ currentRefinement, refine }">
-                            <x-rapidez::autocomplete.input
-                                v-bind:value="currentRefinement"
-                                v-on:focus="() => {
-                                    refine($root.autocompleteFacadeQuery || currentRefinement);
-                                    $root.autocompleteFacadeQuery = null;
-                                }"
-                                v-on:input="refine($event.currentTarget.value)"
-                                list="search-history"
-                            />
-                            <div v-bind:class="{hidden: !currentRefinement}" class="absolute inset-x-0 top-full mt-1 bg-white rounded-md z-header-autocomplete group-has-[:focus]/autocomplete:block hover:block">
-                                @include('rapidez::layouts.partials.header.autocomplete.results')
+    <toggler>
+        <div class="relative w-full" slot-scope="{ isOpen, toggle }">
+            <ais-instant-search
+                v-if="autocompleteSlotProps.searchClient && isOpen"
+                :search-client="autocompleteSlotProps.searchClient"
+                :middlewares="autocompleteSlotProps.middlewares"
+                :index-name="config.index.product"
+                class="contents"
+                v-cloak
+            >
+                <div class="fixed inset-0 h-full bg-white/90 backdrop-blur-sm searchbox group/autocomplete z-header-autocomplete-popup flex flex-col pt-14 px-10 overflow-y-auto">
+                    <div class="relative">
+                        <div class="flex items-start relative">
+                            <x-rapidez::button.outline v-on:click="toggle(); refine('')" class="absolute left-0 top-0">
+                                <x-heroicon-o-chevron-left class="size-5" />
+                            </x-rapidez::button.outline>
+                            <img src="https://raw.githubusercontent.com/rapidez/art/master/r.svg" alt="Rapidez logo" height="50" width="50" class="mx-auto mb-11">
+                        </div>
+                        <div class="flex-1 overflow-hidden">
+                            <div class="max-w-xl bg-white rounded-3xl shadow-xl mx-auto border border-muted w-full px-9 py-8 mb-10">
+                                <ais-autocomplete v-slot="{ currentRefinement, refine }">
+                                    <x-rapidez::autocomplete.input
+                                        class="rounded-full focus:ring-primary focus:border-primary transition h-14 focus:ring-2"
+                                        v-bind:value="currentRefinement"
+                                        v-on:focus="() => {
+                                            refine($root.autocompleteFacadeQuery || currentRefinement);
+                                            $root.autocompleteFacadeQuery = null;
+                                        }"
+                                        v-on:input="refine($event.currentTarget.value)"
+                                        list="search-history"
+                                    />
+                                    <div v-bind:class="{hidden: !currentRefinement}" class="group-has-[:focus]/autocomplete:block">
+                                        @include('rapidez::layouts.partials.header.autocomplete.results')
+                                    </div>
+                                    {{-- <div v-bind:class="{hidden: !currentRefinement}" v-on:click="refine('')" class="fixed inset-0 bg-backdrop z-header-autocomplete-overlay group-has-[:focus]/autocomplete:block"></div> --}}
+                                </ais-autocomplete>
                             </div>
-                            <div v-bind:class="{hidden: !currentRefinement}" v-on:click="refine('')" class="fixed inset-0 bg-backdrop z-header-autocomplete-overlay group-has-[:focus]/autocomplete:block"></div>
-                        </template>
-                    </ais-autocomplete>
-                    <ais-stats-analytics></ais-stats-analytics>
+                        </div>
+                        @includeWhen(config('rapidez.frontend.autocomplete.additionals.products') === null,'rapidez::layouts.partials.header.autocomplete.products')
+                        <ais-stats-analytics></ais-stats-analytics>
+                    </div>
                 </div>
+            </ais-instant-search>
+
+            <div class="relative w-full">
+                <x-rapidez::autocomplete.input
+                    v-model="$root.autocompleteFacadeQuery"
+                    v-on:focus="window.document.dispatchEvent(new window.Event('loadAutoComplete')), toggle()"
+                    v-on:mouseover="window.document.dispatchEvent(new window.Event('loadAutoComplete'))"
+                />
             </div>
-        </ais-instant-search>
-        <div v-else class="relative w-full">
-            <x-rapidez::autocomplete.input
-                v-model="$root.autocompleteFacadeQuery"
-                v-on:focus="window.document.dispatchEvent(new window.Event('loadAutoComplete'))"
-                v-on:mouseover="window.document.dispatchEvent(new window.Event('loadAutoComplete'))"
-            />
         </div>
-    </div>
+    </toggler>
 </autocomplete>

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

@@ -4,20 +4,20 @@
             <x-rapidez::autocomplete.title>
                 @lang('Products')
             </x-rapidez::autocomplete.title>
-            <ul class="gap-2 flex flex-col">
+            <ul class="grid grid-cols-5 gap-x-5 gap-y-8">
                 <li
                     v-for="(item, count) in items"
                     class="hover:bg-muted"
                     data-testid="autocomplete-item"
                 >
-                    <a :href="item.url | url" v-on:click="sendEvent('click', item, 'Hit Clicked')" class="group relative flex flex-wrap p-2">
+                    <a :href="item.url | url" v-on:click="sendEvent('click', item, 'Hit Clicked')" class="group relative flex flex-col flex-wrap p-2 bg-white border border-muted rounded-xl shadow-xl">
                         <img
                             v-if="item.thumbnail"
-                            :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento/catalog/product' + item.thumbnail + '.webp'"
-                            class="shrink-0 self-center object-contain size-16 mix-blend-multiply"
+                            :src="'/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product' + item.thumbnail + '.webp'"
+                            class="shrink-0 self-center object-contain mix-blend-multipl h-64 w-auto"
                             :alt="item.name"
-                            width="200"
-                            height="200"
+                            width="400"
+                            height="400"
                         />
                         <x-rapidez::no-image v-else class="mb-3 h-48 rounded-t" />
                         <div class="flex flex-1 justify-center flex-col px-2">

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

@@ -1,6 +1,5 @@
 @foreach (config('rapidez.frontend.autocomplete.additionals') as $key => $fields)
     @includeIf('rapidez::layouts.partials.header.autocomplete.' . $key)
 @endforeach
-@includeWhen(config('rapidez.frontend.autocomplete.additionals.products') === null,'rapidez::layouts.partials.header.autocomplete.products')
 @include('rapidez::layouts.partials.header.autocomplete.all-results')
 @include('rapidez::layouts.partials.header.autocomplete.no-results')

tailwind.config.js

@@ -74,11 +74,11 @@ export default {
             },
             zIndex: {
                 'header': '100',
-                'header-autocomplete-overlay': '10',
                 'header-autocomplete': '20',
                 'header-dropdown': '30',
                 'header-minicart': '30',
                 'header-autocomplete-button': '30',
+                'header-autocomplete-popup': '40',
 
                 'notifications': '110',