Add mobile search icon to restore mobile search functionality

- Add magnifying glass search icon for mobile/tablet screens next to hamburger menu
- Position mobile search button between logo and menu toggle for optimal UX
- Update search modal JavaScript to handle both desktop and mobile search buttons
- Maintain consistent styling and accessibility features across devices
- Restore mobile search access that was lost when desktop search was updated

The mobile search icon provides the same search modal functionality as the desktop 'Search' button, ensuring users on all devices can access the site search feature.

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()