From b3851d37485f13d23a1daa00d1689aaeb21c1a81 Mon Sep 17 00:00:00 2001
From: mich-elle-luna <michelle.luna@redis.com>
Date: Fri, 19 Sep 2025 07:41:40 -0700
Subject: [PATCH] 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.
---
 layouts/partials/header.html       | 4 ++++
 layouts/partials/search-modal.html | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 776cb72125..9c65cf7074 100644
--- a/layouts/partials/header.html
+++ b/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>
diff --git a/layouts/partials/search-modal.html b/layouts/partials/search-modal.html
index 7b2cc3f648..e25b0b1e2b 100644
--- a/layouts/partials/search-modal.html
+++ b/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()