NavigationItem() — supabase Function Reference

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

Function tsx DesignSystem ThemeEngine calls 1

Entity Profile

DesignSystem→ ThemeEngine→ NavigationItem() — supabase Function Reference

Dependency Diagram

graph TD
  1f7a5344_07a7_f585_7541_26f627b743d6["NavigationItem()"]
  56350b50_3ba0_3127_269f_6c6b1e7d60f5["useMobileSidebar()"]
  1f7a5344_07a7_f585_7541_26f627b743d6 -->|calls| 56350b50_3ba0_3127_269f_6c6b1e7d60f5
  style 1f7a5344_07a7_f585_7541_26f627b743d6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/design-system/components/side-navigation-item.tsx lines 11–48

export const NavigationItem: React.FC<{ item: SidebarNavItem }> = React.memo(({ item }) => {
  const pathname = usePathname()
  const { setOpen } = useMobileSidebar()

  const isActive = pathname === item.href

  const handleClick = () => {
    setOpen(false)
  }

  return (
    <Link
      href={`${item.href}`}
      onClick={handleClick}
      className={cn(
        'relative',
        'flex',
        'items-center',
        'h-6',
        'text-sm',
        'text-foreground-lighter px-6',
        !isActive && 'hover:bg-surface-100 hover:text-foreground',
        isActive && 'bg-surface-200 text-foreground',
        'transition-all'
      )}
    >
      <div
        className={cn(
          'transition',
          'absolute left-0 w-1 h-full bg-foreground',

          isActive ? 'opacity-100' : 'opacity-0'
        )}
      ></div>
      {item.title}
    </Link>
  )
})