feat(docs): enable navbar (#18324)

## Which issue does this PR close?

- Closes #18284.

## What changes are included in this PR?

I've enabled the navbar, which is required to use dark-light mode toggle
and made following changes in the ui

- Removed the existing logo in the side-bar (as it was redundant)
- Removed search bar in the side-bar (as it was conflicting with
navbar's search widget)

<img width="1280" height="939" alt="image"
src="https://github.com/user-attachments/assets/52bebca7-34a6-4a3b-bb30-8aa2ca6e2c8f"
/><br>
<img width="1280" height="939" alt="image"
src="https://github.com/user-attachments/assets/69ce9922-ef78-4b2c-bf6e-36860d170635"
/>

docs/source/_static/theme_overrides.css

@@ -29,7 +29,6 @@
   --pst-color-h2: var(--color-text-base);
   /* Use softer blue from bootstrap's default info color */
   --pst-color-info: 23, 162, 184;
-  --pst-header-height: 0px;
 }
 
 code {
@@ -40,16 +39,34 @@ code {
   text-align: center;
 }
 
-/* Display appropriate logo for dark and light mode */
-.light-logo { display: inline; }
-.dark-logo { display: none; }
+/* Limit both light and dark mode logos in the navbar */
+.logo__image {
+  height: 32px;
+  width: auto;     
+  max-height: 2.5rem;
+}
 
-@media (prefers-color-scheme: dark) {
-  .light-logo { display: none; }
-  .dark-logo { 
-    display: inline; 
-    background-color: transparent !important;
-  }
+/* Display appropriate logo for dark and light mode */
+.light-logo {
+  display: inline;
+}
+
+.dark-logo {
+  display: none;
+}
+
+html[data-theme="dark"] .light-logo {
+  display: none;
+}
+
+html[data-theme="dark"] .dark-logo {
+  display: inline;
+  background-color: transparent !important;
+}
+
+/* Align search bar & theme switch right */
+.navbar-header-items__end {
+  margin-left: auto;
 }
 
 /* Ensure the logo is properly displayed */

docs/source/_templates/docs-sidebar.html

@@ -1,14 +1,3 @@
-<p>
-  <a href="{{ pathto(master_doc) }}">
-    <img src="{{ pathto('_static/images/original.svg', 1) }}" class="logo light-logo" alt="logo">
-    <img src="{{ pathto('_static/images/original_dark.svg', 1) }}" class="logo dark-logo" alt="logo">
-  </a>
-</p>
-<p>
-  <form class="bd-search d-flex align-items-center" action="{{ pathto('search') }}" method="get">
-    <input type="search" class="form-control" name="q" id="search-input" placeholder="{{ theme_search_bar_text }}" aria-label="{{ theme_search_bar_text }}" autocomplete="off" >
-  </form>
-</p>
 <nav class="bd-links" id="bd-docs-nav" aria-label="Main navigation">
 
   <div class="bd-toc-item active">

docs/source/_templates/layout.html

@@ -1,9 +1,5 @@
 {% extends "pydata_sphinx_theme/layout.html" %}
 
-{# Silence the navbar #}
-{% block docs_navbar %}
-{% endblock %}
-
 <!--
     Custom footer
 -->

docs/source/conf.py

@@ -88,7 +88,13 @@ autosummary_generate = True
 html_theme = "pydata_sphinx_theme"
 
 html_theme_options = {
+     "logo": {
+        "image_light": "_static/images/original.svg", 
+        "image_dark": "_static/images/original_dark.svg", 
+    },
     "use_edit_page_button": True,
+    "navbar_center": [],
+    "navbar_end": ["theme-switcher"],
 }
 
 html_context = {