Refactor docs nav into tabbed sections

Author: LadyBluenotes

src/components/DocsLayout.tsx

@@ -8,6 +8,10 @@ import { useLocalStorage } from '~/utils/useLocalStorage'
 import { useClickOutside } from '~/hooks/useClickOutside'
 import { last } from '~/utils/utils'
 import type { ConfigSchema, MenuItem } from '~/utils/config'
+import {
+  getActiveDocsNavTabId,
+  getTabbedMenuConfig,
+} from '~/utils/docsNavTabs'
 import { Framework, LibraryId } from '~/libraries'
 import { frameworkOptions } from '~/libraries/frameworks'
 import { DocsCalloutQueryGG } from '~/components/DocsCalloutQueryGG'
@@ -520,6 +524,7 @@ const useMenuConfig = ({
 
       return {
         label: section.label,
+        tab: section.tab,
         children,
         collapsible: section.collapsible ?? false,
         defaultCollapsed: section.defaultCollapsed ?? false,
@@ -569,22 +574,42 @@ export function DocsLayout({
 
   const detailsRef = React.useRef<HTMLElement>(null!)
 
+  const docsMatch = matches.find((d) => d.pathname.includes('/docs'))
+  const docsPathname = docsMatch?.pathname ?? ''
+
+  const relativePathname = lastMatch.pathname.replace(docsPathname + '/', '')
+
+  const tabbedMenuConfig = React.useMemo(() => {
+    return getTabbedMenuConfig(menuConfig)
+  }, [menuConfig])
+
+  const activeTabId = React.useMemo(() => {
+    return getActiveDocsNavTabId({
+      isExample,
+      menuConfig,
+      pathname: lastMatch.pathname,
+      relativePathname,
+    })
+  }, [isExample, lastMatch.pathname, menuConfig, relativePathname])
+
+  const visibleMenuConfig = React.useMemo(() => {
+    return (
+      tabbedMenuConfig.find((tab) => tab.id === activeTabId)?.groups ??
+      menuConfig
+    )
+  }, [activeTabId, menuConfig, tabbedMenuConfig])
+
   const flatMenu = React.useMemo(
-    () => menuConfig.flatMap((d) => d?.children),
-    [menuConfig],
+    () => visibleMenuConfig.flatMap((d) => d.children),
+    [visibleMenuConfig],
   )
 
   // Filter out external links for prev/next navigation
   const internalFlatMenu = React.useMemo(
-    () => flatMenu.filter((d) => d && !d.to.startsWith('http')),
+    () => flatMenu.filter((d) => !d.to.startsWith('http')),
     [flatMenu],
   )
 
-  const docsMatch = matches.find((d) => d.pathname.includes('/docs'))
-  const docsPathname = docsMatch?.pathname ?? ''
-
-  const relativePathname = lastMatch.pathname.replace(docsPathname + '/', '')
-
   const index = internalFlatMenu.findIndex((d) => d?.to === relativePathname)
   const prevItem = internalFlatMenu[index - 1]
   const nextItem = internalFlatMenu[index + 1]
@@ -600,19 +625,22 @@ export function DocsLayout({
   const activePartners = partners.filter((d) => d.status === 'active')
 
   const groupInitialOpenState = React.useMemo(() => {
-    return menuConfig.reduce<Record<string, boolean>>((acc, group, index) => {
-      const isChildActive = group.children.some((child) => child.to === _splat)
-      const key = `${index}:${String(group.label)}`
-
-      acc[key] = isChildActive
-        ? true
-        : typeof group.defaultCollapsed !== 'undefined'
-          ? !group.defaultCollapsed
-          : false
-
-      return acc
-    }, {})
-  }, [menuConfig, _splat])
+    return visibleMenuConfig.reduce<Record<string, boolean>>(
+      (acc, group, index) => {
+        const isChildActive = group.children.some((child) => child.to === _splat)
+        const key = `${index}:${String(group.label)}`
+
+        acc[key] = isChildActive
+          ? true
+          : typeof group.defaultCollapsed !== 'undefined'
+            ? !group.defaultCollapsed
+            : false
+
+        return acc
+      },
+      {},
+    )
+  }, [visibleMenuConfig, _splat])
 
   const [openGroups, setOpenGroups] = React.useState(groupInitialOpenState)
 
@@ -638,7 +666,7 @@ export function DocsLayout({
     })
   }, [groupInitialOpenState])
 
-  const menuItems = menuConfig.map((group, i) => {
+  const menuItems = visibleMenuConfig.map((group, i) => {
     const groupKey = `${i}:${String(group.label)}`
 
     const groupContent = (
@@ -808,7 +836,7 @@ export function DocsLayout({
         )}
       >
         <DocsMenuStrip
-          menuConfig={menuConfig}
+          menuConfig={visibleMenuConfig}
           activeItem={relativePathname}
           fullPathname={lastMatch.pathname}
           colorFrom={colorFrom}
@@ -835,7 +863,7 @@ export function DocsLayout({
       <div
         ref={expandedMenuRef}
         className={twMerge(
-          'max-w-[250px] xl:max-w-[300px] 2xl:max-w-[400px]',
+          'w-[250px] xl:w-[300px] 2xl:w-[400px] shrink-0',
           'flex-col overflow-hidden',
           'h-[calc(100dvh-var(--navbar-height))] top-[var(--navbar-height)]',
           'z-20 border-r border-gray-500/20',
@@ -882,6 +910,47 @@ export function DocsLayout({
     </>
   )
 
+  const docsTabs = (
+    <div className="border-b border-gray-500/20 bg-white/70 dark:bg-black/40 backdrop-blur-lg">
+      <nav
+        aria-label="Documentation sections"
+        className="flex items-center gap-1 overflow-x-auto px-3 md:px-6 py-2 text-sm"
+      >
+        {tabbedMenuConfig.map((tab) => {
+          const target = tab.firstItem
+          const isActive = tab.id === activeTabId
+
+          if (!target) {
+            return null
+          }
+
+          const linkParams =
+            !target.to.startsWith('/') || target.to.includes('/$libraryId')
+              ? ({ libraryId, version } as never)
+              : undefined
+
+          return (
+            <Link
+              key={tab.id}
+              from="/$libraryId/$version/docs"
+              to={target.to}
+              params={linkParams}
+              className={twMerge(
+                'whitespace-nowrap rounded-md px-3 py-1.5 font-semibold transition-colors',
+                'hover:bg-gray-500/10',
+                isActive
+                  ? `bg-gray-500/10 text-transparent bg-clip-text bg-linear-to-r ${colorFrom} ${colorTo}`
+                  : 'opacity-70 hover:opacity-100',
+              )}
+            >
+              {tab.label}
+            </Link>
+          )
+        })}
+      </nav>
+    </div>
+  )
+
   return (
     <WidthToggleContext.Provider value={{ isFullWidth, setIsFullWidth }}>
       <DocNavigationContext.Provider
@@ -907,13 +976,15 @@ export function DocsLayout({
           <div
             className={twMerge(
               'flex flex-col max-w-full min-w-0 flex-1 min-h-0 relative',
-              !isLandingPage && 'px-4 md:px-8',
             )}
           >
+            {docsTabs}
             <div
               className={twMerge(
                 `max-w-full min-w-0 flex flex-col justify-center w-full`,
 
+                !isLandingPage && 'px-4 md:px-8',
+
                 !isLandingPage &&
                   !isExample &&
                   !isNpmStats &&

src/utils/config.ts

@@ -3,29 +3,36 @@ import {
   fetchRepoFile,
   isRecoverableGitHubContentError,
 } from './documents.server'
+import { docsNavTabIds, type DocsNavTabId } from './docsNavTabs'
 import { createServerFn } from '@tanstack/react-start'
 import { setResponseHeaders } from '@tanstack/react-start/server'
 
 export type MenuItem = {
   label: string | React.ReactNode
+  tab?: DocsNavTabId
   children: {
     label: string | React.ReactNode
     to: string
     badge?: string
+    tab?: DocsNavTabId
   }[]
   collapsible?: boolean
   defaultCollapsed?: boolean
 }
 
+const tabSchema = v.optional(v.picklist(docsNavTabIds))
+
 const configSchema = v.object({
   sections: v.array(
     v.object({
       label: v.string(),
+      tab: tabSchema,
       children: v.array(
         v.object({
           label: v.string(),
           to: v.string(),
           badge: v.optional(v.string()),
+          tab: tabSchema,
         }),
       ),
       frameworks: v.optional(
@@ -37,6 +44,7 @@ const configSchema = v.object({
                 label: v.string(),
                 to: v.string(),
                 badge: v.optional(v.string()),
+                tab: tabSchema,
               }),
             ),
           }),