New search implementation

src/css/custom.css

@@ -322,23 +322,28 @@ aside.theme-doc-sidebar-container {
   margin-top: 0;
 }
 
+.algolia-docsearch-suggestion--category-header {
+  background-color: var(--ifm-color-gray-300) !important;
+  color: var(--ifm-color-dark-900) !important;
+  text-transform: none !important;
+}
+
 .sidebar-search-container {
   position: sticky;
   top: var(--ifm-navbar-height);
   max-height: 100vh;
   transition: all 250ms ease-in-out;
+  z-index: 99;
 }
 
 .navbar__search {
-  padding: 1.3rem;
-  padding-bottom: 1rem;
   z-index: 1;
 }
 
 .navbar__search input {
   width: 100%;
-  border-radius: 8px;
-  border: 1px solid var(--ifm-color-gray-800);
+  border-radius: 0;
+  border-bottom: 1px solid var(--ifm-color-dark-800);
   background-color: transparent;
   height: 44px;
   outline: 0;
@@ -362,11 +367,23 @@ nav.menu {
 }
 
 .algolia-autocomplete .ds-dropdown-menu:before {
-  left: 2rem;
+  display: none !important;
+}
+
+.algolia-autocomplete.algolia-autocomplete.algolia-autocomplete-right .ds-dropdown-menu {
+  margin-top: 0 !important;
+  left: 0 !important;
+  overflow: auto;
+  top: 44px;
+  border-radius: 0;
+  box-shadow: none;
+  height: 296px;
+  max-width: none;
+  background: white;
 }
 
-.algolia-autocomplete .ds-dropdown-menu {
-  margin-top: 0.75rem !important;
+.algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-] {
+  border-radius: 0 !important;
 }
 
 .grid-bg-section {

src/theme/DocRoot/Layout/Sidebar/Sidebar.module.css

@@ -0,0 +1,90 @@
+.input {
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid var(--ifm-color-gray-800);
+  background-color: transparent;
+  height: 44px;
+  outline: 0;
+  appearance: none;
+  color: var(--ifm-navbar-search-input-color);
+  cursor: text;
+  display: inline-block;
+  font-size: 0.9rem;
+  padding: 0 0.5rem 0 2.2rem;
+  background: transparent var(--ifm-navbar-search-input-icon) no-repeat .75rem center/1rem 1rem;
+}
+
+.inputContainer {
+  padding: 1.3rem;
+  padding-bottom: 1rem;
+}
+
+.overlay {
+  background-color: var(--ifm-color-white-opacity-15);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  backdrop-filter: blur(3px);
+  overflow: hidden;
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-right: -50%;
+  z-index: 9;
+  background: white;
+  width: 640px;
+  transform: translate(-50%, -50%);
+  border: 1px solid var(--ifm-color-dark-800);
+  border-radius: 8px;
+}
+
+.initialCase {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: calc(100% - 44px);
+}
+
+.footer {
+  padding: .75rem 1rem;
+  border-top: 1px solid var(--ifm-color-gray-600);
+}
+
+.navigationInfoItem {
+  display: flex;
+  align-items: center;
+}
+
+
+.navigationInfoItem span {
+  color: var(--ifm-color-gray-800);
+  display: block;
+  margin-left: .25rem;
+  font-size: 12px;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modalContent {
+  height: 340px;
+}
+
+
+
+@media (max-height: 600px) {
+  .modal {
+    top: calc(var(--header-height) + 1rem);
+    transform: translate(-50%, 0);
+  }
+}

src/theme/DocRoot/Layout/Sidebar/index.tsx

@@ -1,11 +1,125 @@
-import React from "react"
+import React, {useEffect, useState} from "react"
 import Sidebar from "@theme-original/DocRoot/Layout/Sidebar"
 import Search from "docusaurus-lunr-search/src/theme/SearchBar"
+import {useHistory} from "react-router-dom"
+import useIsBrowser from "@docusaurus/useIsBrowser"
+import PageSearchIcon from "@site/static/icons/basic/page-search.svg"
+import EnterKeyIcon from "@site/static/icons/basic/enter-key.svg"
+import UpDownKeyIcon from "@site/static/icons/basic/up-down-key.svg"
+import EscapeKeyIcon from "@site/static/icons/basic/escape-key.svg"
+import styles from "./Sidebar.module.css"
 
 export default function SidebarWrapper(props) {
+  const [isSearchModalVisible, setIsSearchModalVisible] = useState(false)
+  const history = useHistory()
+  const isBrowser = useIsBrowser()
+  const placeholder = isBrowser && window.navigator.platform.startsWith("Mac") ? "Search ⌘+K" : "Search Ctrl+K"
+
+  function handleSearchClick() {
+    setIsSearchModalVisible(true)
+  }
+
+  function handleSearchModalClose() {
+    setIsSearchModalVisible(false)
+  }
+
+  function setBodyScroll() {
+    document.body.style.overflow = isSearchModalVisible ? "hidden" : "auto"
+  }
+
+  useEffect(() => {
+    setBodyScroll()
+    return () => {
+      document.body.style.overflow = "initial"
+    }
+  }, [isSearchModalVisible])
+
+  function handleKeyPress(event) {
+    if (event.key === "Escape") {
+      handleSearchModalClose()
+    }
+    if (
+      (event.metaKey && event.key === "k" && navigator.platform.includes("Mac")) ||
+      (event.ctrlKey && event.key === "k" && navigator.platform.includes("Win"))
+    ) {
+      handleSearchClick()
+    }
+  }
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyPress)
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyPress)
+    }
+  }, [])
+
+  useEffect(() => {
+    const unlisten = history.listen((location, action) => {
+      if (action === "PUSH" || action === "POP") {
+        setIsSearchModalVisible(false)
+      }
+    })
+
+    return () => {
+      unlisten()
+    }
+  }, [history])
+
+  useEffect(() => {
+    const handleKeyPress = (event) => {
+      if (
+        (event.metaKey && event.key === "k" && navigator.platform.includes("Mac")) ||
+        (event.ctrlKey && event.key === "k" && navigator.platform.includes("Win"))
+      ) {
+        // Your action when CMD/CTRL + K is pressed
+        console.log("CMD/CTRL + K pressed")
+        // Perform your desired action here
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyPress)
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyPress)
+    }
+  }, [])
+
   return (
     <div className="sidebar-search-container flex flex-col">
-      <Search />
+      <div className={styles.inputContainer} onClick={handleSearchClick}>
+        <span aria-label="expand searchbar" role="button" className="search-icon" tabIndex={0}></span>
+        <input readOnly placeholder={placeholder} className={styles.input} />
+      </div>
+      {isSearchModalVisible ? (
+        <>
+          <div onClick={handleSearchModalClose} className={styles.overlay}></div>
+          <div className={styles.modal}>
+            <div className={styles.modalContent}>
+              <Search />
+              <div className={styles.initialCase}>
+                <PageSearchIcon />
+                <div className="mt-2 font-bold">Search Docs</div>
+                <div className="text-content-tiny text-tailCall-dark-100">Search anything within the docs</div>
+              </div>
+            </div>
+            <div className={styles.footer}>
+              <div className={styles.navigationInfoItem}>
+                <EnterKeyIcon />
+                <span>to select</span>
+              </div>
+              <div className={styles.navigationInfoItem}>
+                <UpDownKeyIcon />
+                <span>to navigate</span>
+              </div>
+              <div className={styles.navigationInfoItem}>
+                <EscapeKeyIcon />
+                <span>to close</span>
+              </div>
+            </div>
+          </div>
+        </>
+      ) : null}
       <Sidebar {...props} />
     </div>
   )