chore(dev-hub)-header Improvements

Author: aditya520

apps/developer-hub/src/components/Root/index.tsx

@@ -2,13 +2,15 @@ import { AppShell } from "@pythnetwork/component-library/AppShell";
 import { RootProvider as FumadocsRootProvider } from "fumadocs-ui/provider";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import type { ReactNode } from "react";
-import "./global.css";
 
 import {
   AMPLITUDE_API_KEY,
   ENABLE_ACCESSIBILITY_REPORTING,
   GOOGLE_ANALYTICS_ID,
 } from "../../config/server";
+import { SearchButton } from "../search-button";
+
+import "./global.css";
 
 export const TABS = [
   { segment: "", children: "Home" },
@@ -28,9 +30,23 @@ export const Root = ({ children }: Props) => (
     amplitudeApiKey={AMPLITUDE_API_KEY}
     googleAnalyticsId={GOOGLE_ANALYTICS_ID}
     enableAccessibilityReporting={ENABLE_ACCESSIBILITY_REPORTING}
+    extraCta={<SearchButton />}
+    mainCta={{
+      label: "Insights",
+      href: "https://insights.pyth.network/",
+    }}
     providers={[NuqsAdapter]}
     tabs={TABS}
   >
-    <FumadocsRootProvider>{children}</FumadocsRootProvider>
+    <FumadocsRootProvider
+      search={{
+        enabled: true,
+        options: {
+          api: "/api/search",
+        },
+      }}
+    >
+      {children}
+    </FumadocsRootProvider>
   </AppShell>
 );

apps/developer-hub/src/components/search-button.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import DefaultSearchDialog from "fumadocs-ui/components/dialog/search-default";
+import { useState } from "react";
+
+export const SearchButton = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        onClick={() => {
+          setOpen(true);
+        }}
+        style={{
+          background: "transparent",
+          border: "1px solid #ccc",
+          padding: "8px 16px",
+          borderRadius: "6px",
+          cursor: "pointer",
+        }}
+      >
+        Search
+      </button>
+      <DefaultSearchDialog
+        open={open}
+        onOpenChange={setOpen}
+        api="/api/search"
+      />
+    </>
+  );
+};

apps/developer-hub/src/config/layout.config.tsx

@@ -5,9 +5,12 @@ import { source } from "../source";
 
 export const baseOptions: BaseLayoutProps = {
   nav: {
-    enabled: false,
+    enabled: true,
   },
   themeSwitch: {
+    enabled: true,
+  },
+  searchToggle: {
     enabled: false,
   },
 };
@@ -16,20 +19,6 @@ export const docsOptions: DocsLayoutProps = {
   ...baseOptions,
   tree: source.pageTree,
   sidebar: {
-    tabs: {
-      transform(option, node) {
-        const meta = source.getNodeMeta(node);
-        if (!meta || !node.icon) return option;
-
-        return {
-          ...option,
-          icon: (
-            <div className="[&_svg]:size-6.5 md:[&_svg]:size-5">
-              {node.icon}
-            </div>
-          ),
-        };
-      },
-    },
+    tabs: false,
   },
 };