search bar

Author: SahilChachane-27

src/components/AlgoliaSiteSearch/index.tsx

@@ -93,13 +93,14 @@ export default function AlgoliaSiteSearch(): React.ReactElement | null {
   const isConfigured = Boolean(applicationId && apiKey && indexName);
 
   useEffect(() => {
+    ensureSiteSearchStylesheet();
+
     if (!isConfigured) {
       return;
     }
 
     let cancelled = false;
 
-    ensureSiteSearchStylesheet();
     loadSiteSearchScript()
       .then(() => {
         if (cancelled || !window.SiteSearch?.init) {
@@ -139,7 +140,36 @@ export default function AlgoliaSiteSearch(): React.ReactElement | null {
   }, [apiKey, applicationId, indexName, isConfigured]);
 
   if (!isConfigured) {
-    return null;
+    return (
+      <div className="navbar__item algolia-sitesearch-navbar">
+        <button
+          className="sitesearch-button"
+          style={{ opacity: 0.6, cursor: "not-allowed" }}
+          title="Search (Algolia SiteSearch credentials not configured)"
+        >
+          <span className="search-icon">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <circle cx="11" cy="11" r="8"></circle>
+              <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            </svg>
+          </span>
+          <span className="button-text">Search...</span>
+          <span className="keyboard-shortcut">
+            <span>Ctrl</span>
+            <span>K</span>
+          </span>
+        </button>
+      </div>
+    );
   }
 
   return (

src/css/custom.css

@@ -763,7 +763,6 @@ body {
   }
 
   .navbar__items--right>.navbar__item:not(:has(#clerk-auth-navbar)),
-  .navbar__items--right .algolia-sitesearch-navbar,
   .navbar__items--right .colorModeToggle {
     display: none !important;
   }
@@ -2866,7 +2865,6 @@ html[data-theme="dark"] .blog-post-page article header h2[itemprop="headline"] {
 
   .navbar__inner>.navbar__items>.navbar__item:not(.navbar__toggle),
   .navbar__items--right>.navbar__item,
-  .navbar__items--right .algolia-sitesearch-navbar,
   .navbar__items--right .colorModeToggle {
     display: none !important;
   }