Merge pull request #1896 from SahilChachane-27/main

update in navbar

Author: sanjay-kv

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

@@ -443,6 +443,7 @@ html[data-theme="dark"] article blockquote {
   margin: 0;
   height: 60px;
   display: flex;
+  width: 100%;
 }
 
 .navbar__brand {
@@ -501,6 +502,7 @@ html[data-theme="dark"] article blockquote {
   gap: 0.3rem !important;
   margin: 0 !important;
   padding: 0 !important;
+  min-width: 0;
 }
 
 .mb-10.text-center>p.mx-auto.max-w-3xl {
@@ -527,12 +529,14 @@ html[data-theme="dark"] article blockquote {
   padding: 0.3rem 0.5rem;
   font-size: 0.85rem;
   line-height: 1.2;
+  white-space: nowrap;
 }
 
 .navbar__link {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  white-space: nowrap;
 }
 
 /* Fix icon alignment in navbar */
@@ -746,14 +750,20 @@ body {
 }
 
 /* ===== SECTION 11: CRITICAL FIX: TABLET/IPAD NAVBAR BEHAVIOR ===== */
-@media screen and (max-width: 996px) {
+@media screen and (max-width: 1200px) {
   /* Hide TOP navbar items on mobile (not sidebar) */
 
   /*
-  * Hide all navbar items on small screens except the toggle, brand,
-  * and the Clerk auth control.
+  * Hide top-level navbar items before they collide. Docusaurus' default
+  * mobile breakpoint is 996px, but this navbar has enough links to overflow
+  * on tablets and smaller laptops.
   */
-  .navbar__items .navbar__item:not(.navbar__toggle):not(.navbar__brand):not( :has(#firebase-auth-github-navbar)) {
+  .navbar__inner>.navbar__items>.navbar__item:not(.navbar__toggle):not(:has(#clerk-auth-navbar)) {
+    display: none !important;
+  }
+
+  .navbar__items--right>.navbar__item:not(:has(#clerk-auth-navbar)),
+  .navbar__items--right .colorModeToggle {
     display: none !important;
   }
 
@@ -778,11 +788,13 @@ body {
     max-width: 100% !important;
     padding: 0 !important;
     width: 100% !important;
+    gap: 0.5rem !important;
   }
 
   /* Logo and brand adjustments */
   .navbar__brand {
-    margin-right: 1.5rem !important;
+    min-width: 0 !important;
+    margin-right: auto !important;
   }
 
   .navbar__logo {
@@ -791,11 +803,16 @@ body {
 
   .navbar__title {
     font-size: 1rem !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
   }
 
   /* Ensure sidebar toggle is always visible */
   .navbar__toggle {
-    display: block !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    flex: 0 0 auto !important;
     margin-right: 0.5rem !important;
   }
 
@@ -2773,6 +2790,93 @@ html[data-theme="dark"] .blog-post-page article header h2[itemprop="headline"] {
    END SECTION 15
    ===================================================== */
 
+/* ===== RESPONSIVE NAVBAR OVERFLOW FIX ===== */
+@media screen and (min-width: 1401px) {
+  .navbar__inner {
+    gap: 0.5rem !important;
+  }
+
+  .navbar__items:not(.navbar__items--right) {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+  }
+
+  .navbar__items--right {
+    flex: 0 0 auto !important;
+  }
+
+  .navbar__items>.navbar__item {
+    flex: 0 0 auto !important;
+  }
+}
+
+@media screen and (max-width: 1400px) {
+  .navbar,
+  .navbar .navbar__inner {
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow: visible !important;
+  }
+
+  .navbar .navbar__inner {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    gap: 0.5rem !important;
+  }
+
+  .navbar .navbar__items {
+    min-width: 0 !important;
+  }
+
+  .navbar .navbar__items:not(.navbar__items--right) {
+    flex: 1 1 auto !important;
+    overflow: hidden !important;
+  }
+
+  .navbar .navbar__items--right {
+    flex: 0 0 auto !important;
+    margin-left: auto !important;
+  }
+
+  .navbar .navbar__toggle {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    flex: 0 0 40px !important;
+    width: 40px !important;
+    height: 40px !important;
+  }
+
+  .navbar .navbar__brand {
+    flex: 1 1 auto !important;
+    min-width: 0 !important;
+    max-width: 100% !important;
+    margin-right: 0 !important;
+    overflow: hidden !important;
+  }
+
+  .navbar .navbar__title {
+    min-width: 0 !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    white-space: nowrap !important;
+  }
+
+  .navbar__inner>.navbar__items>.navbar__item:not(.navbar__toggle),
+  .navbar__items--right>.navbar__item,
+  .navbar__items--right .colorModeToggle {
+    display: none !important;
+  }
+
+  .navbar-sidebar .navbar__item,
+  .navbar-sidebar .navbar__link,
+  .navbar-sidebar .dropdown {
+    display: block !important;
+    white-space: normal !important;
+  }
+}
+
 /* ===== MOBILE TOP-GAP FIX ===== */
 @media screen and (max-width: 996px) {
 
@@ -2950,9 +3054,10 @@ main[class*='docMainContainer_'] {
 .theme-doc-sidebar-container,
 .menu--responsive,
 div[class*='sidebarViewport_'] {
-  z-index: 9999 !important;
+  z-index: 9999 !important; 
 }
 
+
 /* Leaderboard Pagination Button Icon Visibility Fix */
 .pagination-btn {
   display: flex !important;
@@ -2987,4 +3092,4 @@ div[class*='sidebarViewport_'] {
 .pagination-btn.disabled {
   opacity: 0.4 !important;
   cursor: not-allowed !important;
-}
+}