Merge branch 'chore/rnv_upgrade' of github.com:flexn-io/renative-docs

flexn-io · Apr 15, 2024 · f33dc3a · f33dc3a
2 parents 31fcb38 + f074383
commit f33dc3a
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git a/src/components/NavbarItems/CustomSearchNavbarItem.tsx b/src/components/NavbarItems/CustomSearchNavbarItem.tsx
@@ -11,7 +11,7 @@ import { DocSearch } from '@docsearch/react';
 
 import '@docsearch/css';
 
-export default function CustomSearchNavbarItem(props: { className?: string }): JSX.Element | null {
+export default function CustomSearchNavbarItem(): JSX.Element {
     const {
         siteConfig: { customFields },
     } = useDocusaurusContext();
@@ -20,5 +20,13 @@ export default function CustomSearchNavbarItem(props: { className?: string }): J
     const appId = customFields.ALGOLIA_APP_ID as string;
     const searchKey = customFields.ALGOLIA_SEARCH_KEY as string;
 
-    return <DocSearch appId={appId} indexName={indexName} apiKey={searchKey} />;
+    return (
+        <DocSearch
+            maxResultsPerGroup={7}
+            placeholder="Search..."
+            appId={appId}
+            indexName={indexName}
+            apiKey={searchKey}
+        />
+    );
 }
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -1042,4 +1042,44 @@ a {
   .homepage-codeline .homepage_button{
     font-size: 14px;
   }
+}
+
+
+/* SEARCH */
+
+:root {
+  --docsearch-primary-color: #0A74E6 !important;
+}
+
+/* hide it from mobile menu */
+.navbar-sidebar .DocSearch-Button {
+  display: none;
+}
+
+.DocSearch-Button {
+  margin-right: 12px !important;
+  border-radius: 8px !important;
+  width: 170px !important;
+  background-color: white !important;
+  height: 40px !important;
+  border: 1px solid #E4E4E4 !important;
+}
+
+/* a bit of margin to not overlap the hamburger menu */
+@media (max-width: 996px) {
+  .DocSearch-Button {
+    margin-right: 40px !important;
+    width: inherit !important;
+  }
+}
+
+/* at this size algolia turns into a button, remove border */
+@media (max-width: 768px) {
+  .DocSearch-Button {
+    border: none !important;
+  }
+}
+
+.DocSearch-Button-Keys {
+  display: none !important;
 }