NavContainer() — supabase Function Reference

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

Function tsx DocumentationSystem ReferenceGen calls 1

Entity Profile

DocumentationSystem→ ReferenceGen→ NavContainer() — supabase Function Reference

Dependency Diagram

graph TD
  7c9a07b5_a9db_b7a3_e501_eede4653590d["NavContainer()"]
  eb196185_fb88_9716_d1f2_9f9f9226152c["useMenuMobileOpen()"]
  7c9a07b5_a9db_b7a3_e501_eede4653590d -->|calls| eb196185_fb88_9716_d1f2_9f9f9226152c
  style 7c9a07b5_a9db_b7a3_e501_eede4653590d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/docs/layouts/MainSkeleton.tsx lines 298–353

const NavContainer = memo(function NavContainer({ children }: PropsWithChildren) {
  const mobileMenuOpen = useMenuMobileOpen()

  return (
    <nav
      aria-labelledby="main-nav-title"
      className={cn(
        'fixed lg:relative z-40 lg:z-auto',
        mobileMenuOpen ? 'w-[75%] sm:w-[50%] md:w-[33%] left-0' : 'w-0 -left-full',
        'lg:w-[420px] !lg:left-0',
        'lg:top-[var(--header-height)] lg:sticky',
        'h-screen lg:h-[calc(100vh-var(--header-height))]',
        // desktop override any left styles
        'lg:left-0',
        'transition-all',
        'top-0 bottom-0',
        'flex flex-col ml-0',
        'border-r',
        'lg:overflow-y-auto'
      )}
    >
      <div
        className={cn(
          'top-0 lg:top-[var(--header-height)]',
          'h-full',
          'relative lg:sticky',
          'w-full lg:w-auto',
          'h-fit lg:h-screen overflow-y-scroll lg:overflow-auto',
          '[overscroll-behavior:contain]',
          'backdrop-blur backdrop-filter bg-background',
          'flex flex-col flex-grow'
        )}
      >
        <span id="main-nav-title" className="sr-only">
          Main menu
        </span>
        <div className="top-0 sticky h-0 z-10">
          <div className="bg-gradient-to-b from-background to-transparent h-4 w-full"></div>
        </div>
        <div
          className={cn(
            'transition-all ease-out duration-200',
            'absolute left-0 right-0',
            'px-5 pl-5 pt-6 pb-16 lg:pb-32',
            'bg-background',
            // desktop styles
            'lg:relative lg:left-0 lg:pb-10 lg:px-10 lg:flex',
            'lg:opacity-100 lg:visible'
          )}
        >
          {children}
        </div>
      </div>
    </nav>
  )
})