Use searchfield instead of searchbox component in sidebar (#217)

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 15, 2024 · eb522b8 · eb522b8
1 parent 6120f75
commit eb522b8
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/alabaster/static/alabaster.css_t b/alabaster/static/alabaster.css_t
@@ -215,6 +215,10 @@ div.sphinxsidebar input {
     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
@@ -22,9 +22,9 @@
 html_sidebars = {
     "**": [
         "about.html",
+        "searchfield.html",
         "navigation.html",
         "relations.html",
-        "searchbox.html",
         "donate.html",
     ]
 }