Keep search bar expanded when it has content

Author: JesusValeraDev

css/components/header.css

@@ -27,6 +27,13 @@
   box-sizing: border-box;
 }
 
+@media (min-width: 1040px) and (max-width: 1280px) {
+  .site-header__container {
+    gap: var(--space-sm);
+    padding: 0 var(--space-md);
+  }
+}
+
 @media (max-width: 767px) {
   .site-header__container {
     padding: 0 var(--space-md);
@@ -153,6 +160,12 @@
     margin: 0;
   }
 
+  @media (max-width: 1280px) {
+    .site-header__navigation ul {
+      gap: var(--space-md);
+    }
+  }
+
   .site-header__navigation li {
     margin: 0;
     padding: 0;

static/mobile-menu.js

@@ -1,5 +1,3 @@
-// Mobile Menu Toggle - Simple and Robust
-
 // Wait for DOM to be fully loaded
 document.addEventListener('DOMContentLoaded', function() {
   const menuToggle = document.getElementById('mobile-menu-toggle');

static/search.js

@@ -13,10 +13,14 @@ const headerContainer = document.querySelector(".site-header__container");
 let searchItemSelected = null;
 let resultsItemsIndex = -1;
 
-// Function to update search container class based on input content
+// Function to update search container class based on input content and focus
 function updateSearchContainerClass() {
     if (searchInput && searchContainer) {
-        if (searchInput.value.trim() !== "") {
+        const hasContent = searchInput.value.trim() !== "";
+        const isFocused = document.activeElement === searchInput;
+        
+        // Keep expanded if input has content OR is focused
+        if (hasContent || isFocused) {
             searchContainer.classList.add("has-content");
             if (headerContainer) {
                 headerContainer.classList.add("search-expanded");
@@ -213,13 +217,15 @@ function initSearch() {
         updateSearchContainerClass();
     });
     searchInput.addEventListener("focusin", function () {
+        updateSearchContainerClass();
         if (searchInput.value !== "") {
             showResults(index)();
         }
     });
 
     searchInput.addEventListener("focusout", function () {
         resultsItemsIndex = -1;
+        updateSearchContainerClass();
     });
 
     window.addEventListener("click", function (mouseEvent) {

templates/header.html

@@ -19,7 +19,7 @@
 
         <!-- Search (always visible, but styled differently on mobile) -->
         <div class="site-header__search">
-            <input type="search" id="search" autocomplete="off" placeholder="Search docs and API...">
+            <input type="search" id="search" autocomplete="off" placeholder="Search the documentation and API…">
             <div id="search-results" class="search-results">
                 <ul id="search-results__items" class="search-results__items"></ul>
             </div>