fix: statically build the right nav on each page (#21469)

Before: All pages have the Home nav menu in static HTML, which is blown away and replaced by the proper nav menu upon hydration. This leads to jankiness when the page first loads and an unpleasant flash of the wrong nav menu (especially obvious on the JavaScript ref page, which takes a long time to process and rerender the nav).

Now: All pages have their correct nav menu in static HTML.

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx

@@ -1,13 +1,45 @@
-import { useRouter } from 'next/router'
-import { memo, useEffect } from 'react'
-import { menuState, useMenuLevelId } from '~/hooks/useMenuState'
+import { memo } from 'react'
 import NavigationMenuHome from './HomeMenu'
 import NavigationMenuGuideList from './NavigationMenuGuideList'
 import NavigationMenuRefList from './NavigationMenuRefList'
 
+enum MenuId {
+  Home = 'home',
+  GettingStarted = 'gettingstarted',
+  Database = 'database',
+  Api = 'api',
+  Graphql = 'graphql',
+  Auth = 'auth',
+  Functions = 'functions',
+  Realtime = 'realtime',
+  Storage = 'storage',
+  Ai = 'ai',
+  Platform = 'platform',
+  Resources = 'resources',
+  SelfHosting = 'self_hosting',
+  Integrations = 'integrations',
+  Cli = 'supabase_cli',
+  RefJavaScriptV1 = 'reference_javascript_v1',
+  RefJavaScriptV2 = 'reference_javascript_v2',
+  RefDartV1 = 'reference_dart_v1',
+  RefDartV2 = 'reference_dart_v2',
+  RefCSharpV0 = 'reference_csharp_v0',
+  RefPythonV2 = 'reference_python_v2',
+  RefSwiftV1 = 'reference_swift_v1',
+  RefSwiftV2 = 'reference_swift_v2',
+  RefKotlinV1 = 'reference_kotlin_v1',
+  RefKotlinV2 = 'reference_kotlin_v2',
+  RefCli = 'reference_cli',
+  RefApi = 'reference_api',
+  SelfHostingAuth = 'reference_self_hosting_auth',
+  SelfHostingStorage = 'reference_self_hosting_storage',
+  SelfHostingRealtime = 'reference_self_hosting_realtime',
+  SelfHostingAnalytics = 'reference_self_hosting_analytics',
+  SelfHostingFunctions = 'reference_self_hosting_functions',
+}
+
 interface BaseMenu {
-  id: string
-  path: string
+  id: MenuId
   type: string
 }
 
@@ -21,6 +53,7 @@ interface GuideMenu extends BaseMenu {
 
 interface ReferenceMenu extends BaseMenu {
   type: 'reference'
+  path: string
   commonSectionsFile: string
   specFile?: string
 }
@@ -29,211 +62,181 @@ type Menu = HomeMenu | GuideMenu | ReferenceMenu
 
 const menus: Menu[] = [
   {
-    id: 'home',
-    path: '/',
+    id: MenuId.Home,
     type: 'home',
   },
   {
-    id: 'gettingstarted',
-    path: '/guides/getting-started',
+    id: MenuId.GettingStarted,
     type: 'guide',
   },
   {
-    id: 'database',
-    path: '/guides/database',
+    id: MenuId.Database,
     type: 'guide',
   },
   {
-    id: 'api',
-    path: '/guides/api',
+    id: MenuId.Api,
     type: 'guide',
   },
   {
-    id: 'graphql',
-    path: '/guides/graphql',
+    id: MenuId.Graphql,
     type: 'guide',
   },
   {
-    id: 'auth',
-    path: '/guides/auth',
+    id: MenuId.Auth,
     type: 'guide',
   },
   {
-    id: 'auth',
-    path: '/learn/auth-deep-dive',
+    id: MenuId.Functions,
     type: 'guide',
   },
   {
-    id: 'functions',
-    path: '/guides/functions',
+    id: MenuId.Realtime,
     type: 'guide',
   },
   {
-    id: 'realtime',
-    path: '/guides/realtime',
+    id: MenuId.Storage,
     type: 'guide',
   },
   {
-    id: 'storage',
-    path: '/guides/storage',
+    id: MenuId.Ai,
     type: 'guide',
   },
   {
-    id: 'ai',
-    path: '/guides/ai',
+    id: MenuId.Platform,
     type: 'guide',
   },
   {
-    id: 'platform',
-    path: '/guides/platform',
+    id: MenuId.Resources,
     type: 'guide',
   },
   {
-    id: 'resources',
-    path: '/guides/resources',
+    id: MenuId.SelfHosting,
     type: 'guide',
   },
   {
-    id: 'self_hosting',
-    path: '/guides/self-hosting',
+    id: MenuId.Integrations,
     type: 'guide',
   },
   {
-    id: 'integrations',
-    path: '/guides/integrations',
+    id: MenuId.Cli,
     type: 'guide',
   },
   {
-    id: 'supabase_cli',
-    // TODO: Add path '/guides/cli/config'
-    path: '/guides/cli',
-    type: 'guide',
-  },
-  {
-    id: 'reference_javascript_v1',
-    path: '/reference/javascript/v1',
+    id: MenuId.RefJavaScriptV1,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_js_v1.yml',
     type: 'reference',
+    path: '/reference/javascript/v1',
   },
   {
-    id: 'reference_javascript_v2',
-    path: '/reference/javascript',
+    id: MenuId.RefJavaScriptV2,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_js_v2.yml',
     type: 'reference',
+    path: '/reference/javascript',
   },
   {
-    id: 'reference_dart_v1',
-    path: '/reference/dart/v1',
+    id: MenuId.RefDartV1,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_dart_v1.yml',
     type: 'reference',
+    path: '/reference/dart/v1',
   },
   {
-    id: 'reference_dart_v2',
-    path: '/reference/dart',
+    id: MenuId.RefDartV2,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_dart_v2.yml',
     type: 'reference',
+    path: '/reference/dart',
   },
   {
-    id: 'reference_csharp_v0',
-    path: '/reference/csharp',
+    id: MenuId.RefCSharpV0,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_csharp_v0.yml',
     type: 'reference',
+    path: '/reference/csharp',
   },
   {
-    id: 'reference_python_v2',
-    path: '/reference/python',
+    id: MenuId.RefPythonV2,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_py_v2.yml',
     type: 'reference',
+    path: '/reference/python',
   },
   {
-    id: 'reference_swift_v1',
-    path: '/reference/swift',
+    id: MenuId.RefSwiftV1,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_swift_v1.yml',
     type: 'reference',
+    path: '/reference/swift',
   },
   {
-    id: 'reference_swift_v2',
-    path: '/reference/swift',
+    id: MenuId.RefSwiftV2,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_swift_v2.yml',
     type: 'reference',
+    path: '/reference/swift',
   },
   {
-    id: 'reference_kotlin_v1',
-    path: '/reference/kotlin/v1',
+    id: MenuId.RefKotlinV1,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_kt_v1.yml',
     type: 'reference',
+    path: '/reference/kotlin/v1',
   },
   {
-    id: 'reference_kotlin_v2',
-    path: '/reference/kotlin',
+    id: MenuId.RefKotlinV2,
     commonSectionsFile: 'common-client-libs-sections.json',
     specFile: 'supabase_kt_v2.yml',
     type: 'reference',
+    path: '/reference/kotlin',
   },
   {
-    id: 'reference_cli',
-    path: '/reference/cli',
+    id: MenuId.RefCli,
     commonSectionsFile: 'common-cli-sections.json',
     type: 'reference',
+    path: '/reference/cli',
   },
   {
-    id: 'reference_api',
-    path: '/reference/api',
+    id: MenuId.RefApi,
     commonSectionsFile: 'common-api-sections.json',
     type: 'reference',
+    path: '/reference/api',
   },
   {
-    id: 'reference_self_hosting_auth',
-    path: '/reference/self-hosting-auth',
+    id: MenuId.SelfHostingAuth,
     commonSectionsFile: 'common-self-hosting-auth-sections.json',
     type: 'reference',
+    path: '/reference/self-hosting-auth',
   },
   {
-    id: 'reference_self_hosting_storage',
-    path: '/reference/self-hosting-storage',
+    id: MenuId.SelfHostingStorage,
     commonSectionsFile: 'common-self-hosting-storage-sections.json',
     type: 'reference',
+    path: '/reference/self-hosting-storage',
   },
   {
-    id: 'reference_self_hosting_realtime',
-    path: '/reference/self-hosting-realtime',
+    id: MenuId.SelfHostingRealtime,
     commonSectionsFile: 'common-self-hosting-realtime-sections.json',
     type: 'reference',
+    path: '/reference/self-hosting-realtime',
   },
   {
-    id: 'reference_self_hosting_analytics',
-    path: '/reference/self-hosting-analytics',
+    id: MenuId.SelfHostingAnalytics,
     commonSectionsFile: 'common-self-hosting-analytics-sections.json',
     type: 'reference',
+    path: '/reference/self-hosting-analytics',
   },
   {
-    id: 'reference_self_hosting_functions',
-    path: '/reference/self-hosting-functions',
+    id: MenuId.SelfHostingFunctions,
     commonSectionsFile: 'common-self-hosting-functions-sections.json',
     type: 'reference',
+    path: '/reference/self-hosting-functions',
   },
 ]
 
-function getMenuById(id: string) {
-  return menus.find((menu) => menu.id === id)
-}
-
-function getMenuByUrl(basePath: string, url: string) {
-  // If multiple matches, choose the menu with the longest path
-  const [menu] = menus
-    .filter(({ path }) => url.startsWith(`${basePath}${path}`))
-    .sort((a, b) => b.path.length - a.path.length)
-
-  return menu
+function getMenuById(id: MenuId) {
+  return menus.find((menu) => menu.id === id) ?? menus.find((menu) => menu.id === MenuId.Home)
 }
 
 function getMenuElement(menu: Menu) {
@@ -257,29 +260,12 @@ function getMenuElement(menu: Menu) {
   }
 }
 
-const NavigationMenu = () => {
-  const router = useRouter()
-
-  useEffect(() => {
-    function handleRouteChange(url: string) {
-      const menu = getMenuByUrl(router.basePath, url)
-      if (menu) {
-        menuState.setMenuLevelId(menu.id)
-      }
-    }
-
-    handleRouteChange(router.basePath + router.asPath)
-    // Listen for page changes after a navigation or when the query changes
-    router.events.on('routeChangeComplete', handleRouteChange)
-    return () => {
-      router.events.off('routeChangeComplete', handleRouteChange)
-    }
-  }, [router.asPath, router.basePath, router.events])
-
-  const level = useMenuLevelId()
+const NavigationMenu = ({ menuId }: { menuId: MenuId }) => {
+  const level = menuId
   const menu = getMenuById(level)
 
   return getMenuElement(menu)
 }
 
+export { MenuId }
 export default memo(NavigationMenu)

apps/docs/components/reference/RefSectionHandler.tsx

@@ -2,6 +2,7 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 
+import { type MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefEducationSection from '~/components/reference/RefEducationSection'
 import RefFunctionSection from '~/components/reference/RefFunctionSection'
 
@@ -10,6 +11,7 @@ import ApiOperationSection from './ApiOperationSection'
 import CliCommandSection from './CLICommandSection'
 import OldVersionAlert from './OldVersionAlert'
 import { IAPISpec, ICommonSection, IRefStaticDoc, ISpec, TypeSpec } from './Reference.types'
+import { MainSkeleton } from '~/layouts/MainSkeleton'
 
 interface RefSectionHandlerProps {
   sections: ICommonSection[]
@@ -18,6 +20,7 @@ interface RefSectionHandlerProps {
   pageProps: { docs: IRefStaticDoc[] }
   type: 'client-lib' | 'cli' | 'api'
   isOldVersion?: boolean
+  menuId: MenuId
 }
 
 const RefSectionHandler = (props: RefSectionHandlerProps) => {
@@ -75,53 +78,55 @@ const RefSectionHandler = (props: RefSectionHandlerProps) => {
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="canonical" href={`https://supabase.com${router.basePath}${path}`} />
       </Head>
-      {props.isOldVersion && <OldVersionAlert sections={props.sections} />}
-      <RefSubLayout>
-        {props.sections.map((section, i) => {
-          const sectionType = section.type
-          switch (sectionType) {
-            case 'markdown':
-              const markdownData = props.pageProps.docs.find((doc) => doc.id === section.id)
+      <MainSkeleton menuId={props.menuId}>
+        {props.isOldVersion && <OldVersionAlert sections={props.sections} />}
+        <RefSubLayout>
+          {props.sections.map((section, i) => {
+            const sectionType = section.type
+            switch (sectionType) {
+              case 'markdown':
+                const markdownData = props.pageProps.docs.find((doc) => doc.id === section.id)
 
-              return (
-                <RefEducationSection
-                  key={section.id + i}
-                  item={section}
-                  markdownContent={markdownData}
-                />
-              )
-            case 'function':
-              return (
-                <RefFunctionSection
-                  key={section.id + i}
-                  funcData={section}
-                  commonFuncData={section}
-                  spec={props.spec}
-                  typeSpec={props.typeSpec}
-                />
-              )
-            case 'cli-command':
-              return (
-                <CliCommandSection
-                  key={section.id + i}
-                  funcData={section}
-                  commonFuncData={section}
-                />
-              )
-            case 'operation':
-              return (
-                <ApiOperationSection
-                  key={section.id + i}
-                  funcData={section}
-                  commonFuncData={section}
-                  spec={props.spec}
-                />
-              )
-            default:
-              throw new Error(`Unknown common section type '${sectionType}'`)
-          }
-        })}
-      </RefSubLayout>
+                return (
+                  <RefEducationSection
+                    key={section.id + i}
+                    item={section}
+                    markdownContent={markdownData}
+                  />
+                )
+              case 'function':
+                return (
+                  <RefFunctionSection
+                    key={section.id + i}
+                    funcData={section}
+                    commonFuncData={section}
+                    spec={props.spec}
+                    typeSpec={props.typeSpec}
+                  />
+                )
+              case 'cli-command':
+                return (
+                  <CliCommandSection
+                    key={section.id + i}
+                    funcData={section}
+                    commonFuncData={section}
+                  />
+                )
+              case 'operation':
+                return (
+                  <ApiOperationSection
+                    key={section.id + i}
+                    funcData={section}
+                    commonFuncData={section}
+                    spec={props.spec}
+                  />
+                )
+              default:
+                throw new Error(`Unknown common section type '${sectionType}'`)
+            }
+          })}
+        </RefSubLayout>
+      </MainSkeleton>
     </>
   )
 }

apps/docs/hooks/useMenuState.ts

@@ -7,11 +7,6 @@ export const menuState = proxy({
   setMenuActiveRefId: (value) => {
     menuState.menuActiveRefId = value
   },
-  menuLevelId: 'home',
-  setMenuLevelId: (value) => {
-    menuState.menuMobileOpen = false
-    menuState.menuLevelId = value
-  },
   menuMobileOpen: false,
   setMenuMobileOpen: (value) => {
     menuState.menuMobileOpen = value
@@ -21,9 +16,6 @@ export const menuState = proxy({
 export const useMenuActiveRefId = () => {
   return useSnapshot(menuState).menuActiveRefId
 }
-export const useMenuLevelId = () => {
-  return useSnapshot(menuState).menuLevelId
-}
 
 export const useMenuMobileOpen = () => {
   return useSnapshot(menuState).menuMobileOpen

apps/docs/layouts/DefaultGuideLayout.tsx

@@ -1,5 +1,6 @@
 import { FC } from 'react'
 import { FooterHelpCalloutType } from '~/components/FooterHelpCallout'
+import { type MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import GuideLayout from './guides'
 
 interface Props {
@@ -16,6 +17,7 @@ interface Props {
   hideToc?: boolean
   currentPage?: string
   editLink?: string
+  menuId: MenuId
 }
 
 const Layout: FC<Props> = (props) => {

apps/docs/layouts/DefaultLayout.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/router'
 import { FC, PropsWithChildren } from 'react'
 import components from '~/components'
 import TableOfContents from '~/components/TableOfContents'
+import { MainSkeleton } from './MainSkeleton'
 
 interface Props {
   meta: {

apps/docs/layouts/HomeLayout.tsx

@@ -4,9 +4,11 @@ import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { FC } from 'react'
 import components from '~/components'
+import HomePageCover from '~/components/HomePageCover'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import TableOfContents from '~/components/TableOfContents'
-import HomePageCover from '../components/HomePageCover'
 import { LayoutMainContent } from './DefaultLayout'
+import { MainSkeleton } from './MainSkeleton'
 
 interface Props {
   meta: {
@@ -61,26 +63,28 @@ const HomeLayout: FC<Props> = (props: Props) => {
           },
         }}
       />
-      <article>
-        <HomePageCover meta={props.meta} />
-        <LayoutMainContent>
-          <div className={['relative transition-all ease-out', 'duration-150 '].join(' ')}>
-            <div className="prose max-w-none">
-              <MDXProvider components={components}>{props.children}</MDXProvider>
+      <MainSkeleton menuId={MenuId.Home}>
+        <article>
+          <HomePageCover meta={props.meta} />
+          <LayoutMainContent>
+            <div className={['relative transition-all ease-out', 'duration-150 '].join(' ')}>
+              <div className="prose max-w-none">
+                <MDXProvider components={components}>{props.children}</MDXProvider>
+              </div>
             </div>
-          </div>
-          {hasTableOfContents && !props.meta?.hide_table_of_contents && (
-            <div
-              className={[
-                'border-default bg-background table-of-contents-height border-l',
-                'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
-              ].join(' ')}
-            >
-              <TableOfContents toc={props.toc} video={props.meta.video} />
-            </div>
-          )}
-        </LayoutMainContent>
-      </article>
+            {hasTableOfContents && !props.meta?.hide_table_of_contents && (
+              <div
+                className={[
+                  'border-default bg-background table-of-contents-height border-l',
+                  'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
+                ].join(' ')}
+              >
+                <TableOfContents toc={props.toc} video={props.meta.video} />
+              </div>
+            )}
+          </LayoutMainContent>
+        </article>
+      </MainSkeleton>
     </>
   )
 }

apps/docs/layouts/MainSkeleton.tsx

@@ -0,0 +1,376 @@
+import { useTheme } from 'next-themes'
+import Image from 'next/legacy/image'
+import Link from 'next/link'
+import NavigationMenu, { type MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
+import TopNavBar from '~/components/Navigation/NavigationMenu/TopNavBar'
+
+import { PropsWithChildren, memo, useEffect } from 'react'
+import Footer from '~/components/Navigation/Footer'
+import { menuState, useMenuMobileOpen } from '~/hooks/useMenuState'
+
+const levelsData = {
+  home: {
+    icon: '/docs/img/icons/menu/home',
+    name: 'Home',
+  },
+  gettingstarted: {
+    icon: '/docs/img/icons/menu/getting-started',
+    name: 'Getting Started',
+  },
+  database: {
+    icon: '/docs/img/icons/menu/database',
+    name: 'Database',
+  },
+  api: {
+    icon: '/docs/img/icons/menu/rest',
+    name: 'REST API',
+  },
+  graphql: {
+    icon: '/docs/img/icons/menu/graphql',
+    name: 'GraphQL',
+  },
+  auth: {
+    icon: '/docs/img/icons/menu/auth',
+    name: 'Auth',
+  },
+  functions: {
+    icon: '/docs/img/icons/menu/functions',
+    name: 'Edge Functions',
+  },
+  realtime: {
+    icon: '/docs/img/icons/menu/realtime',
+    name: 'Realtime',
+  },
+  analytics: {
+    icon: '/docs/img/icons/menu/analytics',
+    name: 'Analytics',
+  },
+  storage: {
+    icon: '/docs/img/icons/menu/storage',
+    name: 'Storage',
+  },
+  ai: {
+    icon: '/docs/img/icons/menu/ai',
+    name: 'AI & Vectors',
+  },
+  supabase_cli: {
+    icon: '/docs/img/icons/menu/reference-cli',
+    name: 'Supabase CLI',
+  },
+  platform: {
+    icon: '/docs/img/icons/menu/platform',
+    name: 'Platform',
+  },
+  resources: {
+    icon: '/docs/img/icons/menu/resources',
+    name: 'Resources',
+  },
+  self_hosting: {
+    icon: '/docs/img/icons/menu/self-hosting',
+    name: 'Self-Hosting',
+  },
+  integrations: {
+    icon: '/docs/img/icons/menu/integrations',
+    name: 'Integrations',
+  },
+  reference_javascript_v1: {
+    icon: '/docs/img/icons/menu/reference-javascript',
+    name: 'Javascript Reference v1.0',
+  },
+  reference_javascript_v2: {
+    icon: '/docs/img/icons/menu/reference-javascript',
+    name: 'Javascript Reference v2.0',
+  },
+  reference_dart_v1: {
+    icon: '/docs/img/icons/menu/reference-dart',
+    name: 'Dart Reference v1.0',
+  },
+  reference_dart_v2: {
+    icon: '/docs/img/icons/menu/reference-dart',
+    name: 'Dart Reference v2.0',
+  },
+  reference_csharp_v0: {
+    icon: '/docs/img/icons/menu/reference-csharp',
+    name: 'C# Reference v0.0',
+  },
+  reference_python_v2: {
+    icon: '/docs/img/icons/menu/reference-python',
+    name: 'Python Reference v2.0',
+  },
+  reference_swift_v1: {
+    icon: '/docs/img/icons/menu/reference-swift',
+    name: 'Swift Reference v1.0',
+  },
+  reference_swift_v2: {
+    icon: '/docs/img/icons/menu/reference-swift',
+    name: 'Swift Reference v2.0',
+  },
+  reference_kotlin_v1: {
+    icon: '/docs/img/icons/menu/reference-kotlin',
+    name: 'Kotlin Reference v1.0',
+  },
+  reference_kotlin_v2: {
+    icon: '/docs/img/icons/menu/reference-kotlin',
+    name: 'Kotlin Reference v2.0',
+  },
+  reference_cli: {
+    icon: '/docs/img/icons/menu/reference-cli',
+    name: 'CLI Reference',
+  },
+  reference_api: {
+    icon: '/docs/img/icons/menu/reference-api',
+    name: 'Management API Reference',
+  },
+  reference_self_hosting_auth: {
+    icon: '/docs/img/icons/menu/reference-auth',
+    name: 'Auth Server Reference',
+  },
+  reference_self_hosting_storage: {
+    icon: '/docs/img/icons/menu/reference-storage',
+    name: 'Storage Server Reference',
+  },
+  reference_self_hosting_realtime: {
+    icon: '/docs/img/icons/menu/reference-realtime',
+    name: 'Realtime Server Reference',
+  },
+  reference_self_hosting_analytics: {
+    icon: '/docs/img/icons/menu/reference-analytics',
+    name: 'Analytics Server Reference',
+  },
+  reference_self_hosting_functions: {
+    icon: '/docs/img/icons/menu/reference-functions',
+    name: 'Functions Server Reference',
+  },
+}
+
+const MobileHeader = memo(function MobileHeader({ menuId }: { menuId: MenuId }) {
+  const mobileMenuOpen = useMenuMobileOpen()
+  const menuLevel = menuId
+
+  return (
+    <div
+      className={[
+        'transition-all ease-out z-10',
+        'top-0',
+        mobileMenuOpen && 'absolute',
+        'flex items-center h-[40px]',
+        mobileMenuOpen ? 'gap-0' : 'gap-3',
+      ].join(' ')}
+    >
+      <button
+        className={['mr-2', mobileMenuOpen && 'mt-0.5'].join(' ')}
+        onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
+      >
+        <div
+          className={[
+            'space-y-1 group cursor-pointer relative',
+            mobileMenuOpen ? 'w-4 h-4' : 'w-4 h-[8px]',
+          ].join(' ')}
+        >
+          <span
+            className={[
+              'transition-all ease-out block w-4 h-px bg-foreground-muted group-hover:bg-foreground',
+              !mobileMenuOpen ? 'w-4' : 'absolute rotate-45 top-[6px]',
+            ].join(' ')}
+          ></span>
+          <span
+            className={[
+              'transition-all ease-out block h-px bg-foreground-muted group-hover:bg-foreground',
+              !mobileMenuOpen ? 'w-3 group-hover:w-4' : 'absolute w-4 -rotate-45 top-[2px]',
+            ].join(' ')}
+          ></span>
+        </div>
+      </button>
+      <div className={[].join(' ')}>
+        <img
+          src={menuLevel ? levelsData[menuLevel].icon + '.svg' : levelsData['home'].icon + '.svg'}
+          className={[
+            'transition-all duration-200',
+            mobileMenuOpen ? 'invisible w-0 h-0' : 'w-4 h-4',
+          ].join(' ')}
+        />
+      </div>
+      <span
+        className={[
+          'transition-all duration-200',
+          'text-foreground',
+          mobileMenuOpen ? 'text-xs' : 'text-sm',
+        ].join(' ')}
+      >
+        {mobileMenuOpen
+          ? 'Close'
+          : menuLevel
+            ? levelsData[menuLevel].name
+            : levelsData['home'].name}
+      </span>
+    </div>
+  )
+})
+
+const MobileMenuBackdrop = memo(function MobileMenuBackdrop() {
+  const mobileMenuOpen = useMenuMobileOpen()
+
+  useEffect(() => {
+    window.addEventListener('resize', (e: UIEvent) => {
+      const w = e.target as Window
+      if (mobileMenuOpen && w.innerWidth >= 1024) {
+        menuState.setMenuMobileOpen(!mobileMenuOpen)
+      }
+    })
+    return () => {
+      window.removeEventListener('resize', () => {})
+    }
+  }, [mobileMenuOpen])
+
+  return (
+    <div
+      className={[
+        'h-full',
+        'left-0',
+        'right-0',
+        'z-10',
+        'backdrop-blur-sm backdrop-filter bg-alternative/90',
+        mobileMenuOpen ? 'absolute h-full w-full top-0 left-0' : 'hidden h-0',
+        // always hide on desktop
+        'lg:hidden',
+      ].join(' ')}
+      onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
+    ></div>
+  )
+})
+
+const HeaderLogo = memo(function HeaderLogo() {
+  const { resolvedTheme } = useTheme()
+  return (
+    <Link href="/" className="px-10 flex items-center gap-2">
+      <Image
+        className="cursor-pointer"
+        src={
+          resolvedTheme?.includes('dark') ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'
+        }
+        width={96}
+        height={24}
+        alt="Supabase Logo"
+      />
+      <span className="font-mono text-sm font-medium text-brand-link">DOCS</span>
+    </Link>
+  )
+})
+
+const Container = memo(function Container(props: PropsWithChildren) {
+  const mobileMenuOpen = useMenuMobileOpen()
+
+  return (
+    <div
+      // #docs-content-container is used by layout to scroll to top
+      id="docs-content-container"
+      className={[
+        // 'overflow-x-auto',
+        'w-full transition-all ease-out',
+        // 'absolute lg:relative',
+        mobileMenuOpen ? 'ml-[75%] sm:ml-[50%] md:ml-[33%] overflow-hidden' : 'overflow-auto',
+        // desktop override any margin styles
+        'lg:ml-0',
+      ].join(' ')}
+    >
+      <div className="flex flex-col relative">{props.children}</div>
+    </div>
+  )
+})
+
+const NavContainer = memo(function NavContainer({ menuId }: { menuId: MenuId }) {
+  const mobileMenuOpen = useMenuMobileOpen()
+
+  return (
+    <nav
+      aria-labelledby="main-nav-title"
+      className={[
+        // 'hidden',
+        'absolute lg:relative',
+        mobileMenuOpen ? 'w-[75%] sm:w-[50%] md:w-[33%] left-0' : 'w-0 -left-[280px]',
+        'lg:w-[420px] !lg:left-0',
+        // desktop override any left styles
+        'lg:left-0',
+        'transition-all',
+        'top-0',
+        'flex flex-col ml-0',
+      ].join(' ')}
+    >
+      <div
+        className={[
+          'top-0',
+          'relative',
+          'w-auto',
+          'border-r overflow-auto h-screen',
+          'backdrop-blur backdrop-filter bg-background',
+          'flex flex-col',
+        ].join(' ')}
+      >
+        <h1 id="main-nav-title" className="sr-only">
+          Main menu
+        </h1>
+        <div className="top-0 sticky z-10">
+          <div>
+            <div>
+              <div
+                className={[
+                  'hidden lg:flex lg:height-auto',
+                  'pt-8 bg-background flex-col gap-8',
+                ].join(' ')}
+              >
+                <HeaderLogo />
+              </div>
+              <div className="h-4 bg-background w-full"></div>
+              <div className="bg-gradient-to-b from-background to-transparent h-4 w-full"></div>
+            </div>
+          </div>
+        </div>
+        <div
+          className={[
+            'transition-all ease-out duration-200',
+            'absolute left-0 right-0 h-screen',
+            'px-5 pl-5 py-16',
+            'top-[0px]',
+            'bg-background',
+            // desktop styles
+            'lg:relative lg:top-0 lg:left-0 lg:pb-10 lg:px-10 lg:pt-0 lg:flex',
+            'lg:opacity-100 lg:visible',
+          ].join(' ')}
+        >
+          <NavigationMenu menuId={menuId} />
+        </div>
+      </div>
+    </nav>
+  )
+})
+
+function MainSkeleton({ children, menuId }: PropsWithChildren<{ menuId: MenuId }>) {
+  return (
+    <div className="flex flex-row h-full">
+      <NavContainer menuId={menuId} />
+      <Container>
+        <div className={['lg:sticky top-0 z-10 overflow-hidden'].join(' ')}>
+          <TopNavBar />
+        </div>
+        <div
+          className={[
+            'sticky transition-all top-0',
+            'z-10',
+            'backdrop-blur backdrop-filter bg-background',
+          ].join(' ')}
+        >
+          <div className={['lg:hidden', 'px-5 ', 'border-b z-10'].join(' ')}>
+            <MobileHeader menuId={menuId} />
+          </div>
+        </div>
+        <div className="grow">
+          {children}
+          <Footer />
+        </div>
+        <MobileMenuBackdrop />
+      </Container>
+    </div>
+  )
+}
+
+export { MainSkeleton }

apps/docs/layouts/SiteLayout.tsx

@@ -1,349 +1,5 @@
-import { useTheme } from 'next-themes'
-import Image from 'next/legacy/image'
-import Link from 'next/link'
-import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMenu'
-import TopNavBar from '~/components/Navigation/NavigationMenu/TopNavBar'
-
 import Head from 'next/head'
-import { PropsWithChildren, memo, useEffect } from 'react'
-import Footer from '~/components/Navigation/Footer'
-import { menuState, useMenuLevelId, useMenuMobileOpen } from '~/hooks/useMenuState'
-
-const levelsData = {
-  home: {
-    icon: '/docs/img/icons/menu/home',
-    name: 'Home',
-  },
-  gettingstarted: {
-    icon: '/docs/img/icons/menu/getting-started',
-    name: 'Getting Started',
-  },
-  database: {
-    icon: '/docs/img/icons/menu/database',
-    name: 'Database',
-  },
-  api: {
-    icon: '/docs/img/icons/menu/rest',
-    name: 'REST API',
-  },
-  graphql: {
-    icon: '/docs/img/icons/menu/graphql',
-    name: 'GraphQL',
-  },
-  auth: {
-    icon: '/docs/img/icons/menu/auth',
-    name: 'Auth',
-  },
-  functions: {
-    icon: '/docs/img/icons/menu/functions',
-    name: 'Edge Functions',
-  },
-  realtime: {
-    icon: '/docs/img/icons/menu/realtime',
-    name: 'Realtime',
-  },
-  analytics: {
-    icon: '/docs/img/icons/menu/analytics',
-    name: 'Analytics',
-  },
-  storage: {
-    icon: '/docs/img/icons/menu/storage',
-    name: 'Storage',
-  },
-  ai: {
-    icon: '/docs/img/icons/menu/ai',
-    name: 'AI & Vectors',
-  },
-  supabase_cli: {
-    icon: '/docs/img/icons/menu/reference-cli',
-    name: 'Supabase CLI',
-  },
-  platform: {
-    icon: '/docs/img/icons/menu/platform',
-    name: 'Platform',
-  },
-  resources: {
-    icon: '/docs/img/icons/menu/resources',
-    name: 'Resources',
-  },
-  self_hosting: {
-    icon: '/docs/img/icons/menu/self-hosting',
-    name: 'Self-Hosting',
-  },
-  integrations: {
-    icon: '/docs/img/icons/menu/integrations',
-    name: 'Integrations',
-  },
-  reference_javascript_v1: {
-    icon: '/docs/img/icons/menu/reference-javascript',
-    name: 'Javascript Reference v1.0',
-  },
-  reference_javascript_v2: {
-    icon: '/docs/img/icons/menu/reference-javascript',
-    name: 'Javascript Reference v2.0',
-  },
-  reference_dart_v1: {
-    icon: '/docs/img/icons/menu/reference-dart',
-    name: 'Dart Reference v1.0',
-  },
-  reference_dart_v2: {
-    icon: '/docs/img/icons/menu/reference-dart',
-    name: 'Dart Reference v2.0',
-  },
-  reference_csharp_v0: {
-    icon: '/docs/img/icons/menu/reference-csharp',
-    name: 'C# Reference v0.0',
-  },
-  reference_python_v2: {
-    icon: '/docs/img/icons/menu/reference-python',
-    name: 'Python Reference v2.0',
-  },
-  reference_swift_v1: {
-    icon: '/docs/img/icons/menu/reference-swift',
-    name: 'Swift Reference v1.0',
-  },
-  reference_swift_v2: {
-    icon: '/docs/img/icons/menu/reference-swift',
-    name: 'Swift Reference v2.0',
-  },
-  reference_kotlin_v1: {
-    icon: '/docs/img/icons/menu/reference-kotlin',
-    name: 'Kotlin Reference v1.0',
-  },
-  reference_kotlin_v2: {
-    icon: '/docs/img/icons/menu/reference-kotlin',
-    name: 'Kotlin Reference v2.0',
-  },
-  reference_cli: {
-    icon: '/docs/img/icons/menu/reference-cli',
-    name: 'CLI Reference',
-  },
-  reference_api: {
-    icon: '/docs/img/icons/menu/reference-api',
-    name: 'Management API Reference',
-  },
-  reference_self_hosting_auth: {
-    icon: '/docs/img/icons/menu/reference-auth',
-    name: 'Auth Server Reference',
-  },
-  reference_self_hosting_storage: {
-    icon: '/docs/img/icons/menu/reference-storage',
-    name: 'Storage Server Reference',
-  },
-  reference_self_hosting_realtime: {
-    icon: '/docs/img/icons/menu/reference-realtime',
-    name: 'Realtime Server Reference',
-  },
-  reference_self_hosting_analytics: {
-    icon: '/docs/img/icons/menu/reference-analytics',
-    name: 'Analytics Server Reference',
-  },
-  reference_self_hosting_functions: {
-    icon: '/docs/img/icons/menu/reference-functions',
-    name: 'Functions Server Reference',
-  },
-}
-
-const MobileHeader = memo(function MobileHeader() {
-  const mobileMenuOpen = useMenuMobileOpen()
-  const menuLevel = useMenuLevelId()
-
-  return (
-    <div
-      className={[
-        'transition-all ease-out z-10',
-        'top-0',
-        mobileMenuOpen && 'absolute',
-        'flex items-center h-[40px]',
-        mobileMenuOpen ? 'gap-0' : 'gap-3',
-      ].join(' ')}
-    >
-      <button
-        className={['mr-2', mobileMenuOpen && 'mt-0.5'].join(' ')}
-        onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
-      >
-        <div
-          className={[
-            'space-y-1 group cursor-pointer relative',
-            mobileMenuOpen ? 'w-4 h-4' : 'w-4 h-[8px]',
-          ].join(' ')}
-        >
-          <span
-            className={[
-              'transition-all ease-out block w-4 h-px bg-foreground-muted group-hover:bg-foreground',
-              !mobileMenuOpen ? 'w-4' : 'absolute rotate-45 top-[6px]',
-            ].join(' ')}
-          ></span>
-          <span
-            className={[
-              'transition-all ease-out block h-px bg-foreground-muted group-hover:bg-foreground',
-              !mobileMenuOpen ? 'w-3 group-hover:w-4' : 'absolute w-4 -rotate-45 top-[2px]',
-            ].join(' ')}
-          ></span>
-        </div>
-      </button>
-      <div className={[].join(' ')}>
-        <img
-          src={menuLevel ? levelsData[menuLevel].icon + '.svg' : levelsData['home'].icon + '.svg'}
-          className={[
-            'transition-all duration-200',
-            mobileMenuOpen ? 'invisible w-0 h-0' : 'w-4 h-4',
-          ].join(' ')}
-        />
-      </div>
-      <span
-        className={[
-          'transition-all duration-200',
-          'text-foreground',
-          mobileMenuOpen ? 'text-xs' : 'text-sm',
-        ].join(' ')}
-      >
-        {mobileMenuOpen
-          ? 'Close'
-          : menuLevel
-            ? levelsData[menuLevel].name
-            : levelsData['home'].name}
-      </span>
-    </div>
-  )
-})
-
-const MobileMenuBackdrop = memo(function MobileMenuBackdrop() {
-  const mobileMenuOpen = useMenuMobileOpen()
-
-  useEffect(() => {
-    window.addEventListener('resize', (e: UIEvent) => {
-      const w = e.target as Window
-      if (mobileMenuOpen && w.innerWidth >= 1024) {
-        menuState.setMenuMobileOpen(!mobileMenuOpen)
-      }
-    })
-    return () => {
-      window.removeEventListener('resize', () => {})
-    }
-  }, [mobileMenuOpen])
-
-  return (
-    <div
-      className={[
-        'h-full',
-        'left-0',
-        'right-0',
-        'z-10',
-        'backdrop-blur-sm backdrop-filter bg-alternative/90',
-        mobileMenuOpen ? 'absolute h-full w-full top-0 left-0' : 'hidden h-0',
-        // always hide on desktop
-        'lg:hidden',
-      ].join(' ')}
-      onClick={() => menuState.setMenuMobileOpen(!mobileMenuOpen)}
-    ></div>
-  )
-})
-
-const HeaderLogo = memo(function HeaderLogo() {
-  const { resolvedTheme } = useTheme()
-  return (
-    <Link href="/" className="px-10 flex items-center gap-2">
-      <Image
-        className="cursor-pointer"
-        src={
-          resolvedTheme?.includes('dark') ? '/docs/supabase-dark.svg' : '/docs/supabase-light.svg'
-        }
-        width={96}
-        height={24}
-        alt="Supabase Logo"
-      />
-      <span className="font-mono text-sm font-medium text-brand-link">DOCS</span>
-    </Link>
-  )
-})
-
-const Container = memo(function Container(props: PropsWithChildren) {
-  const mobileMenuOpen = useMenuMobileOpen()
-
-  return (
-    <div
-      // #docs-content-container is used by layout to scroll to top
-      id="docs-content-container"
-      className={[
-        // 'overflow-x-auto',
-        'w-full transition-all ease-out',
-        // 'absolute lg:relative',
-        mobileMenuOpen ? 'ml-[75%] sm:ml-[50%] md:ml-[33%] overflow-hidden' : 'overflow-auto',
-        // desktop override any margin styles
-        'lg:ml-0',
-      ].join(' ')}
-    >
-      <div className="flex flex-col relative">{props.children}</div>
-    </div>
-  )
-})
-
-const NavContainer = memo(function NavContainer() {
-  const mobileMenuOpen = useMenuMobileOpen()
-
-  return (
-    <nav
-      aria-labelledby="main-nav-title"
-      className={[
-        // 'hidden',
-        'absolute lg:relative',
-        mobileMenuOpen ? 'w-[75%] sm:w-[50%] md:w-[33%] left-0' : 'w-0 -left-[280px]',
-        'lg:w-[420px] !lg:left-0',
-        // desktop override any left styles
-        'lg:left-0',
-        'transition-all',
-        'top-0',
-        'flex flex-col ml-0',
-      ].join(' ')}
-    >
-      <div
-        className={[
-          'top-0',
-          'relative',
-          'w-auto',
-          'border-r overflow-auto h-screen',
-          'backdrop-blur backdrop-filter bg-background',
-          'flex flex-col',
-        ].join(' ')}
-      >
-        <h1 id="main-nav-title" className="sr-only">
-          Main menu
-        </h1>
-        <div className="top-0 sticky z-10">
-          <div>
-            <div>
-              <div
-                className={[
-                  'hidden lg:flex lg:height-auto',
-                  'pt-8 bg-background flex-col gap-8',
-                ].join(' ')}
-              >
-                <HeaderLogo />
-              </div>
-              <div className="h-4 bg-background w-full"></div>
-              <div className="bg-gradient-to-b from-background to-transparent h-4 w-full"></div>
-            </div>
-          </div>
-        </div>
-        <div
-          className={[
-            'transition-all ease-out duration-200',
-            'absolute left-0 right-0 h-screen',
-            'px-5 pl-5 py-16',
-            'top-[0px]',
-            'bg-background',
-            // desktop styles
-            'lg:relative lg:top-0 lg:left-0 lg:pb-10 lg:px-10 lg:pt-0 lg:flex',
-            'lg:opacity-100 lg:visible',
-          ].join(' ')}
-        >
-          <NavigationMenu />
-        </div>
-      </div>
-    </nav>
-  )
-})
+import { PropsWithChildren } from 'react'
 
 const SiteLayout = ({ children }: PropsWithChildren<{}>) => {
   return (
@@ -351,32 +7,7 @@ const SiteLayout = ({ children }: PropsWithChildren<{}>) => {
       <Head>
         <title>Supabase Docs</title>
       </Head>
-      <main className="grow overflow-hidden">
-        <div className="flex flex-row h-full">
-          <NavContainer />
-          <Container>
-            <div className={['lg:sticky top-0 z-10 overflow-hidden'].join(' ')}>
-              <TopNavBar />
-            </div>
-            <div
-              className={[
-                'sticky transition-all top-0',
-                'z-10',
-                'backdrop-blur backdrop-filter bg-background',
-              ].join(' ')}
-            >
-              <div className={['lg:hidden', 'px-5 ', 'border-b z-10'].join(' ')}>
-                <MobileHeader />
-              </div>
-            </div>
-            <div className="grow">
-              {children}
-              <Footer />
-            </div>
-            <MobileMenuBackdrop />
-          </Container>
-        </div>
-      </main>
+      <main className="grow overflow-hidden">{children}</main>
     </>
   )
 }

apps/docs/layouts/guides/index.tsx

@@ -10,8 +10,10 @@ import components from '~/components'
 import { highlightSelectedTocItem } from '~/components/CustomHTMLElements/CustomHTMLElements.utils'
 import { FooterHelpCalloutType } from '~/components/FooterHelpCallout'
 import GuidesTableOfContents from '~/components/GuidesTableOfContents'
+import { type MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import useHash from '~/hooks/useHash'
 import { LayoutMainContent } from '../DefaultLayout'
+import { MainSkeleton } from '../MainSkeleton'
 
 interface Props {
   meta: {
@@ -30,6 +32,7 @@ interface Props {
   toc?: any
   currentPage?: string
   hideToc?: boolean
+  menuId: MenuId
 }
 
 const Layout: FC<Props> = (props) => {
@@ -42,6 +45,8 @@ const Layout: FC<Props> = (props) => {
   const { asPath } = useRouter()
   const router = useRouter()
 
+  const menuId = props.menuId
+
   const EDIT_BUTTON_EXCLUDE_LIST = ['/404']
 
   useEffect(() => {
@@ -108,77 +113,79 @@ const Layout: FC<Props> = (props) => {
           },
         }}
       />
-      <LayoutMainContent className="pb-0">
-        <div className={['grid grid-cols-12 relative gap-4'].join(' ')}>
-          <div
-            className={[
-              'relative',
-              !props.hideToc ? 'col-span-12 md:col-span-9' : 'col-span-12',
-              'transition-all ease-out',
-              'duration-100',
-            ].join(' ')}
-          >
-            {props.meta?.breadcrumb && (
-              <p className="text-brand tracking-wider mb-3">{props.meta.breadcrumb}</p>
-            )}
-            <article
-              ref={articleRef}
-              className={`${
-                props.meta?.hide_table_of_contents || !hasTableOfContents ? '' : ''
-              } prose max-w-none`}
-            >
-              <h1 className="mb-0">{props.meta.title}</h1>
-              {props.meta?.subtitle && (
-                <h2 className="mt-3 text-xl text-foreground-light">{props.meta.subtitle}</h2>
-              )}
-              <div className="w-full border-b my-8"></div>
-              <MDXProvider components={components}>{props.children}</MDXProvider>
-
-              {EDIT_BUTTON_EXCLUDE_LIST.includes(router.route) ? (
-                <></>
-              ) : (
-                <div className="mt-16 not-prose">
-                  <div>
-                    <a
-                      href={`https://github.com/${
-                        props.editLink ||
-                        `supabase/supabase/edit/master/apps/docs/pages${router.asPath}.mdx`
-                      }
-                    `}
-                      className="text-sm transition flex items-center gap-1 text-scale-1000 hover:text-scale-1200 w-fit"
-                    >
-                      Edit this page on GitHub <IconExternalLink size={14} strokeWidth={1.5} />
-                    </a>
-                  </div>
-                </div>
-              )}
-            </article>
-          </div>
-          {!props.hideToc && hasTableOfContents && !props.meta?.hide_table_of_contents && (
+      <MainSkeleton menuId={menuId}>
+        <LayoutMainContent className="pb-0">
+          <div className={['grid grid-cols-12 relative gap-4'].join(' ')}>
             <div
               className={[
-                'col-span-3',
-                'border-overlay bg-background table-of-contents-height',
-                'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
+                'relative',
+                !props.hideToc ? 'col-span-12 md:col-span-9' : 'col-span-12',
                 'transition-all ease-out',
                 'duration-100',
               ].join(' ')}
             >
-              <div className="border-l">
-                {props.meta?.tocVideo && !!tocVideoPreview && (
-                  <div className="relative mb-6 pl-5">
-                    <ExpandableVideo imgUrl={tocVideoPreview} videoId={props.meta.tocVideo} />
+              {props.meta?.breadcrumb && (
+                <p className="text-brand tracking-wider mb-3">{props.meta.breadcrumb}</p>
+              )}
+              <article
+                ref={articleRef}
+                className={`${
+                  props.meta?.hide_table_of_contents || !hasTableOfContents ? '' : ''
+                } prose max-w-none`}
+              >
+                <h1 className="mb-0">{props.meta.title}</h1>
+                {props.meta?.subtitle && (
+                  <h2 className="mt-3 text-xl text-foreground-light">{props.meta.subtitle}</h2>
+                )}
+                <div className="w-full border-b my-8"></div>
+                <MDXProvider components={components}>{props.children}</MDXProvider>
+
+                {EDIT_BUTTON_EXCLUDE_LIST.includes(router.route) ? (
+                  <></>
+                ) : (
+                  <div className="mt-16 not-prose">
+                    <div>
+                      <a
+                        href={`https://github.com/${
+                          props.editLink ||
+                          `supabase/supabase/edit/master/apps/docs/pages${router.asPath}.mdx`
+                        }
+                    `}
+                        className="text-sm transition flex items-center gap-1 text-scale-1000 hover:text-scale-1200 w-fit"
+                      >
+                        Edit this page on GitHub <IconExternalLink size={14} strokeWidth={1.5} />
+                      </a>
+                    </div>
                   </div>
                 )}
-                <span className="block font-mono text-xs uppercase text-foreground px-5 mb-6">
-                  On this page
-                </span>
-                <GuidesTableOfContents list={tocList} />
-              </div>
+              </article>
             </div>
-          )}
-        </div>
-      </LayoutMainContent>
+            {!props.hideToc && hasTableOfContents && !props.meta?.hide_table_of_contents && (
+              <div
+                className={[
+                  'col-span-3',
+                  'border-overlay bg-background table-of-contents-height',
+                  'thin-scrollbar overflow-y-auto sticky hidden md:block md:col-span-3 px-2',
+                  'transition-all ease-out',
+                  'duration-100',
+                ].join(' ')}
+              >
+                <div className="border-l">
+                  {props.meta?.tocVideo && !!tocVideoPreview && (
+                    <div className="relative mb-6 pl-5">
+                      <ExpandableVideo imgUrl={tocVideoPreview} videoId={props.meta.tocVideo} />
+                    </div>
+                  )}
+                  <span className="block font-mono text-xs uppercase text-foreground px-5 mb-6">
+                    On this page
+                  </span>
+                  <GuidesTableOfContents list={tocList} />
+                </div>
+              </div>
+            )}
+          </div>
+        </LayoutMainContent>
+      </MainSkeleton>
     </>
   )
 }

apps/docs/pages/guides/ai/[[...slug]].tsx

@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function AiGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Ai}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )

apps/docs/pages/guides/ai/python/[slug].tsx

@@ -11,6 +11,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
 import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLinkTransform'
 import remarkMkDocsAdmonition from '~/lib/mdx/plugins/remarkAdmonition'
 import { removeTitle } from '~/lib/mdx/plugins/remarkRemoveTitle'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 // We fetch these docs at build time from an external repo
 const org = 'supabase'
@@ -61,7 +62,7 @@ interface PythonClientDocsProps {
 
 export default function PythonClientDocs({ source, meta }: PythonClientDocsProps) {
   return (
-    <Layout meta={meta}>
+    <Layout meta={meta} menuId={MenuId.Ai}>
       <MDXRemote {...source} components={components} />
     </Layout>
   )

apps/docs/pages/guides/api/[[...slug]].tsx

@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function ApiGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Api}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )

apps/docs/pages/guides/auth/[[...slug]].tsx

@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function AuthGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Auth}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )

apps/docs/pages/guides/cli/[[...slug]].tsx

@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function CliGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Cli}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )

apps/docs/pages/guides/cli/config.tsx

@@ -5,6 +5,8 @@ import GuidesTableOfContents from '~/components/GuidesTableOfContents'
 import { Heading } from '~/components/CustomHTMLElements'
 import Head from 'next/head'
 import { CodeBlock } from 'ui'
+import { MainSkeleton } from '~/layouts/MainSkeleton'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 // Parameters are grouped on the page by tag
 const tocList = []
@@ -29,24 +31,26 @@ export default function Config() {
       <Head>
         <title>Supabase CLI config</title>
       </Head>
-      <div className="grid grid-cols-12 relative gap-4 px-5 max-w-7xl mx-auto py-16">
-        <div className="relative col-span-12 md:col-span-9 transition-all ease-out duration-100">
-          <div className="w-full prose">
-            <h1>CLI configuration</h1>
-            <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-300 to-brand my-8"></div>
-            <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
-            <div>{content}</div>
+      <MainSkeleton menuId={MenuId.Cli}>
+        <div className="grid grid-cols-12 relative gap-4 px-5 max-w-7xl mx-auto py-16">
+          <div className="relative col-span-12 md:col-span-9 transition-all ease-out duration-100">
+            <div className="w-full prose">
+              <h1>CLI configuration</h1>
+              <div className="max-w-xs w-32 h-[1px] bg-gradient-to-r from-brand-300 to-brand my-8"></div>
+              <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
+              <div>{content}</div>
+            </div>
+          </div>
+          <div className="md:col-span-3">
+            <div className="sticky overflow-auto max-h-[calc(100vh-60px-5rem)] pb-3 top-32 border-l">
+              <span className="block font-mono text-xs uppercase text-foreground pl-5 mb-4">
+                On this page
+              </span>
+              <GuidesTableOfContents list={tocList} />
+            </div>
           </div>
         </div>
-        <div className="md:col-span-3">
-          <div className="sticky overflow-auto max-h-[calc(100vh-60px-5rem)] pb-3 top-32 border-l">
-            <span className="block font-mono text-xs uppercase text-foreground pl-5 mb-4">
-              On this page
-            </span>
-            <GuidesTableOfContents list={tocList} />
-          </div>
-        </div>
-      </div>
+      </MainSkeleton>
     </>
   )
 }

apps/docs/pages/guides/cli/github-action/[slug].tsx

@@ -12,6 +12,7 @@ import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLin
 import remarkMkDocsAdmonition from '~/lib/mdx/plugins/remarkAdmonition'
 import { removeTitle } from '~/lib/mdx/plugins/remarkRemoveTitle'
 import remarkPyMdownTabs from '~/lib/mdx/plugins/remarkTabs'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 // We fetch these docs at build time from an external repo
 const org = 'supabase'
@@ -62,7 +63,7 @@ interface ActionDocsProps {
 
 export default function ActionDocs({ source, meta }: ActionDocsProps) {
   return (
-    <Layout meta={meta}>
+    <Layout meta={meta} menuId={MenuId.Cli}>
       <MDXRemote {...source} components={components} />
     </Layout>
   )

apps/docs/pages/guides/database/[[...slug]].tsx

@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -31,7 +32,7 @@ export default function DatabaseGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Database}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )

apps/docs/pages/guides/database/extensions/wrappers/[[...slug]].tsx

@@ -10,6 +10,7 @@ import remarkGfm from 'remark-gfm'
 import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLinkTransform'
@@ -83,7 +84,7 @@ export default function WrappersDocs({
   editLink,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
-    <Layout meta={meta} editLink={editLink}>
+    <Layout meta={meta} editLink={editLink} menuId={MenuId.Database}>
       <MDXRemote {...source} components={components} />
     </Layout>
   )

apps/docs/pages/guides/functions/[[...slug]].tsx

@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function FunctionsGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Functions}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )

apps/docs/pages/guides/getting-started/[[...slug]].tsx

@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function GettingStartedGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.GettingStarted}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )

apps/docs/pages/guides/graphql/[[...slug]].tsx

@@ -5,14 +5,17 @@ import { serialize } from 'next-mdx-remote/serialize'
 import { isAbsolute, relative } from 'path'
 import rehypeSlug from 'rehype-slug'
 import remarkGfm from 'remark-gfm'
-import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
+
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLinkTransform'
 import remarkMkDocsAdmonition from '~/lib/mdx/plugins/remarkAdmonition'
 import { removeTitle } from '~/lib/mdx/plugins/remarkRemoveTitle'
 import remarkPyMdownTabs from '~/lib/mdx/plugins/remarkTabs'
 
+import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
+
 // We fetch these docs at build time from an external repo
 const org = 'supabase'
 const repo = 'pg_graphql'
@@ -114,7 +117,7 @@ interface PGGraphQLDocsProps {
 
 export default function PGGraphQLDocs({ source, meta }: PGGraphQLDocsProps) {
   return (
-    <Layout meta={meta}>
+    <Layout meta={meta} menuId={MenuId.Graphql}>
       <MDXRemote {...source} components={components} />
     </Layout>
   )

apps/docs/pages/guides/platform/[[...slug]].tsx

@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function PlatformGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Platform}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )

apps/docs/pages/guides/realtime/[[...slug]].tsx

@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function RealtimeGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Realtime}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )

apps/docs/pages/guides/resources/[[...slug]].tsx

@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function ResourcesGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Resources}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )

apps/docs/pages/guides/self-hosting/[[...slug]].tsx

@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function SelfHostingGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.SelfHosting}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )

apps/docs/pages/guides/self-hosting/analytics/config.tsx

@@ -3,6 +3,7 @@ import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Param from '~/components/Params'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getAnalyticsConfigV0 } from '~/lib/mdx/getConfig'
@@ -27,6 +28,7 @@ export const Page = (props: InferGetStaticPropsType<typeof getStaticProps>) => (
   <Layout
     meta={meta}
     editLink="/supabase/supabase/blob/master/apps/docs/pages/guides/self-hosting/analytics/config.tsx"
+    menuId={MenuId.SelfHosting}
   >
     <MDXRemote {...props.descriptionSource} components={components} />
 

apps/docs/pages/guides/self-hosting/auth/config.tsx

@@ -3,6 +3,7 @@ import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Param from '~/components/Params'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getAuthConfigV1 } from '~/lib/mdx/getConfig'
@@ -27,6 +28,7 @@ export const Page = (props: InferGetStaticPropsType<typeof getStaticProps>) => (
   <Layout
     meta={meta}
     editLink="/supabase/supabase/blob/master/apps/docs/pages/guides/self-hosting/analytics/config.tsx"
+    menuId={MenuId.SelfHosting}
   >
     <MDXRemote {...props.descriptionSource} components={components} />
 

apps/docs/pages/guides/self-hosting/realtime/config.tsx

@@ -3,6 +3,7 @@ import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Param from '~/components/Params'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getRealtimeConfigV0 } from '~/lib/mdx/getConfig'
@@ -27,6 +28,7 @@ export const Page = (props: InferGetStaticPropsType<typeof getStaticProps>) => (
   <Layout
     meta={meta}
     editLink="/supabase/supabase/blob/master/apps/docs/pages/guides/self-hosting/analytics/config.tsx"
+    menuId={MenuId.SelfHosting}
   >
     <MDXRemote {...props.descriptionSource} components={components} />
 

apps/docs/pages/guides/self-hosting/storage/config.tsx

@@ -3,6 +3,7 @@ import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Param from '~/components/Params'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getStorageConfigV0 } from '~/lib/mdx/getConfig'
@@ -27,6 +28,7 @@ export const Page = (props: InferGetStaticPropsType<typeof getStaticProps>) => (
   <Layout
     meta={meta}
     editLink="/supabase/supabase/blob/master/apps/docs/pages/guides/self-hosting/analytics/config.tsx"
+    menuId={MenuId.SelfHosting}
   >
     <MDXRemote {...props.descriptionSource} components={components} />
 

apps/docs/pages/guides/storage/[[...slug]].tsx

@@ -2,6 +2,7 @@ import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType
 import { MDXRemote } from 'next-mdx-remote'
 
 import components from '~/components'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import Layout from '~/layouts/DefaultGuideLayout'
 import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
 
@@ -21,7 +22,7 @@ export default function StorageGuide({
   const { hideToc, ...meta } = frontmatter
 
   return (
-    <Layout meta={meta} hideToc={hideToc} editLink={editLink}>
+    <Layout meta={meta} hideToc={hideToc} editLink={editLink} menuId={MenuId.Storage}>
       <MDXRemote {...mdxSource} components={components} />
     </Layout>
   )

apps/docs/pages/handbook/contributing.mdx

@@ -1,32 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'contributing',
-  title: 'Contributing',
-  description: 'Want to help?',
-}
-
-## How to contribute
-
-Supabase has many [open source repos](https://github.com/orgs/supabase/repositories). Some of the more popular ones are:
-
-- [Supabase](https://github.com/supabase/supabase) - Our Dashboard, Websites, and example apps
-- [Supabase-js](https://github.com/supabase/supabase-js) - A client-side library written in TypeScript
-- [Gotrue](https://github.com/supabase/gotrue) - Our auth server, written in Go
-- [Realtime](https://github.com/supabase/realtime) - A server for streaming changes from Postgres, written in Elixir
-- [browse all](https://github.com/orgs/supabase/repositories)
-
-Want to contribute? Why not jump into our GitHub repo and:
-
-- [Sponsor Supabase](https://github.com/sponsors/supabase).
-- [Answer Discussions](https://github.com/supabase/supabase/discussions).
-- Submit an issue to one of our [repos](https://github.com/orgs/supabase/repositories)
-- Report a performance issue or a part of the documentation that you find confusing.
-- Create a pull request in one of our [repos](https://github.com/orgs/supabase/repositories)
-- [Translate our Readme](https://github.com/supabase/supabase/issues/1341).
-- Try our products and give feedback.
-- Spread the word if you like what we are doing.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/pages/handbook/introduction.mdx

@@ -1,21 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
-  id: 'introduction',
-  title: 'Supabase Handbook',
-  description: 'The Supabase public handbook and manifesto',
-}
-
-Supabase is thinking in public. Everything is online, no matter how raw the current state of things.
-
-This is our public handbook and manifesto. We are completely opensource and this means that you, our users, are also our team members.
-
----
-
-## Opensource
-
-Wherever we can we will support existing opensource tools and libraries.
-
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
-
-export default Page

apps/docs/pages/reference/analytics/[...slug].tsx

@@ -1,168 +0,0 @@
-import specFile from '~/spec/transforms/analytics_v0_openapi_deparsed.json' assert { type: 'json' }
-import { gen_v3, enrichedOperation } from '~/lib/refGenerator/helpers'
-import { Tabs, CodeBlock } from 'ui'
-
-import RefSubLayout from '~/layouts/ref/RefSubLayout'
-
-export type AcceptedValue = {
-  id: string
-  name: string
-  type: 'string' | 'boolean' | 'object'
-  description?: string
-}
-
-export type Flag = {
-  id: string
-  name: string
-  description: string
-  default_value: string
-  accepted_values: AcceptedValue[]
-}
-
-export type ApiParameter = {
-  example: string
-  in: string
-  name: string
-  required: boolean
-  schema: {
-    type: string
-    example: string
-  }
-}
-// @ts-ignore
-const generatedSpec = gen_v3(specFile, 'wat', { apiUrl: 'apiv0' })
-
-export default function Config() {
-  return (
-    <RefSubLayout>
-      <div className="flex my-16">
-        <div className="w-full">
-          <div className="grid gap-16">
-            <h1 className="text-4xl uppercase">{generatedSpec.info.title}</h1>
-            <p>{generatedSpec.info.description}</p>
-          </div>
-
-          <div className="grid gap-32 mx-auto max-w-5xl mt-24">
-            {generatedSpec.operations.map((operation: any) => (
-              <div className="border-b pb-8">
-                <RefSubLayout.Section
-                  slug={operation.id}
-                  title={operation.summary}
-                  id={operation.operationId}
-                  monoFont={false}
-                >
-                  <RefSubLayout.Details>
-                    <div className="mt-4">
-                      <code className="text-md flex gap-4 text-md text-foreground-lighter break-all">
-                        <span className="uppercase whitespace-nowrap	">{operation.operation}</span>
-                        {operation.fullPath}
-                      </code>
-                    </div>
-                    {/* Path Parameters */}
-                    {operation.parameters &&
-                      operation.parameters.filter((parameter) => parameter.in === 'path').length >
-                        0 && (
-                        <div className="mt-12">
-                          <h2 className="border-b pb-2 text-xl">Path parameters</h2>
-                          <ul className="mt-4">
-                            {operation.parameters &&
-                              operation.parameters
-                                .filter((parameter: any) => parameter.in === 'path')
-                                .map((parameter: any) => (
-                                  <li className="mt-8 border-b pb-6">
-                                    <div>
-                                      <div className="flex gap-4 items-center">
-                                        <span className="font-bold">{parameter.name}</span>
-                                        <div className="font-mono text-xs break-all">
-                                          {parameter.required && (
-                                            <div className="text-[10px] border border-amber-700 bg-amber-300 text-amber-900 px-2 tracking-wide font-mono py-0.25 rounded-full">
-                                              REQUIRED
-                                            </div>
-                                          )}
-                                        </div>
-                                      </div>
-                                      <p className="mt-4">{parameter.description}</p>
-                                    </div>
-                                    {parameter.example && (
-                                      <div className="mt-4 flex gap-4 items-center">
-                                        <span>Example:</span>
-                                        <span className="font-mono text-xs break-all">
-                                          {parameter.example}
-                                        </span>
-                                      </div>
-                                    )}
-                                  </li>
-                                ))}
-                          </ul>
-                        </div>
-                      )}
-
-                    {/* Header Parameters */}
-                    {operation.parameters &&
-                      operation.parameters.filter((parameter) => parameter.in === 'header').length >
-                        0 && (
-                        <div className="mt-12">
-                          <h2 className="border-b pb-2 text-xl">Header parameters</h2>
-                          <ul className="mt-4">
-                            {operation.parameters &&
-                              operation.parameters
-                                .filter((parameter: any) => parameter.in === 'header')
-                                .map((parameter: any) => (
-                                  <li className="mt-8 border-b pb-6">
-                                    <div className="flex gap-4 items-center">
-                                      <span className="font-bold">{parameter.name}</span>
-                                      <span className="font-mono text-xs break-all">
-                                        {parameter.required && 'required'}
-                                      </span>
-                                    </div>
-                                    <div className="mt-4 flex gap-4 items-center">
-                                      <span>Example:</span>
-                                      <span className="font-mono text-xs break-all">
-                                        {parameter.example}
-                                      </span>
-                                    </div>
-                                  </li>
-                                ))}
-                          </ul>
-                        </div>
-                      )}
-                  </RefSubLayout.Details>
-                  <RefSubLayout.Examples>
-                    {operation.responseList.length > 0 && (
-                      <>
-                        <h2 className="text-xl">Responses</h2>
-                        <Tabs
-                          scrollable
-                          size="small"
-                          type="underlined"
-                          defaultActiveId={
-                            operation.responseList[0].responseCode ??
-                            operation.responseList[0].responseCode
-                          }
-                          queryGroup="response-status"
-                        >
-                          {operation.responseList.map((response: any) => (
-                            <Tabs.Panel id={response.responseCode} label={response.responseCode}>
-                              <p>{response.description}</p>
-                              {response?.content && response?.content['application/json'] && (
-                                <div className="mt-8">
-                                  <CodeBlock language="bash" className="relative">
-                                    {JSON.stringify(response.content['application/json'], null, 2)}
-                                  </CodeBlock>
-                                </div>
-                              )}
-                            </Tabs.Panel>
-                          ))}
-                        </Tabs>
-                      </>
-                    )}
-                  </RefSubLayout.Examples>
-                </RefSubLayout.Section>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </RefSubLayout>
-  )
-}

apps/docs/pages/reference/analytics/config.tsx

@@ -1,114 +0,0 @@
-import fs from 'fs'
-import matter from 'gray-matter'
-import components from '~/components/index'
-import { MDXRemote } from 'next-mdx-remote'
-import { serialize } from 'next-mdx-remote/serialize'
-
-import specFile from '~/spec/analytics_v0_config.yaml' assert { type: 'yml' }
-import { Parameter } from '~/lib/refGenerator/refTypes'
-
-import ReactMarkdown from 'react-markdown'
-
-// Parameters are grouped on the page by tag
-const TAGS = ['general', 'database']
-
-export default function Config(props) {
-  return (
-    <div>
-      <div className="flex my-16">
-        <div className="w-full prose">
-          <h1 className="text-4xl mb-16">{specFile.info.title} Configuration</h1>
-          <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
-          <div>
-            <div>
-              {props.docs
-                .filter((doc) => doc.introPage)
-                .map((item) => (
-                  <MDXRemote {...item.content} components={components} />
-                ))}
-            </div>
-            {TAGS.map((tag) =>
-              specFile.parameters
-                .filter((param: Parameter) => param.tags[0] === tag)
-                .map((parameter: Parameter, index) => (
-                  <div>
-                    {index === 0 && <h2 className="text-xl capitalize">{tag} Settings</h2>}
-                    <div className="mt-8">
-                      <div>
-                        <h2 className="text-xl font-medium text-foreground font-mono">
-                          <span className="mr-2">$</span>
-                          {parameter.title}
-                        </h2>
-                        <div className="grid" id={parameter.id}>
-                          <div className="border-b pb-8" key={parameter.id}>
-                            <div className=" mb-16">
-                              <p className="mb-4 scroll-mt-16 mt-0 text-foreground-light text-base">
-                                <ReactMarkdown>{parameter.description}</ReactMarkdown>
-                              </p>
-                              <div className="grid gap-2">
-                                <div className="flex gap-2">
-                                  Required: <code>{parameter.required.toString()}</code>
-                                </div>
-                                <div className="flex gap-2">
-                                  Default:
-                                  <code>
-                                    {parameter.default ? parameter.default.toString() : 'None'}
-                                  </code>
-                                </div>
-                              </div>
-                            </div>
-                            {parameter.links &&
-                              parameter.links.map((link) => (
-                                <div>
-                                  <h3>See also:</h3>
-                                  <li>
-                                    <a href={link.link}>{link.name}</a>
-                                  </li>
-                                </div>
-                              ))}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                ))
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-export async function getServerSideProps() {
-  // an array of ids of the intro sections for this library
-  const introPages = ['analytics']
-
-  const pages = [...introPages]
-
-  // Grab custom markdown intro page files
-  const allMarkdownDocs = await Promise.all(
-    pages.map(async (x: any, i) => {
-      const pathName = `docs/ref/analytics/${x}.mdx`
-
-      const markdownExists = fs.existsSync(pathName)
-
-      const fileContents = markdownExists ? fs.readFileSync(pathName, 'utf8') : ''
-      const { data, content } = matter(fileContents)
-
-      return {
-        id: x,
-        title: x,
-        // ...content,
-        meta: data,
-        introPage: introPages.includes(x),
-        content: content ? await serialize(content || '') : null,
-      }
-    })
-  )
-
-  return {
-    props: {
-      docs: allMarkdownDocs,
-    },
-  }
-}

apps/docs/pages/reference/api/[...slug].tsx

@@ -1,18 +1,28 @@
-import apiCommonSections from '~/spec/common-api-sections.json' assert { type: 'json' }
-import specFile from '~/spec/transforms/api_v0_openapi_deparsed.json' assert { type: 'json' }
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
+import apiCommonSections from '~/spec/common-api-sections.json' assert { type: 'json' }
+import specFile from '~/spec/transforms/api_v0_openapi_deparsed.json' assert { type: 'json' }
+
 // @ts-ignore
 const generatedSpec = gen_v3(specFile, 'wat', { apiUrl: 'apiv0' })
 const sections = flattenSections(apiCommonSections)
 const libraryPath = '/api'
 
 export default function Config(props) {
-  return <RefSectionHandler sections={sections} spec={generatedSpec} pageProps={props} type="api" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefApi}
+      sections={sections}
+      spec={generatedSpec}
+      pageProps={props}
+      type="api"
+    />
+  )
 }
 
 export async function getStaticProps() {

apps/docs/pages/reference/auth/[...slug].tsx

@@ -1,168 +0,0 @@
-import { CodeBlock, Tabs } from 'ui'
-import specFile from '~/spec/transforms/auth_v1_openapi_deparsed.json' assert { type: 'json' }
-import { gen_v3 } from '~/lib/refGenerator/helpers'
-
-import RefSubLayout from '~/layouts/ref/RefSubLayout'
-
-export type AcceptedValue = {
-  id: string
-  name: string
-  type: 'string' | 'boolean' | 'object'
-  description?: string
-}
-
-export type Flag = {
-  id: string
-  name: string
-  description: string
-  default_value: string
-  accepted_values: AcceptedValue[]
-}
-
-export type ApiParameter = {
-  example: string
-  in: string
-  name: string
-  required: boolean
-  schema: {
-    type: string
-    example: string
-  }
-}
-// @ts-ignore
-const generatedSpec = gen_v3(specFile, 'wat', { apiUrl: 'apiv0' })
-
-export default function Config() {
-  return (
-    <RefSubLayout>
-      <div className="flex my-16">
-        <div className="w-full">
-          <div className="grid gap-16">
-            <h1 className="text-4xl uppercase">{generatedSpec.info.title}</h1>
-            <p>{generatedSpec.info.description}</p>
-          </div>
-
-          <div className="grid gap-32 mx-auto max-w-5xl mt-24">
-            {generatedSpec.operations.map((operation: any) => (
-              <div className="border-b pb-8">
-                <RefSubLayout.Section
-                  slug={operation.id}
-                  title={operation.summary}
-                  id={operation.operationId}
-                  monoFont={false}
-                >
-                  <RefSubLayout.Details>
-                    <div className="mt-4">
-                      <code className="text-md flex gap-4 text-md text-foreground-lighter break-all">
-                        <span className="uppercase whitespace-nowrap	">{operation.operation}</span>
-                        {operation.fullPath}
-                      </code>
-                    </div>
-                    {/* Path Parameters */}
-                    {operation.parameters &&
-                      operation.parameters.filter((parameter) => parameter.in === 'path').length >
-                        0 && (
-                        <div className="mt-12">
-                          <h2 className="border-b pb-2 text-xl">Path parameters</h2>
-                          <ul className="mt-4">
-                            {operation.parameters &&
-                              operation.parameters
-                                .filter((parameter: any) => parameter.in === 'path')
-                                .map((parameter: any) => (
-                                  <li className="mt-8 border-b pb-6">
-                                    <div>
-                                      <div className="flex gap-4 items-center">
-                                        <span className="font-bold">{parameter.name}</span>
-                                        <div className="font-mono text-xs break-all">
-                                          {parameter.required && (
-                                            <div className="text-[10px] border border-amber-700 bg-amber-300 text-amber-900 px-2 tracking-wide font-mono py-0.25 rounded-full">
-                                              REQUIRED
-                                            </div>
-                                          )}
-                                        </div>
-                                      </div>
-                                      <p className="mt-4">{parameter.description}</p>
-                                    </div>
-                                    {parameter.example && (
-                                      <div className="mt-4 flex gap-4 items-center">
-                                        <span>Example:</span>
-                                        <span className="font-mono text-xs break-all">
-                                          {parameter.example}
-                                        </span>
-                                      </div>
-                                    )}
-                                  </li>
-                                ))}
-                          </ul>
-                        </div>
-                      )}
-
-                    {/* Header Parameters */}
-                    {operation.parameters &&
-                      operation.parameters.filter((parameter) => parameter.in === 'header').length >
-                        0 && (
-                        <div className="mt-12">
-                          <h2 className="border-b pb-2 text-xl">Header parameters</h2>
-                          <ul className="mt-4">
-                            {operation.parameters &&
-                              operation.parameters
-                                .filter((parameter: any) => parameter.in === 'header')
-                                .map((parameter: any) => (
-                                  <li className="mt-8 border-b pb-6">
-                                    <div className="flex gap-4 items-center">
-                                      <span className="font-bold">{parameter.name}</span>
-                                      <span className="font-mono text-xs break-all">
-                                        {parameter.required && 'required'}
-                                      </span>
-                                    </div>
-                                    <div className="mt-4 flex gap-4 items-center">
-                                      <span>Example:</span>
-                                      <span className="font-mono text-xs break-all">
-                                        {parameter.example}
-                                      </span>
-                                    </div>
-                                  </li>
-                                ))}
-                          </ul>
-                        </div>
-                      )}
-                  </RefSubLayout.Details>
-                  <RefSubLayout.Examples>
-                    {operation.responseList.length > 0 && (
-                      <>
-                        <h2 className="text-xl">Responses</h2>
-                        <Tabs
-                          scrollable
-                          size="small"
-                          type="underlined"
-                          defaultActiveId={
-                            operation.responseList[0].responseCode ??
-                            operation.responseList[0].responseCode
-                          }
-                          queryGroup="response-status"
-                        >
-                          {operation.responseList.map((response: any) => (
-                            <Tabs.Panel id={response.responseCode} label={response.responseCode}>
-                              <p>{response.description}</p>
-                              {response?.content && response?.content['application/json'] && (
-                                <div className="mt-8">
-                                  <CodeBlock language="bash" className="relative">
-                                    {JSON.stringify(response.content['application/json'], null, 2)}
-                                  </CodeBlock>
-                                </div>
-                              )}
-                            </Tabs.Panel>
-                          ))}
-                        </Tabs>
-                      </>
-                    )}
-                  </RefSubLayout.Examples>
-                </RefSubLayout.Section>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </RefSubLayout>
-  )
-}

apps/docs/pages/reference/auth/config.tsx

@@ -1,73 +0,0 @@
-import specFile from '~/spec/gotrue_v1_config.yaml' assert { type: 'yml' }
-import { Parameter } from '~/lib/refGenerator/refTypes'
-import ReactMarkdown from 'react-markdown'
-import Head from 'next/head'
-
-// Parameters are grouped on the page by tag
-const TAGS = ['general']
-
-export default function Config() {
-  return (
-    <>
-      <Head>
-        <title>Auth config</title>
-      </Head>
-      <div>
-        <div className="flex my-16">
-          <div className="w-full prose">
-            <h1 className="text-4xl mb-16">{specFile.info.title} Configuration</h1>
-            <ReactMarkdown>{specFile.info.description}</ReactMarkdown>
-            <div>
-              {TAGS.map((tag) =>
-                specFile.parameters
-                  .filter((param: Parameter) => param.tags[0] === tag)
-                  .map((parameter: Parameter, index) => (
-                    <div>
-                      {index === 0 && <h2 className="text-xl capitalize">{tag}</h2>}
-                      <div className="mt-8">
-                        <div>
-                          <h2 className="text-xl font-medium text-foreground font-mono">
-                            <span className="mr-2">$</span>
-                            {parameter.title}
-                          </h2>
-                          <div className="grid" id={parameter.id}>
-                            <div className="border-b pb-8" key={parameter.id}>
-                              <div className=" mb-16">
-                                <p className="mb-4 scroll-mt-16 mt-0 text-foreground-light text-base">
-                                  <ReactMarkdown>{parameter.description}</ReactMarkdown>
-                                </p>
-                                <div className="grid gap-2">
-                                  <div className="flex gap-2">
-                                    Required: <code>{parameter.required.toString()}</code>
-                                  </div>
-                                  <div className="flex gap-2">
-                                    Default:
-                                    <code>
-                                      {parameter.default ? parameter.default.toString() : 'None'}
-                                    </code>
-                                  </div>
-                                </div>
-                              </div>
-                              {parameter.links &&
-                                parameter.links.map((link) => (
-                                  <div>
-                                    <h3>See also:</h3>
-                                    <li>
-                                      <a href={link.link}>{link.name}</a>
-                                    </li>
-                                  </div>
-                                ))}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  ))
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

apps/docs/pages/reference/cli/[...slug].tsx

@@ -1,17 +1,25 @@
-import spec from '~/spec/cli_v1_commands.yaml' assert { type: 'yml' }
-
-import { flattenSections } from '~/lib/helpers'
-
-import cliCommonSections from '~/spec/common-cli-sections.json' assert { type: 'json' }
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
+import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
+import spec from '~/spec/cli_v1_commands.yaml' assert { type: 'yml' }
+import cliCommonSections from '~/spec/common-cli-sections.json' assert { type: 'json' }
+
 const sections = flattenSections(cliCommonSections)
 const libraryPath = '/cli'
 
 export default function CliRef(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="cli" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefCli}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="cli"
+    />
+  )
 }
 
 export async function getStaticProps() {

apps/docs/pages/reference/csharp/[...slug].tsx

@@ -4,12 +4,21 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/csharp'
 
 export default function CSharpReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefCSharpV0}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="client-lib"
+    />
+  )
 }
 
 export async function getStaticProps() {

apps/docs/pages/reference/csharp/crawlers/[...slug].tsx

@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/csharp'
@@ -25,6 +26,7 @@ export default function CSharpReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefCSharpV0}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}

apps/docs/pages/reference/csharp/v0/[...slug].tsx

@@ -4,12 +4,21 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/csharp/v0'
 
 export default function CSharpReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefCSharpV0}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="client-lib"
+    />
+  )
 }
 
 export async function getStaticProps() {

apps/docs/pages/reference/csharp/v0/crawlers/[...slug].tsx

@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/csharp/v0'
@@ -24,6 +25,7 @@ export default function JSReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefCSharpV0}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}

apps/docs/pages/reference/dart/[...slug].tsx

@@ -4,12 +4,21 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/dart'
 
 export default function DartReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefDartV2}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="client-lib"
+    />
+  )
 }
 
 export async function getStaticProps() {

apps/docs/pages/reference/dart/crawlers/[...slug].tsx

@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/dart'
@@ -25,6 +26,7 @@ export default function DartReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefDartV2}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}

apps/docs/pages/reference/dart/v1/[...slug].tsx

@@ -4,6 +4,7 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/dart/v0'
@@ -11,6 +12,7 @@ const libraryPath = '/dart/v0'
 export default function JSReference(props) {
   return (
     <RefSectionHandler
+      menuId={MenuId.RefDartV1}
       sections={sections}
       spec={spec}
       pageProps={props}

apps/docs/pages/reference/dart/v1/crawlers/[...slug].tsx

@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/dart/v0'
@@ -24,6 +25,7 @@ export default function DartReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefDartV1}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}

apps/docs/pages/reference/javascript/[...slug].tsx

@@ -1,17 +1,20 @@
-import clientLibsCommonSections from '~/spec/common-client-libs-sections.json'
-import typeSpec from '~/spec/enrichments/tsdoc_v2/combined.json'
-import spec from '~/spec/supabase_js_v2.yml' assert { type: 'yml' }
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
+import clientLibsCommonSections from '~/spec/common-client-libs-sections.json' assert { type: 'json' }
+import typeSpec from '~/spec/enrichments/tsdoc_v2/combined.json' assert { type: 'json' }
+import spec from '~/spec/supabase_js_v2.yml' assert { type: 'yml' }
+
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/javascript'
 
 export default function JSReference(props) {
   return (
     <RefSectionHandler
+      menuId={MenuId.RefJavaScriptV2}
       sections={sections}
       spec={spec}
       typeSpec={typeSpec}

apps/docs/pages/reference/javascript/crawlers/[...slug].tsx

@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/javascript'
@@ -25,6 +26,7 @@ export default function JSReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefJavaScriptV2}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}

apps/docs/pages/reference/javascript/v1/[...slug].tsx

@@ -1,17 +1,20 @@
-import clientLibsCommonSections from '~/spec/common-client-libs-sections.json'
-import typeSpec from '~/spec/enrichments/tsdoc_v1/combined.json'
-import spec from '~/spec/supabase_js_v1.yml' assert { type: 'yml' }
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
+import clientLibsCommonSections from '~/spec/common-client-libs-sections.json' assert { type: 'json' }
+import typeSpec from '~/spec/enrichments/tsdoc_v1/combined.json' assert { type: 'json' }
+import spec from '~/spec/supabase_js_v1.yml' assert { type: 'yml' }
+
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/javascript/v1'
 
 export default function JSReference(props) {
   return (
     <RefSectionHandler
+      menuId={MenuId.RefJavaScriptV1}
       sections={sections}
       spec={spec}
       typeSpec={typeSpec}

apps/docs/pages/reference/javascript/v1/crawlers/[...slug].tsx

@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/javascript/v1'
@@ -25,6 +26,7 @@ export default function JSReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefJavaScriptV1}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}

apps/docs/pages/reference/kotlin/[...slug].tsx

@@ -4,12 +4,21 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/kotlin'
 
 export default function KotlinReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefKotlinV2}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="client-lib"
+    />
+  )
 }
 
 export async function getStaticProps() {

apps/docs/pages/reference/kotlin/crawlers/[...slug].tsx

@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/kotlin'
@@ -25,6 +26,7 @@ export default function KotlinReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefKotlinV2}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}

apps/docs/pages/reference/kotlin/v1/[...slug].tsx

@@ -4,6 +4,7 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/kotlin/v1'
@@ -11,6 +12,7 @@ const libraryPath = '/kotlin/v1'
 export default function KotlinReference(props) {
   return (
     <RefSectionHandler
+      menuId={MenuId.RefKotlinV1}
       sections={sections}
       spec={spec}
       pageProps={props}

apps/docs/pages/reference/kotlin/v1/crawlers/[...slug].tsx

@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/kotlin/v1'
@@ -24,6 +25,7 @@ export default function KotlinReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefKotlinV1}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}

apps/docs/pages/reference/python/[...slug].tsx

@@ -5,6 +5,7 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/python'
@@ -12,6 +13,7 @@ const libraryPath = '/python'
 export default function PyReference(props) {
   return (
     <RefSectionHandler
+      menuId={MenuId.RefPythonV2}
       sections={sections}
       spec={spec}
       typeSpec={typeSpec}

apps/docs/pages/reference/python/crawlers/[...slug].tsx

@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/python'
@@ -25,6 +26,7 @@ export default function PyReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefPythonV2}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}

apps/docs/pages/reference/self-hosting-analytics/[...slug].tsx

@@ -1,11 +1,13 @@
-import analyticsSpec from '~/spec/transforms/analytics_v0_openapi_deparsed.json' assert { type: 'json' }
-import selfHostingAnalyticsCommonSections from '~/spec/common-self-hosting-analytics-sections.json'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
+import selfHostingAnalyticsCommonSections from '~/spec/common-self-hosting-analytics-sections.json' assert { type: 'json' }
+import analyticsSpec from '~/spec/transforms/analytics_v0_openapi_deparsed.json' assert { type: 'json' }
+
 const sections = flattenSections(selfHostingAnalyticsCommonSections)
 const libraryPath = '/self-hosting-analytics'
 
@@ -13,7 +15,15 @@ const libraryPath = '/self-hosting-analytics'
 const spec = gen_v3(analyticsSpec, 'wat', { apiUrl: 'apiv0' })
 
 export default function SelfHostAnalyticsReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="api" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.SelfHostingAnalytics}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="api"
+    />
+  )
 }
 
 export async function getStaticProps() {

apps/docs/pages/reference/self-hosting-auth/[...slug].tsx

@@ -1,11 +1,13 @@
-import authSpec from '~/spec/auth_v1_openapi.json' assert { type: 'json' }
-import selfHostingAuthCommonSections from '~/spec/common-self-hosting-auth-sections.json'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
+import authSpec from '~/spec/auth_v1_openapi.json' assert { type: 'json' }
+import selfHostingAuthCommonSections from '~/spec/common-self-hosting-auth-sections.json'
+
 const sections = flattenSections(selfHostingAuthCommonSections)
 const libraryPath = '/self-hosting-auth'
 
@@ -13,7 +15,15 @@ const libraryPath = '/self-hosting-auth'
 const spec = gen_v3(authSpec, 'wat', { apiUrl: 'apiv0' })
 
 export default function SelfHostAuthReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="api" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.SelfHostingAuth}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="api"
+    />
+  )
 }
 
 export async function getStaticProps() {

apps/docs/pages/reference/self-hosting-functions/[...slug].tsx

@@ -1,16 +1,23 @@
-import selfHostingFunctionsCommonSections from '~/spec/common-self-hosting-functions-sections.json'
-
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
-import { gen_v3 } from '~/lib/refGenerator/helpers'
+
+import selfHostingFunctionsCommonSections from '~/spec/common-self-hosting-functions-sections.json' assert { type: 'json' }
 
 const sections = flattenSections(selfHostingFunctionsCommonSections)
 const libraryPath = '/self-hosting-functions'
 
 export default function SelfHostFunctionsReference(props) {
-  return <RefSectionHandler sections={sections} pageProps={props} type="api" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.SelfHostingFunctions}
+      sections={sections}
+      pageProps={props}
+      type="api"
+    />
+  )
 }
 
 export async function getStaticProps() {

apps/docs/pages/reference/self-hosting-realtime/[...slug].tsx

@@ -1,15 +1,23 @@
-import selfHostingRealtimeCommonSections from '~/spec/common-self-hosting-realtime-sections.json'
-
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 
+import selfHostingRealtimeCommonSections from '~/spec/common-self-hosting-realtime-sections.json' assert { type: 'json' }
+
 const sections = flattenSections(selfHostingRealtimeCommonSections)
 const libraryPath = '/self-hosting-realtime'
 
 export default function SelfHostRealtimeReference(props) {
-  return <RefSectionHandler sections={sections} pageProps={props} type="api" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.SelfHostingRealtime}
+      sections={sections}
+      pageProps={props}
+      type="api"
+    />
+  )
 }
 
 export async function getStaticProps() {

apps/docs/pages/reference/self-hosting-storage/[...slug].tsx

@@ -1,11 +1,13 @@
-import storageSpec from '~/spec/storage_v0_openapi.json' assert { type: 'json' }
-import selfHostingStorageCommonSections from '~/spec/common-self-hosting-storage-sections.json'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { gen_v3 } from '~/lib/refGenerator/helpers'
 
+import storageSpec from '~/spec/storage_v0_openapi.json' assert { type: 'json' }
+import selfHostingStorageCommonSections from '~/spec/common-self-hosting-storage-sections.json' assert { type: 'json' }
+
 const sections = flattenSections(selfHostingStorageCommonSections)
 const libraryPath = '/self-hosting-storage'
 
@@ -13,7 +15,15 @@ const libraryPath = '/self-hosting-storage'
 const spec = gen_v3(storageSpec, 'wat', { apiUrl: 'apiv0' })
 
 export default function SelfHostStorageReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="api" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.SelfHostingStorage}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="api"
+    />
+  )
 }
 
 export async function getStaticProps() {

apps/docs/pages/reference/swift/[...slug].tsx

@@ -4,12 +4,21 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/swift'
 
 export default function SwiftReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefSwiftV2}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="client-lib"
+    />
+  )
 }
 
 export async function getStaticProps() {

apps/docs/pages/reference/swift/crawlers/[...slug].tsx

@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/swift'
@@ -25,6 +26,7 @@ export default function SwiftReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefSwiftV2}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}

apps/docs/pages/reference/swift/v1/[...slug].tsx

@@ -4,12 +4,21 @@ import RefSectionHandler from '~/components/reference/RefSectionHandler'
 import { flattenSections } from '~/lib/helpers'
 import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/swift/v2'
 
 export default function SwiftReference(props) {
-  return <RefSectionHandler sections={sections} spec={spec} pageProps={props} type="client-lib" />
+  return (
+    <RefSectionHandler
+      menuId={MenuId.RefSwiftV1}
+      sections={sections}
+      spec={spec}
+      pageProps={props}
+      type="client-lib"
+    />
+  )
 }
 
 export async function getStaticProps() {

apps/docs/pages/reference/swift/v1/crawlers/[...slug].tsx

@@ -7,6 +7,7 @@ import handleRefGetStaticPaths from '~/lib/mdx/handleRefStaticPaths'
 import handleRefStaticProps from '~/lib/mdx/handleRefStaticProps'
 import { useRouter } from 'next/router'
 import RefSEO from '~/components/reference/RefSEO'
+import { MenuId } from '~/components/Navigation/NavigationMenu/NavigationMenu'
 
 const sections = flattenSections(clientLibsCommonSections)
 const libraryPath = '/swift/v2'
@@ -24,6 +25,7 @@ export default function SwiftReference(props) {
       <RefSEO title={pageTitle} />
 
       <RefSectionHandler
+        menuId={MenuId.RefSwiftV1}
         sections={filteredSection}
         spec={spec}
         typeSpec={typeSpec}