Merge pull request #2148 from redis/DOC-5745

Add mobile search icon to restore mobile search functionality

Author: mich-elle-luna

layouts/partials/header.html

@@ -54,6 +54,10 @@
         meeting</a>
       <a class="hidden lg:inline-flex items-center justify-center px-6 py-2 mr-4 border-2 border-redis-red-500 text-white font-bold rounded-md hover:bg-redis-red-500 transition-colors"
         href="https://redis.io/try-free/">Try Redis</a>
+      <button id="search-button-mobile" type="button" class="lg:hidden p-1 mt-1 transition-colors hover:text-redis-red-500">
+        <span class="sr-only">Open search</span>
+        {{ partial "icons/search.html" }}
+      </button>
       <button data-menu-toggle aria-expanded="false" type="button"
         class="menu-toggle lg:hidden p-1 mt-1 transition-colors hover:text-redis-red-500">
         <span class="sr-only">Open main menu</span>

layouts/partials/search-modal.html

@@ -68,6 +68,7 @@
   const searchModal = (() => {
     const searchSite = encodeURIComponent(window.location.pathname)
     const searchButton = document.querySelector('#search-button')
+    const searchButtonMobile = document.querySelector('#search-button-mobile')
     const searchContainer = document.querySelector('#search-container')
     const searchInput = searchContainer.querySelector('#search-input')
     const searchSelect = searchContainer.querySelector('#search-select')
@@ -391,7 +392,7 @@
 
     // Click handler function
     function clickHandler(event) {
-      if (event.target.closest('#search-button')) {
+      if (event.target.closest('#search-button') || event.target.closest('#search-button-mobile')) {
         startSearch()
       } else if (event.target.closest('#search-cancel') || event.target.matches('#search-container')) {
         stopSearch()