add version dropdowns in sdk ref navbar

apps/web/prebuild.js

@@ -100,9 +100,7 @@ function buildRoutes(dirName, dir, basePath = '', depth = 1) {
 
       if (entry.isDirectory()) {
         let route = {
-          title:
-            (depth === 1 ? entry.name.toLocaleUpperCase() : entry.name) +
-            ' Reference',
+          title: depth === 1 ? entry.name.toLocaleUpperCase() : entry.name,
         }
         const entryName = entry.name
         const childPath = path.join(dir, entry.name)

apps/web/src/components/Navigation/index.tsx

@@ -2,8 +2,8 @@
 
 import clsx from 'clsx'
 import { motion } from 'framer-motion'
-import { usePathname } from 'next/navigation'
-import React, { useRef } from 'react'
+import { usePathname, useRouter } from 'next/navigation'
+import React, { useRef, useState } from 'react'
 
 import { useIsInsideMobileNavigation } from '@/components/MobileBurgerMenu'
 import { useSectionStore } from '@/components/SectionProvider'
@@ -13,6 +13,7 @@ import {
   NavGroup,
   NavLink,
   NavSubgroup,
+  VersionedNavGroup,
   apiRefRoutes,
   docRoutes,
 } from './routes'
@@ -80,6 +81,80 @@ function NavigationGroup({
   )
 }
 
+function VersionedNavigationGroup({
+  group,
+  className,
+  isLast,
+}: {
+  group: VersionedNavGroup
+  className?: string
+  isLast?: boolean
+}) {
+  const router = useRouter()
+  // If this is the mobile navigation then we always render the initial
+  // state, so that the state does not change during the close animation.
+  // The state will still update when we re-open (re-render) the navigation.
+  const isInsideMobileNavigation = useIsInsideMobileNavigation()
+  const initialPathname = usePathname()
+  const [pathname] = useInitialValue(
+    [initialPathname, useSectionStore((s) => s.sections)],
+    isInsideMobileNavigation
+  )
+  if (!pathname) {
+    return null
+  }
+
+  const versions = Object.keys(group.versionedItems)
+  const [curVersion, setCurVersion] = useState(versions[0])
+
+  return (
+    <li className={clsx('relative', className)}>
+      <div className="pl-2 mb-1 flex items-center justify-between gap-1">
+        <motion.h2
+          layout="position"
+          className="text-2xs font-medium text-white"
+        >
+          {group.title}
+        </motion.h2>
+        <select
+          className="text-xs text-brand-400"
+          value={curVersion}
+          onChange={(e) => {
+            setCurVersion(e.target.value)
+
+            if (pathname !== '/docs/api-reference') {
+              const pathParts = pathname.split('/')
+              pathParts[pathParts.length - 2] = e.target.value
+              router.push(pathParts.join('/'))
+            }
+          }}
+        >
+          {versions.map((version, i) => (
+            <option key={version} value={version}>
+              {i === 0 ? `${version}@latest` : version}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="relative">
+        <ul role="list" className="border-l border-transparent">
+          <>
+            {group.versionedItems[curVersion]?.map((item) => (
+              <React.Fragment key={item.title}>
+                <NavigationSubgroup subgroup={item as NavSubgroup} />
+              </React.Fragment>
+            ))}
+          </>
+        </ul>
+      </div>
+      {!isLast && (
+        // Visual separator
+        <div className="ml-2 h-px bg-white/5 my-4"></div>
+      )}
+    </li>
+  )
+}
+
 export function DocsNavigation(props) {
   return (
     <nav {...props}>
@@ -102,7 +177,7 @@ export function ApiRefNavigation(props) {
     <nav {...props}>
       <ul role="list">
         {apiRefRoutes.map((group, groupIndex) => (
-          <NavigationGroup
+          <VersionedNavigationGroup
             key={groupIndex}
             group={group}
             className={groupIndex === 0 ? 'md:mt-0' : undefined}

apps/web/src/components/Navigation/routes.tsx

@@ -19,6 +19,12 @@ export interface NavGroup {
   items: Array<NavLink | NavSubgroup>
 }
 
+export interface VersionedNavGroup {
+  title?: string
+  icon?: React.ReactNode
+  versionedItems: { [key: string]: NavSubgroup[] }
+}
+
 export const docRoutes: NavGroup[] = [
   {
     items: [
@@ -443,4 +449,5 @@ export const docRoutes: NavGroup[] = [
   // },
 ]
 
-export const apiRefRoutes: NavGroup[] = apiRefRoutesJson
+export const apiRefRoutes: VersionedNavGroup[] =
+  apiRefRoutesJson as VersionedNavGroup[]