Add sidebar search and support for search bar middle clicking

docs/_static/custom.js

@@ -95,3 +95,19 @@ document.addEventListener('keydown', (event) => {
     activeModal.close();
   }
 });
+
+function searchBarClick(event, which) {
+  event.preventDefault();
+
+  if (event.button === 1 || event.buttons === 4) {
+      which.target = "_blank";  // Middle mouse button was clicked. Set our target to a new tab.
+  }
+  else if (event.button === 2) {
+    return  // Right button was clicked... Don't do anything here.
+  }
+  else {
+    which.target = "_self";  // Revert to same window.
+  }
+
+  which.submit();
+}

docs/_static/style.css

@@ -61,6 +61,8 @@ Historically however, thanks to:
   --search-focus: var(--blue-1);
   --search-button: var(--grey-1);
   --search-button-hover: var(--grey-1-8);
+  --search-sidebar-background: var(--grey-1);
+  --search-sidebar-text: var(--grey-7);
   --footer-text: var(--grey-5);
   --footer-link: var(--grey-6);
   --hr-border: var(--grey-2);
@@ -167,6 +169,8 @@ Historically however, thanks to:
   --attribute-table-entry-hover-text: var(--blue-1);
   --attribute-table-badge: var(--grey-4);
   --highlighted-text: rgba(250, 166, 26, 0.2);
+  --search-sidebar-background: var(--grey-7);
+  --search-sidebar-text: var(--search-text);
 }
 
 img[src$="snake_dark.svg"]  {
@@ -523,6 +527,20 @@ input[type=search]:focus ~ button[type=submit] {
   color: var(--search-button-hover);
 }
 
+/* search sidebar */
+
+.search-sidebar > input[type=search],
+.search-sidebar > button[type=submit] {
+  background-color: var(--search-sidebar-background);
+  color: var(--search-sidebar-text);
+}
+
+.sidebar-toggle .search-sidebar > input[type=search],
+.sidebar-toggle .search-sidebar > button[type=submit] {
+  background-color: var(--mobile-nav-background);
+  color: var(--mobile-nav-text);
+}
+
 /* main content area */
 
 main {

docs/_templates/layout.html

@@ -90,10 +90,10 @@
         <option value="{{ pathto(p + '/index')|e }}" {% if pagename is prefixedwith p %}selected{% endif %}>{{ ext }}</option>
         {%- endfor %}
       </select>
-      <form role="search" class="search" action="{{ pathto('search') }}" method="get">
+      <form id="search-form" role="search" class="search" action="{{ pathto('search') }}" method="get">
         <div class="search-wrapper">
           <input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
-          <button type="submit">
+          <button type="submit" onmousedown="searchBarClick(event, document.getElementById('search-form'));">
             <span class="material-icons">search</span>
           </button>
         </div>
@@ -111,6 +111,14 @@
         <span class="material-icons">settings</span>
       </span>
       <div id="sidebar">
+        <form id="sidebar-form" role="search" class="search" action="{{ pathto('search') }}" method="get">
+        <div class="search-wrapper search-sidebar">
+          <input type="search" name="q" placeholder="{{ _('Search documentation') }}" />
+          <button type="submit" onmousedown="searchBarClick(event, document.getElementById('sidebar-form'));">
+            <span class="material-icons">search</span>
+          </button>
+        </div>
+      </form>
         {%- include "localtoc.html" %}
       </div>
     </aside>