templates/app/partials/header/search.html.twig line 1

Open in your IDE?
  1. {% if document.getProperty('searchPage').url() is defined %}
  2.     {% set searchTarget = document.getProperty('searchPage').url %}
  4.     <form
  5.         id="main-search-form"
  6.         method="get"
  7.         action="{{ searchTarget }}"
  8.         class="flex items-center h-[24px]"
  9.         x-data="{ searchOpen: false }"
  10.     >
  12.         <div class="hidden lg:flex">
  13.             <button class="flex items-center mr-3">
  14.                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#323E48" fill-rule="evenodd" d="M1.641 6.43a4.79 4.79 0 1 1 4.79 4.79 4.794 4.794 0 0 1-4.79-4.79m14.135 8.217-4.307-4.307a6.409 6.409 0 1 0-1.13 1.13l4.308 4.306a.798.798 0 0 0 1.129-1.129"/></svg>
  15.             </button>
  16.             <input
  17.                 x-bind:disabled="searchOpen"
  18.                 type="text"
  19.                 name="term"
  20.                 placeholder="{{ 'Zoeken naar...' | trans }}"
  21.                 class="py-0 text-blue-800 text-xs border-0 placeholder:text-opacity-70 focus:ring-0 focus:outline-none w-[65px] px-0"
  22.             />
  23.         </div>
  25.         <div class="flex h-full lg:hidden">
  26.             <div
  27.                 class="flex items-center px-5 transition-colors cursor-pointer lg:px-10 lg:border-white lg:border-l lg:border-opacity-20 hover:bg-blue-700"
  28.                 @click="searchOpen = !searchOpen"
  29.             >
  30.                 <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20"><path fill="#FFF" fill-rule="evenodd" d="M2.051 8.038a5.988 5.988 0 0 1 11.974 0 5.988 5.988 0 0 1-5.987 5.987 5.993 5.993 0 0 1-5.987-5.987m17.67 10.271-5.384-5.384a8.011 8.011 0 1 0-1.412 1.412l5.384 5.383a.998.998 0 0 0 1.411-1.41"/></svg>
  31.             </div>
  32.             <div
  33.                 class="absolute left-[74px] top-0 bg-blue h-[74px] flex items-center  w-[calc(100vw-74px)]"
  34.                 x-show="searchOpen"
  35.                 @click.outside="searchOpen = false"
  36.                 x-on:resize.window="searchOpen = false"
  37.             >
  38.                 <div class="flex-grow px-3.5 pr-8">
  39.                     <input
  40.                         x-bind:disabled="!searchOpen"
  41.                         type="text"
  42.                         name="term"
  43.                         placeholder="{{ 'Zoeken naar...' | trans }}"
  44.                         class="w-full p-2 border border-white rounded-md border-opacity-20 placeholder:text-white placeholder:text-opacity-70 focus:outline-none bg-blue"
  45.                     />
  46.                 </div>
  47.                 <button class="flex items-center h-full px-5 bg-blue-700 cursor-pointer">
  48.                     <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 20 20"><path fill="#FFF" fill-rule="evenodd" d="M2.051 8.038a5.988 5.988 0 0 1 11.974 0 5.988 5.988 0 0 1-5.987 5.987 5.993 5.993 0 0 1-5.987-5.987m17.67 10.271-5.384-5.384a8.011 8.011 0 1 0-1.412 1.412l5.384 5.383a.998.998 0 0 0 1.411-1.41"/></svg>
  49.                 </button>
  50.             </div>
  51.         </div>
  52.     </form>
  53. {% endif %}