Add Ctrl+K / Cmd+K shortcut to navbar search

docs/_includes/global/header.html

@@ -93,27 +93,25 @@
     </div>
   </div>
 
-  <div class="bd-nav-search">
-    <button
-      class="bd-nav-item is-search-desktop is-icon js-burger"
-      data-target="js-search"
-    >
-      <span class="icon">
-        <i class="fas fa-search fa-lg"></i>
-      </span>
-    </button>
+    <div class="bd-nav-search bg">
+      <button class="bd-nav-item is-search-desktop js-burger bd-nav-search-trigger" data-target="js-search" >
+        <span class="bd-search-pill">
+          <span class="icon">
+            <i class="fas fa-search fa-lg"></i>
+          </span>
 
-    <div id="js-search" class="bd-nav-menu is-search js-menu">
-      <input id="algoliaSearch" class="input" type="text" placeholder="Search" />
+          <span class="bd-nav-item-name">Ctrl K</span>
+        </span>
+      </button>
+
+      <div id="js-search" class="bd-nav-menu is-search js-menu">
+        <input id="algoliaSearch" class="input" type="text" placeholder="Search" />
+      </div>
     </div>
-  </div>
 
-  <a
-    class="button is-primary bd-nav-desktop-download"
-    href="{{ site.data.meta.download }}"
-  >
-    Download
-  </a>
+    <a class="button is-primary bd-nav-desktop-download" href="{{ site.data.meta.download }}">
+     Download
+    </a>
 
   <button class="navbar-burger bd-nav-burger js-burger" data-target="js-nav">
     <span></span>

docs/_sass/global/nav.scss

@@ -171,6 +171,37 @@
     }
   }
 
+.bd-nav-search-trigger {
+  padding: 0;
+}
+
+.bd-search-pill {
+  align-items: center;
+  background-color: cv.getVar("scheme-main-bis");
+  border: 1px solid cv.getVar("border");
+  border-radius: 999px;
+  display: inline-flex;
+  gap: 0.5em;
+  padding: 0.45em 0.75em;
+}
+
+.bd-search-text {
+  font-size: 0.9em;
+}
+
+.bd-search-hint {
+  border-left: 1px solid cv.getVar("border");
+  color: inherit;
+  font-weight: cv.getVar("weight-medium");
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.75em;
+  margin-left: 0.25em;
+  padding-left: 0.5em;
+  line-height: 1.25;
+  padding-top: 0.125em;
+  white-space: nowrap;
+}
+
   .bd-nav-item.is-ellipsis:focus-visible + &,
   &:focus-within,
   &.is-active {

docs/assets/javascript/main.js

@@ -460,3 +460,38 @@ document.addEventListener("DOMContentLoaded", () => {
     closeMasterclass();
   });
 });
+
+
+document.addEventListener("keydown", function (event) {
+  const isCtrlOrCmd = event.ctrlKey || event.metaKey
+  if (!isCtrlOrCmd || event.key.toLowerCase() !== "k") return
+
+  const active = document.activeElement
+  const isTyping =
+    active &&
+    (active.tagName === "INPUT" ||
+      active.tagName === "TEXTAREA" ||
+      active.isContentEditable)
+
+  if (isTyping) return
+
+  event.preventDefault()
+
+  const searchButton = document.querySelector(
+    ".bd-nav-item.is-search-desktop"
+  )
+  const searchMenu = document.getElementById("js-search")
+  const searchInput = document.getElementById("algoliaSearch")
+
+  if (!searchButton || !searchMenu || !searchInput) return
+
+  // Open search menu if closed
+  if (!searchMenu.classList.contains("is-active")) {
+    searchButton.click()
+  }
+
+  // Focus after menu is visible
+  setTimeout(() => {
+    searchInput.focus()
+  }, 0)
+})