Search implementation

docs/components/Navigation/Navigation.tsx

@@ -4,6 +4,7 @@ import { Logo } from '../Images';
 import Link from 'next/link';
 import { Extension } from '../../constants/extension';
 import { useRouter } from 'next/router';
+import { Searchbox } from '../Page/Searchbox';
 
 export interface INavigationProps {}
 
@@ -22,7 +23,7 @@ export const Navigation: React.FunctionComponent<INavigationProps> = (props: Rea
           </Link>
         </div>
         <div className="space-x-4">
-          <div className="hidden ml-10 space-x-8 lg:block">
+          <div className="hidden ml-10 space-x-8 lg:flex justify-center items-center">
             {navigation.main.map((link) => (
               <a key={link.name} href={link.href} title={link.title} className={`text-base font-medium text-whisper-500 hover:text-whisper-900 ${link.href === router.asPath ? `text-teal-800` : ``}`}>
                 {link.name}
@@ -34,6 +35,8 @@ export const Navigation: React.FunctionComponent<INavigationProps> = (props: Rea
                 <link.icon className="inline-block h-6 w-6" aria-hidden="true" />
               </a>
             ))}
+
+            <Searchbox />
           </div>
         </div>
       </div>

docs/components/Page/Layout.tsx

@@ -8,7 +8,7 @@ export interface ILayoutProps {}
 export const Layout: React.FunctionComponent<ILayoutProps> = (props: React.PropsWithChildren<ILayoutProps>) => {
   return (
     <div className={`flex flex-col h-screen`}>
-      <header>
+      <header className={`sticky top-0 z-50 bg-vulcan-500 bg-opacity-80 backdrop-blur-lg`}>
         <Navigation />
       </header>
 

docs/components/Page/Searchbox.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+// const docsearch = require('@docsearch/js');
+// import { useEffect } from 'react';
+import { DocSearch } from '@docsearch/react';
+
+export interface ISearchboxProps {}
+
+export const Searchbox: React.FunctionComponent<ISearchboxProps> = (props: React.PropsWithChildren<ISearchboxProps>) => {
+
+  return (
+    <>
+      <DocSearch 
+        apiKey={`00a3aec5d2fd408fdfce332b0b8c8dcb`} 
+        indexName={`documentation`} 
+        appId={`ITVR93WPJF`} 
+        disableUserPersonalization={true} 
+        />
+    </>
+  );
+};