add new ref nav bars

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts

@@ -510,7 +510,7 @@ export const reference_javascript = {
 export const reference_cli = {
   icon: '/img/icons/cli-icon.svg',
   title: 'Supabase CLI',
-  parent: '/reference',
+  parent: '/',
   items: [
     {
       name: 'Getting Started',
@@ -561,3 +561,71 @@ export const reference_cli = {
 //   'reference/auth': AuthServerNav,
 //   'reference/storage': StorageServerNav,
 // ]
+
+export const references = [
+  {
+    label: 'Client libraries',
+    items: [
+      {
+        label: 'supabase-js',
+        versions: ['v2', 'v1'],
+        description: 'something about the reference',
+        icon: '/docs/img/icons/javascript-icon.svg',
+        url: '/new/reference/javascript/start',
+      },
+      {
+        label: 'supabase-py',
+        description: 'something about the reference',
+        icon: '/docs/img/icons/python-icon.svg',
+        url: '/new/reference/python/start',
+      },
+      {
+        label: 'supabase-dart',
+        versions: ['v1', 'v0'],
+        description: 'something about the reference',
+        icon: '/docs/img/icons/dart-icon.svg',
+        url: '/new/reference/dart/start',
+      },
+    ],
+  },
+  {
+    label: 'Platform Tools',
+    items: [
+      {
+        label: 'CLI',
+        description: 'something about the reference',
+        icon: '/docs/img/icons/cli-icon.svg',
+        url: '/new/reference/cli/start',
+      },
+      {
+        label: 'Management API',
+        description: 'something about the reference',
+        icon: '/docs/img/icons/api-icon.svg',
+        url: '/new/reference/management-api/start',
+      },
+    ],
+  },
+  {
+    label: 'Self Hosting',
+    items: [
+      {
+        label: 'Auth server',
+        description: 'something about the reference',
+        icon: '/docs/img/icons/menu/auth.svg',
+        url: '/reference/auth/start',
+      },
+      {
+        label: 'Storage server',
+        description: 'something about the reference',
+        icon: '/docs/img/icons/menu/storage.svg',
+        url: '/reference/storage/start',
+      },
+      {
+        label: 'Realtime server',
+        description: 'something about the reference',
+        icon: '/docs/img/icons/menu/realtime.svg',
+        url: '/reference/realtime/start',
+      },
+    ],
+  },
+]

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

@@ -142,6 +142,56 @@ const SideNav = () => {
         level: 'platform',
       },
     ],
+    [
+      {
+        label: 'Javascript Client',
+        icon: 'api.svg',
+        href: '/new/reference/javascript/start',
+        level: 'reference_javascript',
+      },
+      {
+        label: 'supabase-py',
+        icon: 'api.svg',
+        href: '/new/reference/javascript/start',
+        level: 'reference_javascript',
+      },
+      {
+        label: 'supabase-dart',
+        icon: 'api.svg',
+        href: '/new/reference/javascript/start',
+        level: 'reference_javascript',
+      },
+      {
+        label: 'Mangement API',
+        icon: 'api.svg',
+        href: '/new/reference/javascript/start',
+        level: 'reference_javascript',
+      },
+      {
+        label: 'CLI',
+        icon: 'api.svg',
+        href: '/new/reference/cli/start',
+        level: 'reference_javascript',
+      },
+      {
+        label: 'Auth server',
+        icon: 'api.svg',
+        href: '/new/reference/javascript/start',
+        level: 'reference_javascript',
+      },
+      {
+        label: 'Storage server',
+        icon: 'api.svg',
+        href: '/new/reference/javascript/start',
+        level: 'reference_javascript',
+      },
+      {
+        label: 'Realtime server',
+        icon: 'api.svg',
+        href: '/new/reference/javascript/start',
+        level: 'reference_javascript',
+      },
+    ],
   ]
 
   return (

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

@@ -125,7 +125,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
                 <IconChevronLeft size={10} strokeWidth={3} />
               </div>
             </div>
-            <span>Back to reference</span>
+            <span>Back to menu</span>
           </a>
         </Link>
         <div className="flex items-center gap-3 my-3">

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

@@ -1,11 +1,12 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { IconChevronLeft } from 'ui'
+import { IconChevronLeft, IconCommand, IconSearch } from 'ui'
 import * as NavItems from './NavigationMenu.constants'
 // @ts-expect-error
 import jsSpec from '~/../../spec/supabase_js_v2_temp_new_shape.yml' assert { type: 'yml' }
 // @ts-expect-error
 import clientLibsCommon from '~/../../spec/common-client-libs.yml' assert { type: 'yml' }
+import { SearchButton } from '~/components/DocSearch'
 
 const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => {
   const router = useRouter()
@@ -82,6 +83,7 @@ const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => {
       ].join(' ')}
     >
       <div className={'w-full flex flex-col gap-0 sticky top-8'}>
+        {/* {process.env.NEXT_PUBLIC_EXPERIMENTAL_REF !== 'true' && ( */}
         <Link href={`${menu.parent ?? '/'}`} passHref>
           <a
             className={[
@@ -97,17 +99,23 @@ const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => {
             <span>Back to reference</span>
           </a>
         </Link>
-        <div className="flex items-center gap-3 my-3">
-          <img
-            src={`${router.basePath}` + menu.icon ?? `/img/icons/menu/${id}.svg`}
-            className="w-5 rounded"
-          />
-
-          <h2 className={['text-scale-1200 ', !menu.title && 'capitalize'].join(' ')}>
-            {menu.title ?? currentLevel}
-          </h2>
-        </div>
-        <ul>
+        {/* )} */}
+        {process.env.NEXT_PUBLIC_EXPERIMENTAL_REF !== 'true' && (
+          <div className="flex items-center gap-3 my-3">
+            <img
+              src={`${router.basePath}` + menu.icon ?? `/img/icons/menu/${id}.svg`}
+              className="w-5 rounded"
+            />
+            <h2
+              className={['font-mono text-sm text-brand-1200 ', !menu.title && 'capitalize'].join(
+                ' '
+              )}
+            >
+              supabase-js
+            </h2>
+          </div>
+        )}
+        <ul className="">
           <Divider />
           <SideMenuTitle title="Database" />
 

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

@@ -0,0 +1,319 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { FC, useEffect, useState } from 'react'
+import {
+  Badge,
+  Button,
+  Dropdown,
+  IconCommand,
+  IconMenu,
+  IconMessageSquare,
+  IconMoon,
+  IconSearch,
+  IconSun,
+  Input,
+  Listbox,
+} from 'ui'
+import { SearchButton } from '~/components/DocSearch'
+import { REFERENCES } from '~/components/Navigation/Navigation.constants'
+import { useTheme } from '~/components/Providers'
+
+import { getPageType } from '~/lib/helpers'
+
+const TopNavBarRef: FC = () => {
+  const { isDarkMode, toggleTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  const { asPath, push } = useRouter()
+  const pathSegments = asPath.split('/')
+
+  const library = pathSegments.length >= 3 ? pathSegments[2] : undefined
+  const libraryMeta = REFERENCES?.[library] ?? undefined
+  const versions = libraryMeta?.versions ?? []
+
+  const version = versions.includes(pathSegments[pathSegments.indexOf(library) + 1])
+    ? pathSegments[pathSegments.indexOf(library) + 1]
+    : versions[0]
+
+  const pageType = getPageType(asPath)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [isDarkMode])
+
+  const pageLinks = [
+    { text: 'Guides', key: 'docs', link: '/' },
+    { text: 'Reference', key: 'reference', link: '/reference' },
+  ]
+
+  const toggleDarkMode = () => {
+    localStorage.setItem('supabaseDarkMode', (!isDarkMode).toString())
+    toggleTheme()
+
+    const key = localStorage.getItem('supabaseDarkMode')
+    document.documentElement.className = key === 'true' ? 'dark' : ''
+  }
+
+  const onSelectVersion = (version: string) => {
+    // [Joshen] Ideally we use <Link> but this works for now
+    if (!library) return
+    if (version === versions[0]) {
+      push(`/reference/${library}`)
+    } else {
+      push(`/reference/${library}/${version}`)
+    }
+  }
+
+  // [Joshen] Kaizen: Use UI library's SidePanel for this
+  const toggleMobileMenu = () => {
+    setMobileMenuOpen(!mobileMenuOpen)
+    const sidebar = document.querySelector('.sidebar-menu-container')
+    const contentPane = document.querySelector('.main-content-pane')
+
+    sidebar.classList.toggle('hidden')
+    contentPane.classList.toggle('hidden')
+  }
+
+  return (
+    <nav className="h-[60px] border-b backdrop-blur backdrop-filter bg-white-1200 dark:bg-blackA-300">
+      <div className="px-5 max-w-7xl mx-auto flex items-center h-full">
+        <div className="col-span-3 flex items-center">
+          <button className="mr-4 block stroke-2 lg:hidden" onClick={toggleMobileMenu}>
+            <IconMenu className="text-scale-1100" />
+          </button>
+          {versions.length > 0 && (
+            <div className="ml-8">
+              <Listbox
+                size="small"
+                defaultValue={version}
+                style={{ width: '70px' }}
+                onChange={onSelectVersion}
+              >
+                {versions.map((version) => (
+                  <Listbox.Option key={version} label={version} value={version}>
+                    {version}
+                  </Listbox.Option>
+                ))}
+              </Listbox>
+            </div>
+          )}
+        </div>
+        <div className="flex items-center gap-12">
+          <SearchButton className="w-96">
+            <div
+              className="
+              flex 
+              group
+              items-center 
+              justify-between 
+              bg-scaleA-200 
+              border 
+              transition
+              hover:border-scale-600
+              hover:bg-scaleA-300 
+              border-scale-500 pl-3 pr-1.5 w-full h-[32px] rounded"
+            >
+              <div className="flex items-center space-x-2">
+                <IconSearch className="text-scale-1100" size={18} strokeWidth={2} />
+                <p className="text-scale-1100 text-sm group-hover:text-scale-1200 transition">
+                  Search docs...
+                </p>
+              </div>
+              <div className="flex items-center space-x-1">
+                <div className="text-scale-1200 md:flex items-center justify-center h-5 w-10 border rounded bg-scale-500 border-scale-700 gap-1">
+                  <IconCommand size={12} strokeWidth={1.5} />
+                  <span className="text-[12px]">K</span>
+                </div>
+              </div>
+            </div>
+          </SearchButton>
+
+          {/* <div className="flex items-center -space-x-px">
+            <div className="w-64">
+              <div
+                className="
+              flex 
+              group
+              items-center 
+              justify-between 
+              bg-scaleA-200 
+              border 
+              transition
+              hover:border-scale-600
+              hover:bg-scaleA-300 
+              border-scale-500 pl-3 pr-1.5 w-full h-[32px] rounded
+              rounded-tr-none
+              rounded-br-none
+              font-mono
+              "
+              >
+                <div className="flex items-center space-x-2">
+                  <img src="/docs/img/icons/javascript-icon.svg" className="w-4 h-4" />
+                  <p className="text-scale-1200 text-sm group-hover:text-scale-1200 transition">
+                    supabase-js
+                  </p>
+                </div>
+              </div>
+            </div>
+            <Dropdown
+              size="small"
+              align="start"
+              side="bottom"
+              overlay={
+                <>
+                  <Dropdown.Label>Stable releases</Dropdown.Label>
+                  <Dropdown.Item>
+                    version 2.0
+                    <Dropdown.RightSlot>
+                      <Badge size="small">Latest</Badge>
+                    </Dropdown.RightSlot>
+                  </Dropdown.Item>
+                  <Dropdown.Item>Version 1.0 </Dropdown.Item>
+                  <Dropdown.Separator />
+                  <Dropdown.Label>Alpha releases</Dropdown.Label>
+                  <Dropdown.Misc>
+                    <p className="text-scale-900 text-xs">Currently no alpha releases</p>
+                  </Dropdown.Misc>
+                </>
+              }
+            >
+              <div className="w-32">
+                <div
+                  className="
+              flex 
+              group
+              items-center 
+              justify-between 
+              bg-scaleA-200 
+              border 
+              transition
+              hover:border-scale-600
+              hover:bg-scaleA-300 
+              border-scale-500 pl-3 pr-1.5 w-full h-[32px] rounded
+              font-mono
+
+              rounded-tl-none
+              rounded-bl-none
+              "
+                >
+                  <div className="flex items-center space-x-2">
+                    <p className="text-scale-900 text-xs group-hover:text-scale-1200 transition">
+                      version
+                    </p>
+                    <p className="text-scale-1200 text-sm group-hover:text-scale-1200 transition">
+                      2.0
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </Dropdown>
+          </div> */}
+
+          <Dropdown
+            size="small"
+            align="start"
+            side="bottom"
+            overlay={
+              <>
+                <Dropdown.Label>Stable releases</Dropdown.Label>
+                <Dropdown.Item>
+                  version 2.0
+                  <Dropdown.RightSlot>
+                    <Badge size="small">Latest</Badge>
+                  </Dropdown.RightSlot>
+                </Dropdown.Item>
+                <Dropdown.Item>Version 1.0 </Dropdown.Item>
+                <Dropdown.Separator />
+                <Dropdown.Label>Alpha releases</Dropdown.Label>
+                <Dropdown.Misc>
+                  <p className="text-scale-900 text-xs">Currently no alpha releases</p>
+                </Dropdown.Misc>
+              </>
+            }
+          >
+            <div className="w-96">
+              <div
+                className="
+              flex 
+              gap-3
+              group
+              items-center 
+              bg-scaleA-200 
+              border 
+              transition
+              hover:border-scale-600
+              hover:bg-scaleA-300 
+              border-scale-500 pl-3 pr-1.5 w-full h-[32px] rounded
+              font-mono
+              "
+              >
+                <div className="flex items-center space-x-2">
+                  <p className="text-scale-900 text-xs group-hover:text-scale-1200 transition">
+                    Project
+                  </p>
+                  <div className="flex flex-row text-left gap-3">
+                    <p className="text-scale-1200 text-sm group-hover:text-scale-1200 transition">
+                      Meme.Town
+                    </p>
+                  </div>
+                </div>
+                <div className="text-left">
+                  <p className="text-scale-1100 text-[10px] group-hover:text-scale-1200 transition">
+                    ref: an9q3p23dn32pdnc2n
+                  </p>
+                </div>
+              </div>
+            </div>
+          </Dropdown>
+        </div>
+        <div className="grow flex items-center justify-end gap-3">
+          <Button
+            type="text"
+            as="a"
+            // @ts-ignore
+            href="https://app.supabase.com"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            Docs
+          </Button>
+          <Button type="text" icon={<IconMessageSquare />}>
+            Feedback
+          </Button>
+          <Button
+            type="text"
+            as="a"
+            // @ts-ignore
+            href="https://app.supabase.com"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            Dashboard
+          </Button>
+          <ul className="flex items-center">
+            <li className="px-4">
+              <div className="cursor-pointer" onClick={toggleDarkMode}>
+                {isDarkMode ? (
+                  <IconMoon
+                    size={16}
+                    strokeWidth={1}
+                    className="text-scale-1100 hover:text-scale-1200 transition"
+                  />
+                ) : (
+                  <IconSun
+                    size={16}
+                    strokeWidth={1}
+                    className="text-scale-1100 hover:text-scale-1200 transition"
+                  />
+                )}
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+  )
+}
+export default TopNavBarRef

apps/docs/components/Navigation/RefSwitcher.tsx

@@ -0,0 +1,174 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { Badge, Dropdown, GlassPanel, IconChevronDown, IconChevronRight, Popover } from 'ui'
+
+import { references } from './NavigationMenu/NavigationMenu.constants'
+
+const RefSwitcher = () => {
+  const router = useRouter()
+  const [currentRef, setCurrentRef] = useState()
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    setOpen(false)
+  }, [router.pathname])
+
+  return (
+    <div className="px-10 flex items-center -space-x-px">
+      <Popover
+        size="content"
+        open={open}
+        onOpenChange={() => setOpen(!open)}
+        overlay={
+          <>
+            {references.map((section) => {
+              return (
+                <>
+                  <div className="w-full px-5 py-1 border-b border-scale-400 bg-whiteA-200">
+                    <span className="text-xs font-mono uppercase tracking-wider font-medium text-scale-1000">
+                      {section.label}
+                    </span>
+                  </div>
+                  <div className="px-5 py-8 grid grid-cols-12 gap-8">
+                    {section.items.map((item) => {
+                      return (
+                        <Link href={item.url}>
+                          <a
+                            className="flex gap-3 col-span-4 group relative cursor-pointer items-start min-w-[180px]"
+                            onClick={() => setOpen(!open)}
+                          >
+                            <div className="flex justify-between gap-3">
+                              <img
+                                src={item.icon}
+                                className="
+                    mt-1 w-5 h-5 rounded
+                    transition-all
+                    ease-out
+                    opacity-80 group-hover:opacity-100
+                    scale-95 group-hover:scale-100
+                  "
+                              />
+                              <div className="flex flex-col">
+                                <div className="transition text-base text-scale-1100 group-hover:text-scale-1200 flex items-center">
+                                  <span>{item.label}</span>
+                                  <div className="relative h-4 w-4">
+                                    <div
+                                      className="
+                            absolute
+                            top-0.5
+                            transition-all
+                            ease-out
+                            opacity-0 group-hover:opacity-100
+                            scale-95 group-hover:scale-100
+                            left-0 group-hover:left-1
+                            "
+                                    >
+                                      <IconChevronRight strokeWidth={1.5} size={14} />
+                                    </div>
+                                  </div>
+                                </div>
+                                <span className="text-xs text-scale-1000">{item.description}</span>
+                              </div>
+                            </div>
+                          </a>
+                        </Link>
+                      )
+                    })}
+                  </div>
+                </>
+              )
+            })}
+          </>
+        }
+      >
+        <div
+          className="
+              flex 
+              group
+              items-center 
+              justify-between 
+              bg-scaleA-200 
+              border 
+              transition
+              hover:border-scale-600
+              hover:bg-scaleA-300 
+              border-scale-500 pl-3 pr-1.5 w-full h-[32px] rounded
+              rounded-tr-none
+              rounded-br-none
+              
+              "
+        >
+          <div className="flex items-center justify-between w-full min-w-[128px]">
+            <div className="flex items-center space-x-2">
+              <img
+                src="/docs/img/icons/javascript-icon.svg"
+                className="w-4 h-4 rounded drop-shadow-sm"
+              />
+              <p className="text-scale-1200 text-sm group-hover:text-scale-1200 transition">
+                supabase-js
+              </p>
+            </div>
+            <div className="text-scale-900">
+              <IconChevronDown size={14} strokeWidth={1.5} />
+            </div>
+          </div>
+        </div>
+      </Popover>
+      <Dropdown size="small" align="start" side="bottom" overlay={<VersionOverlay />}>
+        <div className="w-20">
+          <div
+            className="
+              flex 
+              group
+              items-center 
+              justify-between 
+              bg-scaleA-200 
+              border 
+              transition
+              hover:border-scale-600
+              hover:bg-scaleA-300 
+              border-scale-500 pl-3 pr-1.5 w-full h-[32px] rounded
+              
+
+              rounded-tl-none
+              rounded-bl-none
+              "
+          >
+            <div className="flex items-center justify-between w-full">
+              <div className="flex items-center space-x-2">
+                <p className="font-mono text-scale-1200 text-xs group-hover:text-scale-1200 transition">
+                  v2.0
+                </p>
+              </div>
+              <div className="text-scale-900">
+                <IconChevronDown size={14} strokeWidth={1.5} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </Dropdown>
+    </div>
+  )
+}
+
+const VersionOverlay = () => {
+  return (
+    <>
+      <Dropdown.Label>Stable releases</Dropdown.Label>
+      <Dropdown.Item>
+        version 2.0
+        <Dropdown.RightSlot>
+          <Badge size="small">Latest</Badge>
+        </Dropdown.RightSlot>
+      </Dropdown.Item>
+      <Dropdown.Item>Version 1.0 </Dropdown.Item>
+      <Dropdown.Separator />
+      <Dropdown.Label>Alpha releases</Dropdown.Label>
+      <Dropdown.Misc>
+        <p className="text-scale-900 text-xs">Currently no alpha releases</p>
+      </Dropdown.Misc>
+    </>
+  )
+}
+export default RefSwitcher

apps/docs/layouts/SiteLayout.tsx

@@ -4,8 +4,9 @@ import { useRouter } from 'next/router'
 import Footer from '~/components/Footer'
 import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import TopNavBar from '~/components/Navigation/NavigationMenu/TopNavBar'
+import SiteRefLayout from './SiteRefLayout'
 
-const Layout = ({ children }) => {
+const Layout = (props) => {
   const router = useRouter()
 
   useEffect(() => {
@@ -19,7 +20,13 @@ const Layout = ({ children }) => {
   }, [])
 
   if (process.env.NEXT_PUBLIC_NEW_DOCS !== 'true') {
-    return <>{children}</>
+    return <>{props.children}</>
+  }
+
+  return SiteRefLayout(props)
+
+  if (process.env.NEXT_PUBLIC_EXPERIMENTAL_REF && router.asPath.includes('/reference/')) {
+    return SiteRefLayout(props)
   }
 
   return (
@@ -37,7 +44,7 @@ const Layout = ({ children }) => {
             <NavigationMenu />
           </div>
           <div className="col-span-9">
-            {children}
+            {props.children}
             <hr className="border-scale-400  mt-32"></hr>
             <div className="flex flex-row gap-3 mt-6">
               <span className="text-xs text-scale-900">Supabase 2022</span>

apps/docs/layouts/SiteRefLayout.tsx

@@ -0,0 +1,81 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMenu'
+import TopNavBarRef from '~/components/Navigation/NavigationMenu/TopNavBarRef'
+import { useTheme } from '~/components/Providers'
+
+import RefSwitcher from '~/components/Navigation/RefSwitcher'
+
+const SiteRefLayout = ({ children }) => {
+  const router = useRouter()
+  const { isDarkMode } = useTheme()
+
+  return (
+    <>
+      <main>
+        {/* <img
+          src={`${router.basePath}/img/gradient-bg.png`}
+          className="absolute left-0 w-[520px] top-0 -z-1 pointer-events-none"
+        /> */}
+
+        <div className="flex flex-row h-screen">
+          <div
+            className="
+                border-r overflow-auto h-screen min-w-[320px]
+                backdrop-blur backdrop-filter bg-white-1200 dark:bg-blackA-300
+                flex flex-col
+            "
+          >
+            <div className="top-0 sticky z-10">
+              <div className="pt-8 bg-scale-200 flex flex-col gap-8">
+                <Link href="/">
+                  <a className="px-10 flex items-center gap-2">
+                    <Image
+                      className="cursor-pointer"
+                      src={isDarkMode ? '/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-900">DOCS</span>
+                  </a>
+                </Link>
+                {router.asPath.includes('/new/reference/') && <RefSwitcher />}
+              </div>
+              <div className="h-4 bg-scale-200 w-full"></div>
+              <div className="bg-gradient-to-b from-scale-200 to-transparent h-4 w-full"></div>
+            </div>
+            <div className="pb-10 px-10">
+              <NavigationMenu />
+            </div>
+          </div>
+          <div className="w-full h-screen overflow-auto">
+            <div className="flex flex-col">
+              {/* <NavigationMenu /> */}
+
+              <div className="sticky top-0 z-10">
+                <TopNavBarRef />
+              </div>
+              <div className="grow px-5 max-w-7xl mx-auto">
+                {children}
+                <hr className="border-scale-400  mt-32"></hr>
+                <div className="flex flex-row gap-3 mt-6">
+                  <span className="text-xs text-scale-900">Supabase 2022</span>
+                  <span className="text-xs text-scale-900">—</span>
+                  <a className="text-xs text-scale-800">Contributing</a>
+                  <a className="text-xs text-scale-800">Author Styleguide</a>
+                  <a className="text-xs text-scale-800">Changelog</a>
+                  <a className="text-xs text-scale-800">Opensource</a>
+                  <a className="text-xs text-scale-800">Supasquad</a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}
+
+export default SiteRefLayout

apps/docs/layouts/ref/RefSubLayout.tsx

@@ -18,7 +18,14 @@ const RefSubLayout: FC<RefSubLayoutType> & RefSubLayoutSubComponents = (props) =
   return (
     <div className="flex my-16">
       <div className="w-full">
-        <div className="flex flex-col gap-32 mx-auto max-w-5xl">{props.children}</div>
+        <div
+          className={[
+            'flex flex-col mx-auto',
+            process.env.NEXT_PUBLIC_EXPERIMENTAL_REF === 'true' ? 'max-w-7xl' : 'max-w-5xl',
+          ].join(' ')}
+        >
+          {props.children}
+        </div>
       </div>
     </div>
   )
@@ -26,7 +33,7 @@ const RefSubLayout: FC<RefSubLayoutType> & RefSubLayoutSubComponents = (props) =
 
 const Section: FC<ISectionContainer> = (props) => {
   return (
-    <article key={props.id} id={props.id}>
+    <article key={props.id} id={props.id} className="py-16">
       <header className="not-prose mb-12">
         <h2
           className={['text-xl font-medium text-scale-1200', props.monoFont && 'font-mono'].join(

packages/ui/package.json

@@ -32,8 +32,6 @@
     "tailwindcss-radix": "^1.6.0"
   },
   "devDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
     "typescript": "4.3.4"