FirstLevelNav() — supabase Function Reference

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

Function tsx ContentManagement AccessControl calls 1

Entity Profile

ContentManagement→ AccessControl→ FirstLevelNav() — supabase Function Reference

Dependency Diagram

graph TD
  28ff4bab_9260_c497_8dd6_40dd7045906e["FirstLevelNav()"]
  36998f49_32ad_53f8_2b38_d762e82bdd43["useDocsMenu()"]
  28ff4bab_9260_c497_8dd6_40dd7045906e -->|calls| 36998f49_32ad_53f8_2b38_d762e82bdd43
  style 28ff4bab_9260_c497_8dd6_40dd7045906e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/ProjectAPIDocs/FirstLevelNav.tsx lines 68–156

export const FirstLevelNav = (): ReactNode => {
  const { ref } = useParams()

  const snap = useAppStateSnapshot()
  const currentSection = snap.activeDocsSection[0]

  const docsMenu = useDocsMenu()

  return (
    <>
      <nav aria-labelledby="api-docs-rest-categories" className="px-2 py-4  border-b">
        <h2 id="api-docs-rest-categories" className="sr-only">
          REST API Docs
        </h2>
        {docsMenu.map((item) => {
          const isActive = currentSection === item.key

          return (
            <Fragment key={item.key}>
              <button
                aria-current={isActive ? 'page' : undefined}
                className={cn(
                  'w-full px-3 py-2 rounded-md',
                  'text-left text-sm',
                  'transition',
                  isActive && 'bg-surface-300'
                )}
                onClick={() => snap.setActiveDocsSection([item.key])}
              >
                {item.name}
              </button>
              {isActive && <Subsections category={item.key} />}
            </Fragment>
          )
        })}
      </nav>

      <div className="px-2 py-4 border-b">
        <Button
          block
          asChild
          type="text"
          size="small"
          icon={
            <SVG
              src={`${BASE_PATH}/img/graphql.svg`}
              style={{ width: `${16}px`, height: `${16}px` }}
              className="text-foreground"
              preProcessor={(code) => code.replace(/svg/, 'svg class="m-auto text-color-inherit"')}
            />
          }
          onClick={() => snap.setShowProjectApiDocs(false)}
        >
          <Link className="!justify-start" href={`/project/${ref}/api/graphiql`}>
            GraphiQL
          </Link>
        </Button>
        <Button block asChild type="text" size="small" icon={<BookOpen />}>
          <Link
            href={`${DOCS_URL}/guides/graphql`}
            target="_blank"
            rel="noreferrer"
            className="!justify-start"
          >
            GraphQL guide
          </Link>
        </Button>
      </div>

      <div className="px-2 py-4">
        <Button block asChild type="text" size="small" icon={<Book />}>
          <Link href={`${DOCS_URL}`} target="_blank" rel="noreferrer" className="!justify-start">
            Documentation
          </Link>
        </Button>
        <Button block asChild type="text" size="small" icon={<BookOpen />}>
          <Link
            href={`${DOCS_URL}/guides/api`}
            target="_blank"
            rel="noreferrer"
            className="!justify-start"
          >
            REST guide
          </Link>
        </Button>
      </div>
    </>
  )
}