Add support for search on the responsive secondary bar

Author: dragonstyle

src/resources/projects/website/navigation/quarto-nav.scss

@@ -241,6 +241,14 @@ nav .nav-item.compact .nav-link {
   margin-top: -6px;
 }
 
+@include media-breakpoint-down(lg) {
+  #quarto-sidebar {
+    div.sidebar-header {
+      padding-top: 0.2em;
+    }
+  }
+}
+
 .sidebar-header-stacked .sidebar-title {
   margin-top: 0.6rem;
 }
@@ -345,6 +353,11 @@ $sidebar-section-bottom-margin: 0.2em;
   .quarto-secondary-nav {
     display: block;
 
+    button.quarto-search-button {
+      padding-right: 0em;
+      padding-left: 2em;
+    }
+
     button.quarto-btn-toggle {
       margin-left: -0.75rem;
       margin-right: 0.15rem;

src/resources/projects/website/search/quarto-search.js

@@ -80,23 +80,20 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
   // the media query since we generate different HTML for sidebar overlays than we do
   // for sidebar input UI)
   const detachedMediaQuery =
-    quartoSearchOptions.type === "overlay"
-      ? "all"
-      : quartoSearchOptions.location === "navbar"
-      ? "(max-width: 991px)"
-      : "none";
+    quartoSearchOptions.type === "overlay" ? "all" : "(max-width: 991px)";
 
   // If configured, include the analytics client to send insights
   const plugins = configurePlugins(quartoSearchOptions);
 
   let lastState = null;
-  const { setIsOpen } = autocomplete({
+  const { setIsOpen, setQuery, setCollections } = autocomplete({
     container: searchEl,
     detachedMediaQuery: detachedMediaQuery,
     defaultActiveItemId: 0,
     panelContainer: "#quarto-search-results",
     panelPlacement: quartoSearchOptions["panel-placement"],
     debug: false,
+    openOnFocus: true,
     plugins,
     classNames: {
       form: "d-flex",
@@ -299,9 +296,15 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
           },
           templates: {
             noResults({ createElement }) {
+              const hasQuery = lastState.query;
+
               return createElement(
                 "div",
-                { class: "quarto-search-no-results" },
+                {
+                  class: `quarto-search-no-results${
+                    hasQuery ? "" : " no-query"
+                  }`,
+                },
                 language["search-no-results-text"]
               );
             },
@@ -361,6 +364,12 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
     },
   });
 
+  window.quartoOpenSearch = () => {
+    setIsOpen(false);
+    setIsOpen(true);
+    focusSearchInput();
+  };
+
   // Remove the labeleledby attribute since it is pointing
   // to a non-existent label
   if (quartoSearchOptions.type === "overlay") {

src/resources/projects/website/search/quarto-search.scss

@@ -38,6 +38,9 @@ $quarto-search-collapse-icon-size: 26px !default;
 
 #quarto-sidebar {
   .sidebar-search {
+    @include media-breakpoint-down(lg) {
+      display: none;
+    }
     .aa-Autocomplete {
       width: $quarto-sidebar-search-input-width;
     }
@@ -227,6 +230,18 @@ $quarto-search-collapse-icon-size: 26px !default;
   }
 }
 
+.aa-PanelLayout:empty {
+  display: none;
+}
+
+.quarto-search-no-results.no-query {
+  display: none;
+}
+
+.aa-Source:has(.no-query) {
+  display: none;
+}
+
 #quarto-search-results .aa-Panel {
   border: solid $input-border-color $input-border-width;
 }

src/resources/projects/website/templates/nav-before-body.ejs

@@ -59,9 +59,11 @@ const navbarToolsClass = (nav.navbar && nav.navbar.right) ? 'quarto-navbar-tools
       <h1 class="quarto-secondary-nav-title"></h1>
       <a class="flex-grow-1" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar,#quarto-sidebar-glass" 
       aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Toggle sidebar navigation"
-      onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
-
+      onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">      
       </a>
+      <button type="button" class="btn quarto-search-button" aria-label="Search" onclick="window.quartoOpenSearch();">
+        <i class="bi bi-search"></i>
+      </button>
     </div>
   </nav>
 <% } %>