FunctionLink() — supabase Function Reference

Architecture documentation for the FunctionLink() function in NavigationMenuRefListItems.tsx from the supabase codebase.

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ FunctionLink() — supabase Function Reference

Dependency Diagram

graph TD
  e75360c6_3e65_99e5_386f_ef5b895517ba["FunctionLink()"]
  c5268a47_8932_032f_0165_61b12103c889["useMenuActiveRefId()"]
  e75360c6_3e65_99e5_386f_ef5b895517ba -->|calls| c5268a47_8932_032f_0165_61b12103c889
  style e75360c6_3e65_99e5_386f_ef5b895517ba fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx lines 36–92

const FunctionLink = memo(function FunctionLink({
  title,
  id,
  icon,
  basePath,
  slug,
  isParent = false,
  isSubItem = false,
  onClick = () => {},
}: FunctionLinkProps) {
  const activeAccordionItem = useMenuActiveRefId()

  const url = `${BASE_PATH}${basePath}/${slug}`
  const active = activeAccordionItem === id

  return (
    <li className="function-link-item leading-5">
      <a
        href={url}
        /**
         * We don't actually want to navigate or re-render anything
         * since ref links are all sub-sections on the same page
         */
        onClick={(e) => {
          e.preventDefault()
          menuState.setMenuActiveRefId(id)
          history.pushState({}, '', url)
          const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
          document.getElementById(slug)?.scrollIntoView({
            behavior: reduceMotion ? 'auto' : 'smooth',
          })
          onClick()
        }}
        className={cn(
          'cursor-pointer transition text-sm hover:text-foreground gap-3 relative',
          isParent ? 'flex justify-between' : 'leading-3',
          active ? 'text-brand' : 'text-foreground-lighter'
        )}
      >
        {icon && <Image width={16} height={16} alt={icon} src={`${BASE_PATH}${icon}`} />}
        {title}
        {active && !isSubItem && (
          <div
            aria-hidden="true"
            className="absolute -left-[13px] top-0 bottom-0 w-[1px] bg-brand-600"
          ></div>
        )}
        {isParent && (
          <ChevronUp
            width={16}
            className="data-open-parent:rotate-0 data-closed-parent:rotate-90 transition"
          />
        )}
      </a>
    </li>
  )
})