Skip to content

Commit b3851d3

Browse files
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.
1 parent c22d99f commit b3851d3

File tree

2 files changed

+6
-1
lines changed

2 files changed

+6
-1
lines changed

layouts/partials/header.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,10 @@
5454
meeting</a>
5555
<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"
5656
href="https://redis.io/try-free/">Try Redis</a>
57+
<button id="search-button-mobile" type="button" class="lg:hidden p-1 mt-1 transition-colors hover:text-redis-red-500">
58+
<span class="sr-only">Open search</span>
59+
{{ partial "icons/search.html" }}
60+
</button>
5761
<button data-menu-toggle aria-expanded="false" type="button"
5862
class="menu-toggle lg:hidden p-1 mt-1 transition-colors hover:text-redis-red-500">
5963
<span class="sr-only">Open main menu</span>

layouts/partials/search-modal.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@
6868
const searchModal = (() => {
6969
const searchSite = encodeURIComponent(window.location.pathname)
7070
const searchButton = document.querySelector('#search-button')
71+
const searchButtonMobile = document.querySelector('#search-button-mobile')
7172
const searchContainer = document.querySelector('#search-container')
7273
const searchInput = searchContainer.querySelector('#search-input')
7374
const searchSelect = searchContainer.querySelector('#search-select')
@@ -391,7 +392,7 @@
391392

392393
// Click handler function
393394
function clickHandler(event) {
394-
if (event.target.closest('#search-button')) {
395+
if (event.target.closest('#search-button') || event.target.closest('#search-button-mobile')) {
395396
startSearch()
396397
} else if (event.target.closest('#search-cancel') || event.target.matches('#search-container')) {
397398
stopSearch()

0 commit comments

Comments
 (0)