From 348923dc659d12990c9b4ab8a082b103e7f4eb57 Mon Sep 17 00:00:00 2001
From: Chethana M <chethanamp22@gmail.com>
Date: Wed, 10 Jun 2026 15:38:40 +0530
Subject: [PATCH] fix: make mobile navbar search bar compact

---
 static/script.js     | 23 +++++++++++++++++++----
 static/style.css     | 35 +++++++++++++++++++++++++++--------
 templates/index.html |  4 ++--
 3 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/static/script.js b/static/script.js
index 577a5c2..1224b9b 100644
--- a/static/script.js
+++ b/static/script.js
@@ -47,6 +47,21 @@
   var menu = document.getElementById("nav-mobile-menu");
   if (!toggle || !menu) return;
 
+  toggle.addEventListener("click", function () {
+    var isOpen = menu.classList.toggle("open");
+    toggle.classList.toggle("open", isOpen);
+    toggle.setAttribute("aria-expanded", isOpen);
+  });
+
+  document.querySelectorAll(".nav-mobile-link").forEach(function (link) {
+    link.addEventListener("click", function () {
+      menu.classList.remove("open");
+      toggle.classList.remove("open");
+      toggle.setAttribute("aria-expanded", "false");
+    });
+  });
+})();
+
   function setOpen(isOpen) {
     menu.classList.toggle("open", isOpen);
     toggle.classList.toggle("open", isOpen);
@@ -66,7 +81,7 @@
   window.addEventListener("resize", function () {
     if (window.innerWidth >= 640) setOpen(false);
   });
-})();
+
 
 var STORAGE_KEY = "devpathUserProgress";
 var progress = {
@@ -997,7 +1012,7 @@ updateProfileWidgets();
         var general = document.getElementById("form-error-general");
         if (general) general.textContent = err.message || "An unexpected error occurred. Please try again.";
       });
-  });
+  })};
 
   var modal = document.getElementById("github-modal-overlay");
   var openModalBtn = document.getElementById("btn-show-github");
@@ -1073,7 +1088,7 @@ updateProfileWidgets();
         });
     });
   }
-})();
+;
 
 (function initDetailPage() {
   if (typeof PROJECT_ID === "undefined") return;
@@ -1246,4 +1261,4 @@ updateProfileWidgets();
     window.scrollTo({ top: atBottom ? 0 : document.body.scrollHeight, behavior: "smooth" });
   });
   update();
-})();
+})});
diff --git a/static/style.css b/static/style.css
index a4ababd..f3a30cf 100644
--- a/static/style.css
+++ b/static/style.css
@@ -548,7 +548,6 @@ html[data-entry-anim="true"] .form-card form > .btn-submit              { animat
   background: rgba(255, 255, 255, 0.11);
   box-shadow: 0 0 0 3px rgba(79, 110, 247, 0.25);
 }
-
 #topic-search,
 #topic-search-mobile {
   flex: 1;
@@ -559,6 +558,7 @@ html[data-entry-anim="true"] .form-card form > .btn-submit              { animat
   font-size: 0.84rem;
   font-family: var(--font-body);
   color: #ffffff;
+  height: 40px !important;
 }
 
 #topic-search::placeholder,
@@ -601,13 +601,6 @@ html[data-entry-anim="true"] .form-card form > .btn-submit              { animat
   width: 16px;
   height: 16px;
 }
-
-.navbar-search--mobile {
-  max-width: none;
-  margin: 0 0 20px;
-  width: 100%;
-}
-
 .nav-right {
   display: flex;
   align-items: center;
@@ -843,6 +836,32 @@ html[data-entry-anim="true"] .form-card form > .btn-submit              { animat
     margin-left: auto;
   }
 
+  .navbar-search.navbar-search--mobile {
+    flex: 0 0 auto;
+    width: 100%;
+    max-width: 100%;
+    margin-left: 0;
+    align-self: stretch;
+    flex-direction: row-reverse;
+  }
+
+  .navbar-search--mobile .navbar-search-btn {
+    width: auto;
+    height: auto;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    border-radius: 0;
+    border: none;
+    color: rgba(255, 255, 255, 0.85);
+    margin-left: 8px;
+  }
+
+  .navbar-search--mobile .navbar-search-btn svg {
+    width: 18px;
+    height: 18px;
+  }
+
   .nav-mobile-menu .theme-toggle {
     display: flex;
     align-items: center;
diff --git a/templates/index.html b/templates/index.html
index fd3cb94..e1da62a 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -101,8 +101,6 @@
 
     <div class="nav-mobile-menu" id="nav-mobile-menu" role="menu">
       <form id="topic-search-form-mobile" class="navbar-search navbar-search--mobile" role="search">
-        <input type="search" id="topic-search-mobile" autocomplete="off" aria-label="Search projects"
-          placeholder="Search projects…" />
         <button class="navbar-search-btn" type="submit" aria-label="Search">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"
             stroke-width="2" aria-hidden="true">
@@ -110,6 +108,8 @@
               d="M21 21l-4.35-4.35m1.85-5.15a7 7 0 11-14 0 7 7 0 0114 0z" />
           </svg>
         </button>
+        <input type="search" id="topic-search-mobile" autocomplete="off" aria-label="Search projects"
+          placeholder="Search projects…" />
       </form>
       <a href="#home" class="nav-mobile-link" role="menuitem">Home</a>
       <a href="#how-it-works" class="nav-mobile-link" role="menuitem">How It Works</a>