NavigationItem() — supabase Function Reference

Architecture documentation for the NavigationItem() function in side-navigation-item.tsx from the supabase codebase.

Function tsx ContentManagement Collections calls 1

Entity Profile

ContentManagement→ Collections→ NavigationItem() — supabase Function Reference

Dependency Diagram

graph TD
  fb313ae9_ddfe_c4ba_f518_dd4a027ae228["NavigationItem()"]
  c5e13e18_2047_5a9b_e14e_d7c29615c887["useMobileMenu()"]
  fb313ae9_ddfe_c4ba_f518_dd4a027ae228 -->|calls| c5e13e18_2047_5a9b_e14e_d7c29615c887
  style fb313ae9_ddfe_c4ba_f518_dd4a027ae228 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/learn/components/side-navigation-item.tsx lines 26–164

const NavigationItem: React.FC<NavigationItemProps> = ({
  item,
  onClick,
  level = 0,
  internalPaths,
  isLoggedIn = true,
  ...props
}) => {
  const { setOpen } = useMobileMenu()
  const pathname = usePathname()
  const [isOpen, setIsOpen] = useState(false)

  const pathParts = pathname.split('/')
  const slug = pathParts[pathParts.length - 1]

  const hasChildren = item.items && item.items.length > 0

  // Check if internal content exists for this item and user is logged in
  const hasInternal = item.href && internalPaths?.includes(item.href) && isLoggedIn

  // Auto-expand if any child is active
  useEffect(() => {
    if (hasChildren) {
      const hasActiveChild = item.items?.some((child) => {
        return pathname === child.href
      })
      if (hasActiveChild) {
        setIsOpen(true)
      }
    }
  }, [hasChildren, item.items, pathname])

  // Use item.href if available, otherwise build from slug
  let href = item.href
  if (!href && slug) {
    href = `/docs/${slug}`
  }

  // Determine if this link represents the current page
  const isActive = pathname === href

  const handleLinkClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    // Close the mobile menu when navigating
    setOpen(false)

    // Call the onClick prop if it exists
    if (onClick) {
      onClick(e)
    }
  }

  const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault()
    setIsOpen(!isOpen)
  }

  const itemClasses = cn(
    'flex text-sm rounded-md transition-colors',
    level === 0 ? 'px-3 py-2' : 'px-3 py-1.5',
    isActive
      ? 'bg-surface-200 text-foreground'
      : hasChildren && isOpen
        ? 'bg-surface-100 text-foreground'
        : 'text-foreground-lighter hover:bg-surface-100 hover:text-foreground'
  )

  return (
    <li>
      {hasChildren ? (
        <>
          <button
            onClick={handleButtonClick}
            className={cn('w-full flex items-center justify-between gap-2 zans', itemClasses)}
          >
            <span className="flex items-center gap-2 flex-1 min-w-0">
              {item.title}
              {item.new && (
                <Badge variant="default" className="capitalize flex-shrink-0">
                  NEW
                </Badge>
              )}
            </span>
            <ChevronRight
              className={cn(
                'w-4 h-4 transition-transform flex-shrink-0',
                isOpen && 'rotate-90',
                (hasChildren && isOpen) || isActive ? 'text-foreground' : 'text-foreground-lighter'
              )}
            />
          </button>
          {isOpen && (
            <ul className="mt-1 ml-3 space-y-1 border-l border-border pl-3">
              {item.items?.map((childItem, i) => (
                <NavigationItem
                  item={childItem}
                  key={`${childItem.href}-${i}`}
                  level={level + 1}
                  internalPaths={internalPaths}
                  isLoggedIn={isLoggedIn}
                />
              ))}
            </ul>
          )}
        </>
      ) : (
        <>
          <Link href={href || '#'} {...props} onClick={handleLinkClick} className={itemClasses}>
            <span className="flex items-center gap-2">
              <span className="truncate">{item.title}</span>
              {item.new && (
                <Badge variant="default" className="capitalize flex-shrink-0">
                  NEW
                </Badge>
              )}
            </span>
          </Link>
          {hasInternal && (
            <Link
              href={`/internal${href}`}
              onClick={handleLinkClick}
              className={cn(
                'flex text-sm rounded-md transition-colors mt-1',
                level === 0 ? 'px-3 py-2' : 'px-3 py-1.5',
                pathname === `/internal${href}`
                  ? 'bg-surface-200 text-foreground'
                  : 'text-foreground-lighter hover:bg-surface-100 hover:text-foreground'
              )}
            >
              <span className="flex items-center gap-2">
                <Lock className="w-3 h-3 text-foreground-muted flex-shrink-0" />
                <span className="truncate">{item.title} (Internal)</span>
              </span>
            </Link>
          )}
        </>
      )}
    </li>
  )
}