ReferenceNavigation() — supabase Function Reference

Architecture documentation for the ReferenceNavigation() function in Reference.navigation.tsx from the supabase codebase.

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ ReferenceNavigation() — supabase Function Reference

Dependency Diagram

graph TD
  da36048a_1fc2_ba06_c25a_704fa88fb95b["ReferenceNavigation()"]
  307ee6f3_ce2c_b3ce_886c_336fbe1c32eb["getReferenceSections()"]
  da36048a_1fc2_ba06_c25a_704fa88fb95b -->|calls| 307ee6f3_ce2c_b3ce_886c_336fbe1c32eb
  style da36048a_1fc2_ba06_c25a_704fa88fb95b fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/features/docs/Reference.navigation.tsx lines 24–62

export async function ReferenceNavigation({
  libraryId,
  name,
  menuData,
  libPath,
  version,
  isLatestVersion,
}: ReferenceNavigationProps) {
  const navSections = await getReferenceSections(libraryId, version)
  const filteredNavSections = navSections?.filter((section) => section.title !== 'Auth')
  const displayedNavSections = isFeatureEnabled('sdk:auth') ? navSections : filteredNavSections

  const basePath = `/reference/${libPath}${isLatestVersion ? '' : `/${version}`}`

  return (
    <ReferenceNavigationScrollHandler className="w-full flex flex-col pt-3 pb-5 gap-3">
      <div className="flex items-center gap-3">
        {'icon' in menuData && <MenuIconPicker icon={menuData.icon || ''} width={21} height={21} />}
        <span className="text-base text-brand-600">{name}</span>
        <RefVersionDropdown library={libPath} currentVersion={version} />
      </div>
      <ul className="flex flex-col gap-2">
        {displayedNavSections?.map((section) => (
          <Fragment key={section.id}>
            {section.type === 'category' ? (
              <li>
                <RefCategory basePath={basePath} section={section} />
              </li>
            ) : (
              <li className={topLvlRefNavItemStyles}>
                <RefLink basePath={basePath} section={section} />
              </li>
            )}
          </Fragment>
        ))}
      </ul>
    </ReferenceNavigationScrollHandler>
  )
}