Use searchfield instead of searchbox component in sidebar

This moves the search field up before the navigation. It's quite commmon that search is near the top of the page. Also, this results in a fixed position, because navigation is page dependent and may be long, which could move the search field far down or even off-page in the old layout. The searchfield component (sphinx-doc/sphinx#11045) is more compact and does not have a heading, which reduces clutter and gives more focus to the content sections.
sphinx-doc · Jul 8, 2024 · 0995ab5 · 0995ab5
1 parent ea9e92b
commit 0995ab5
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/alabaster/static/alabaster.css_t b/alabaster/static/alabaster.css_t
@@ -209,12 +209,17 @@ div.sphinxsidebar ul li.toctree-l2 > a {
     font-size: 110%;
 }
 
+
 div.sphinxsidebar input {
     border: 1px solid {{ theme_sidebar_search_button }};
     font-family: {{ theme_font_family }};
     font-size: 1em;
 }
 
+div.sphinxsidebar #searchbox {
+    margin: 1em 0;
+}
+
 div.sphinxsidebar #searchbox input[type="text"] {
     width: 160px;
 }

diff --git a/alabaster/theme.conf b/alabaster/theme.conf
@@ -1,7 +1,7 @@
 [theme]
 inherit = basic
 stylesheet = alabaster.css
-sidebars = about.html, navigation.html, relations.html, searchbox.html, donate.html
+sidebars = about.html, searchfield.html, navigation.html, relations.html, donate.html
 pygments_style = alabaster.support.Alabaster
 
 [options]

diff --git a/docs/conf.py b/docs/conf.py
@@ -23,9 +23,9 @@
 html_sidebars = {
     "**": [
         "about.html",
+        "searchfield.html",
         "navigation.html",
         "relations.html",
-        "searchbox.html",
         "donate.html",
     ]
 }