x-transition:leave-end="opacity-0"
x-cloak>
- <x-close @click.prevent="searchOpen = false; overlayOpen = false;" />
+ <x-close @click.prevent="closeSearch()" />
{{-- Search Field --}}
<div class="w-full pt-30 flex-grow-0">
<p class="font-medium text-2xl">Tapez ici le ou les mots-clé de votre recherche</p>
<input
- x-ref="searchField"
+ id="searchField"
x-model="query"
+ @keyup.enter="$el.blur()" {{-- Remove focus on enter in order to hide virtual keyboard --}}
type="search"
placeholder="Recherche"
class="appearance-none outline-none
@stack('after_css')
<title>{{ config('app.name') }}</title>
</head>
-<body x-data="{ menuOpen: false, overlayOpen: false, searchOpen: false }"
- :class="{ 'menu-open': menuOpen, 'overflow-hidden': overlayOpen }"
+<body x-data="{
+ overlayOpen: false, // Tracks when a modal is open so background scroll can be frozen
+ menuOpen: false,
+ searchOpen: false,
+ openSearch() {
+ this.overlayOpen = true;
+ this.searchOpen = true;
+ $nextTick(() => {
+ document.getElementById('searchField').focus();
+ });
+ },
+ closeSearch() {
+ this.overlayOpen = false;
+ this.searchOpen = false;
+ },
+ }"
+ :class="{
+ 'menu-open': menuOpen,
+ 'overflow-hidden': overlayOpen
+ }"
class="font-primary p-8">
<header class="site-header relative flex justify-between z-20 transition-colors duration-500">
{{-- Menu Toggle --}}
{{-- Search Icon --}}
- <a href="#" @click.prevent="overlayOpen = true; searchOpen = true;">
+ <a href="#" @click.prevent="openSearch()">
<svg class="stroke-current fixed top-8 right-8" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 29.414 29.414">
<g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M1 12.25A11.25 11.25 0 1 0 12.25 1 11.25 11.25 0 0 0 1 12.25Z"/>
projects / odl.git / commitdiff