TopNavBar() — supabase Function Reference

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

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ TopNavBar() — supabase Function Reference

Dependency Diagram

graph TD
  7ce38153_9ef7_d978_7651_da4aa9818e4c["TopNavBar()"]
  2f16d733_9e88_d04d_a558_feea2279fcb9["useDropdownMenu()"]
  7ce38153_9ef7_d978_7651_da4aa9818e4c -->|calls| 2f16d733_9e88_d04d_a558_feea2279fcb9
  style 7ce38153_9ef7_d978_7651_da4aa9818e4c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx lines 23–92

const TopNavBar: FC = () => {
  const isLoggedIn = useIsLoggedIn()
  const isUserLoading = useIsUserLoading()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
  const user = useUser()
  const menu = useDropdownMenu(user)

  return (
    <>
      <nav
        aria-label="top bar"
        className="w-full z-40 flex flex-col border-b backdrop-blur backdrop-filter bg bg-opacity-75"
      >
        <div className="w-full px-5 lg:pl-10 flex justify-between h-[var(--header-height)] gap-3">
          <div className="hidden lg:flex h-full items-center justify-center gap-2">
            <HeaderLogo />
            <GlobalNavigationMenu />
          </div>
          <div className="w-full grow lg:w-auto flex gap-3 justify-between lg:justify-end items-center h-full">
            <div className="lg:hidden">
              <HeaderLogo />
            </div>

            <div className="flex gap-2 items-center">
              <DevToolbarTrigger />
              <CommandMenuTriggerInput
                placeholder={
                  <>
                    Search
                    <span className="hidden xl:inline ml-1"> docs...</span>
                  </>
                }
              />
              <button
                title="Menu dropdown button"
                className={cn(
                  buttonVariants({ type: 'default' }),
                  'flex lg:hidden border-default bg-surface-100/75 text-foreground-light rounded-md min-w-[30px] w-[30px] h-[30px] data-[state=open]:bg-overlay-hover/30'
                )}
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              >
                <Menu size={18} strokeWidth={1} />
              </button>
            </div>
          </div>
          <div className="hidden lg:flex items-center justify-end gap-3">
            {!isUserLoading && (
              <Button asChild>
                <a href="/dashboard" className="h-[30px]" target="_blank" rel="noreferrer noopener">
                  {isLoggedIn ? 'Dashboard' : 'Sign up'}
                </a>
              </Button>
            )}
            {process.env.NEXT_PUBLIC_DEV_AUTH_PAGE === 'true' && (
              <Button asChild>
                <Link href="/dev-secret-auth">Dev-only secret sign-in</Link>
              </Button>
            )}
            {isLoggedIn ? (
              <AuthenticatedDropdownMenu menu={menu} user={user} site="docs" />
            ) : (
              <TopNavDropdown />
            )}
          </div>
        </div>
      </nav>
      <GlobalMobileMenu open={mobileMenuOpen} setOpen={setMobileMenuOpen} />
    </>
  )
}