<div id="search-panel" class="opacity-100 z-50 absolute pin-r pin-l drawer-hidden drawer-visible center">

<div class="py-3 px-3 lg:px-4 bg-grey-dark">
<div class="w-full md:w-3/5 relative center mx-auto">
<div class="absolute mr-8 mt-3 text-grey">
  {{- partial "svg/magnifier.svg" (dict "size" "35px") -}}
</div>

<div class="flex flex-wrap items-center justify-between">
  <input type="search" id="searchbox" class="center ml-8 needs-js text-3xl border px-3 block py-2 w-full bg-grey-dark nice-outline text-white border-transparent" aria-labelledby="search_label" autocomplete="off" placeholder="Start typing" type="text" name="query" value="">
</div>
</div>

{{/* <button type="reset" title="Clear the search query." class="ais-search-box--reset">
  {{- partial "svg/reset.svg" (dict "size" "15px") -}}
</button> */}}


</div>
<div id="results" class="hidden">
  {{partial "search/results-global.html" .}}
  </div>
</div>


<style>
.nice-outline {
outline:none;text-decoration: underline;

}
.ais-search-box--reset {
  height: 16px;
  color: grey;
}
  .drawer-visible {
    /* transform: translate(0, 0px); */
    transform: translate3d(0,  0,  10);
    opacity: 1;
    //transition: transform .25s ease-out, opacity 2.95s ease-in-out;
  }
  .drawer-hidden {
    /* transform: translate(-250000, 0); */
    opacity: 0;
    transform: translate3d(0,  -25000px, 0)

  }

  .body-hidden {

    opacity: 0.05;
  }

  .ais-search-box--powered-by, .ais-search-box--powered-by a {
    font-size: .875rem;
    float:right;
    text-decoration: none;
    color: #ccc;
    margin-bottom: 1rem;
  }
</style>

Move logic to a partial
Move logic to a partial

Ref #32
