From 7f191613a4e57d13a8ee580445dfd3359ac158c4 Mon Sep 17 00:00:00 2001
From: garvit maheswari <maheshwarigarvit470@gmail.com>
Date: Thu, 14 Nov 2024 16:13:28 +0530
Subject: [PATCH] Usability issue with search on main page #412

---
 theme/apache/templates/base.html | 35 ++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/theme/apache/templates/base.html b/theme/apache/templates/base.html
index fa36bf069..fa7d80f0e 100644
--- a/theme/apache/templates/base.html
+++ b/theme/apache/templates/base.html
@@ -32,25 +32,38 @@
   <link href="/css/styles.css" rel="stylesheet">
   <link href="/css/new-ui.css" rel="stylesheet">
   <script src="https://www.apachecon.com/event-images/snippet.js"></script>
-  <style>
+ 
     {% include "styles.css" %}
-  </style>
-
+  
   <!-- pagefind search -->
-  <link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
+  <link href="/_pagefind/pagefind-ui.css" rel="stylesheet"> 
   <script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
+  
   <script>
     window.addEventListener('DOMContentLoaded', (event) => {
-        new PagefindUI({ element: "#pagefind-search" });
-    });
-    var pageTitle = '{{ page.title }}';
-    if(pageTitle === '404'){
-      window.addEventListener('DOMContentLoaded', (event) => {
-          new PagefindUI({ element: "#page-404-search" });
+      // Initialize the Pagefind UI for the main search
+      new PagefindUI({ element: "#pagefind-search" });
+  
+      // Get the search button and input field
+      const searchButton = document.querySelector('.dropdown-toggle'); //  class of the button
+      const searchInput = document.querySelector('#pagefind-search input'); // The input field for Pagefind search
+  
+      // Add click event to focus on the input when the button is clicked
+      searchButton.addEventListener('click', () => {
+        searchInput.focus(); // Focus on the input field when the button is clicked
       });
-    }
+  
+      // Check if the page is a 404 and initialize the search UI for the 404 page
+      const pageTitle = '{{ page.title }}'; // Assuming this is a template engine placeholder
+      if (pageTitle === '404') {
+        // Initialize the Pagefind UI for the 404 page
+        new PagefindUI({ element: "#page-404-search" });
+      }
+    });
   </script>
   
+  
+  
 
   {% if page.notice %}<!-- {{ page.notice }} -->{% endif %}
   {% if page.license %}<!-- {{ page.license }} -->{% endif %}