WIP replacing algolis with Redocly's built-in search

Author: amarantha-k

@theme/components/Navbar/AlgoliaSearch.tsx

@@ -4,7 +4,7 @@ import { LanguagePicker } from "@redocly/theme/components/LanguagePicker/Languag
 import { slugify } from "../../helpers";
 import { Link } from "@redocly/theme/components/Link/Link";
 import { ColorModeSwitcher } from "@redocly/theme/components/ColorModeSwitcher/ColorModeSwitcher";
-import { AlgoliaSearch } from "./AlgoliaSearch";
+import { Search } from "@redocly/theme/components/Search/Search";
 import arrowUpRight from "../../../static/img/icons/arrow-up-right-custom.svg";
 
 // @ts-ignore
@@ -139,7 +139,7 @@ export function Navbar(props) {
           <NavItems>
             {navItems}
             <div id="topnav-search" className="nav-item search">
-              <AlgoliaSearch />
+              <Search className="topnav-search"/>
             </div>
             <div id="topnav-language" className="nav-item">
               <LanguagePicker

@theme/components/Navbar/Navbar.tsx

@@ -14,7 +14,6 @@
   "dependencies": {
     "@codemirror/state": "6.5.2",
     "@codemirror/view": "^6.22.2",
-    "@docsearch/react": "^3.8.0",
     "@lezer/highlight": "^1.2.0",
     "@redocly/realm": "0.120.2",
     "@uiw/codemirror-themes": "4.21.21",

package.json

@@ -144,6 +144,7 @@ $banner-height: 52px; // Apex 2025 banner is 52px. 0 for no pencil banner.
   }
 
   #topnav-search {
+    flex-grow: 1;
     .input-group {
       flex-grow: 1;
       flex-wrap: nowrap; // Fix search bar splitting into two lines on iPhone 5
@@ -315,7 +316,7 @@ $banner-height: 52px; // Apex 2025 banner is 52px. 0 for no pencil banner.
 
     @include media-breakpoint-up(xl) {
       #topnav-search {
-        margin-left: auto;
+        margin-left: 3.5rem;
         margin-right: 0.5rem;
       }
       #topnav-language {

styles/_top-nav.scss

@@ -1340,7 +1340,7 @@ main article .card-grid {
   }
 }
 
-/* Search styles */
+/* Algolia Search styles
 
 .algolia-autocomplete .ds-dropdown-menu::before {
   background-color: $gray-100;
@@ -1352,3 +1352,4 @@ main article .card-grid {
 .DocSearch-Modal {
   box-shadow: $light-box-shadow;  
 }
+ */