Migrate navigation from Bootstrap to Radix UI

.github/workflows/action.yml

@@ -4,6 +4,8 @@ on:
     branches: [main]
   pull_request:
     branches: [main]
+env:
+  NODE_VERSION: "22"
 jobs:
   Format:
     name: Test formatting...
@@ -14,7 +16,7 @@ jobs:
       - name: Use Node.js node
         uses: actions/setup-node@v2
         with:
-          node-version: "18"
+          node-version: ${{ env.NODE_VERSION }}
       - name: before_install
         run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
       - name: installing_yarn
@@ -31,7 +33,7 @@ jobs:
       - name: Use Node.js node
         uses: actions/setup-node@v2
         with:
-          node-version: "18"
+          node-version: ${{ env.NODE_VERSION }}
       - name: before_install
         run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
       - name: installing_yarn & lint

apps/web/next.config.ts

@@ -38,6 +38,7 @@ const nextConfig: NextConfig = {
   reactStrictMode: true,
   productionBrowserSourceMaps: true,
   trailingSlash: false,
+  transpilePackages: ["@solana/ui-components", "@solana/tailwind-config"],
 
   async rewrites() {
     return rewritesAndRedirectsJson.rewrites as {

apps/web/package.json

@@ -10,6 +10,8 @@
   "dependencies": {
     "@ai-sdk/openai": "^1.2.0",
     "@builder.io/react": "^7.0.1",
+    "@solana/ui-components": "*",
+    "@solana/tailwind-config": "*",
     "@inkeep/cxkit-react": "^0.5.36",
     "@mdx-js/react": "^3.1.0",
     "@radix-ui/react-accordion": "^1.2.1",

apps/web/src/app/components/code/token-transitions.client.tsx

@@ -16,15 +16,15 @@ export class PreWithRef extends React.Component<CustomPreProps> {
     this.ref = getPreRef(this.props);
   }
 
-  render() {
+  override render() {
     return <InnerPre merge={this.props} style={{ position: "relative" }} />;
   }
 
-  getSnapshotBeforeUpdate() {
+  override getSnapshotBeforeUpdate() {
     return getStartingSnapshot(this.ref.current!);
   }
 
-  componentDidUpdate(
+  override componentDidUpdate(
     _prevProps: never,
     _prevState: never,
     snapshot: TokenTransitionsSnapshot,

apps/web/src/app/components/inkeep/useInkeepConfig.ts

@@ -182,7 +182,11 @@ const aiChatSettings: InkeepAIChatSettings = {
   ],
 };
 
-export function useInkeepConfig() {
+export function useInkeepConfig(): {
+  baseSettings: InkeepBaseSettings;
+  searchSettings: InkeepSearchSettings;
+  aiChatSettings: InkeepAIChatSettings;
+} {
   const [syncTarget, setSyncTarget] = useState<HTMLElement | null>(null);
 
   // We do this because document is not available in the server

apps/web/src/components/Header.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import React from "react";
+import { NavigationAdapter } from "./NavigationAdapter";
+import DevelopersNav from "./developers/DevelopersNav/DevelopersNav";
+import { useRouter } from "@@/src/hooks/useRouter";
+
+interface HeaderProps {
+  className?: string;
+  containerClassName?: string;
+}
+
+const Header: React.FC<HeaderProps> = ({
+  className = "",
+  containerClassName = "",
+}) => {
+  const router = useRouter();
+
+  // Determine if secondary nav should be shown
+  const showDevelopersNav =
+    router.asPath.includes("/developers") || router.asPath.includes("/docs");
+
+  return (
+    <>
+      <NavigationAdapter
+        className={className}
+        containerClassName={containerClassName}
+      />
+      {/* Secondary nav for /developers/* and /docs/* */}
+      {showDevelopersNav && (
+        <DevelopersNav containerClassName={containerClassName} />
+      )}
+    </>
+  );
+};
+
+export default Header;