From 17c11d2bfb1704791316cf1019da2ef74a85cefd Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 13 Dec 2022 04:48:08 +0800
Subject: [PATCH] add some things back in

---
 .../NavigationMenu/NavigationMenu.tsx         | 167 +++++++++---------
 .../NavigationMenu/TopNavBarRef.tsx           |  21 ++-
 apps/docs/layouts/guides/index.tsx            |   8 +-
 apps/docs/pages/_app.tsx                      |  64 +++----
 4 files changed, 138 insertions(+), 122 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index 3c24db52efa..3f370838df0 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -44,8 +44,6 @@ function generateAllowedClientLibKeys(sections, spec) {
     return func.id
   })
 
-  console.log('final', final)
-
   return final
 }
 
@@ -73,6 +71,8 @@ const SideNav = () => {
   const router = useRouter()
   const { isDarkMode } = useTheme()
 
+  // const level = useMenuLevelId()
+
   console.log()
 
   let version = ''
@@ -85,84 +85,84 @@ const SideNav = () => {
     version = '_v0'
   }
 
-  // function handleRouteChange(url: string) {
-  //   switch (url) {
-  //     case `/docs`:
-  //       menuState.setMenuLevelId('home')
-  //       break
-  //     case url.includes(`/docs/guides/getting-started`) && url:
-  //       menuState.setMenuLevelId('gettingstarted')
-  //       break
-  //     case url.includes(`/docs/guides/database`) && url:
-  //       menuState.setMenuLevelId('database')
-  //       break
-  //     case url.includes(`/docs/guides/auth`) && url:
-  //       menuState.setMenuLevelId('auth')
-  //       break
-  //     case url.includes(`/docs/guides/functions`) && url:
-  //       menuState.setMenuLevelId('functions')
-  //       break
-  //     case url.includes(`/docs/guides/realtime`) && url:
-  //       menuState.setMenuLevelId('realtime')
-  //       break
-  //     case url.includes(`/docs/guides/storage`) && url:
-  //       menuState.setMenuLevelId('storage')
-  //       break
-  //     case url.includes(`/docs/guides/platform`) ||
-  //       (url.includes(`/docs/guides/hosting/platform`) && url):
-  //       menuState.setMenuLevelId('platform')
-  //       break
-  //     case url.includes(`/docs/guides/resources`) && url:
-  //       menuState.setMenuLevelId('resources')
-  //       break
-  //     case url.includes(`/docs/guides/integrations`) && url:
-  //       menuState.setMenuLevelId('integrations')
-  //       break
-  //     // JS v1
-  //     case url.includes(`/docs/reference/javascript/v1`) && url:
-  //       menuState.setMenuLevelId('reference_javascript_v1')
-  //       break
-  //     // JS v2 (latest)
-  //     case url.includes(`/docs/reference/javascript`) && url:
-  //       menuState.setMenuLevelId('reference_javascript_v2')
-  //       break
-  //     // dart v0
-  //     case url.includes(`/docs/reference/dart/v0`) && url:
-  //       menuState.setMenuLevelId('reference_dart_v0')
-  //       break
-  //     // dart v1 (latest)
-  //     case url.includes(`/docs/reference/dart`) && url:
-  //       menuState.setMenuLevelId('reference_dart_v1')
-  //       break
-  //     case url.includes(`/docs/reference/cli`) && url:
-  //       menuState.setMenuLevelId('reference_cli')
-  //       break
-  //     case url.includes(`/docs/reference/api`) && url:
-  //       menuState.setMenuLevelId('reference_api')
-  //       break
-  //     case url.includes(`/docs/reference/self-hosting-auth`) && url:
-  //       menuState.setMenuLevelId('reference_self_hosting_auth')
-  //       break
-  //     case url.includes(`/docs/reference/self-hosting-storage`) && url:
-  //       menuState.setMenuLevelId('reference_self_hosting_storage')
-  //       break
-  //     case url.includes(`/docs/reference/self-hosting-realtime`) && url:
-  //       menuState.setMenuLevelId('reference_self_hosting_realtime')
-  //       break
+  function handleRouteChange(url: string) {
+    switch (url) {
+      case `/docs`:
+        menuState.setMenuLevelId('home')
+        break
+      case url.includes(`/docs/guides/getting-started`) && url:
+        menuState.setMenuLevelId('gettingstarted')
+        break
+      case url.includes(`/docs/guides/database`) && url:
+        menuState.setMenuLevelId('database')
+        break
+      case url.includes(`/docs/guides/auth`) && url:
+        menuState.setMenuLevelId('auth')
+        break
+      case url.includes(`/docs/guides/functions`) && url:
+        menuState.setMenuLevelId('functions')
+        break
+      case url.includes(`/docs/guides/realtime`) && url:
+        menuState.setMenuLevelId('realtime')
+        break
+      case url.includes(`/docs/guides/storage`) && url:
+        menuState.setMenuLevelId('storage')
+        break
+      case url.includes(`/docs/guides/platform`) ||
+        (url.includes(`/docs/guides/hosting/platform`) && url):
+        menuState.setMenuLevelId('platform')
+        break
+      case url.includes(`/docs/guides/resources`) && url:
+        menuState.setMenuLevelId('resources')
+        break
+      case url.includes(`/docs/guides/integrations`) && url:
+        menuState.setMenuLevelId('integrations')
+        break
+      // JS v1
+      case url.includes(`/docs/reference/javascript/v1`) && url:
+        menuState.setMenuLevelId('reference_javascript_v1')
+        break
+      // JS v2 (latest)
+      case url.includes(`/docs/reference/javascript`) && url:
+        menuState.setMenuLevelId('reference_javascript_v2')
+        break
+      // dart v0
+      case url.includes(`/docs/reference/dart/v0`) && url:
+        menuState.setMenuLevelId('reference_dart_v0')
+        break
+      // dart v1 (latest)
+      case url.includes(`/docs/reference/dart`) && url:
+        menuState.setMenuLevelId('reference_dart_v1')
+        break
+      case url.includes(`/docs/reference/cli`) && url:
+        menuState.setMenuLevelId('reference_cli')
+        break
+      case url.includes(`/docs/reference/api`) && url:
+        menuState.setMenuLevelId('reference_api')
+        break
+      case url.includes(`/docs/reference/self-hosting-auth`) && url:
+        menuState.setMenuLevelId('reference_self_hosting_auth')
+        break
+      case url.includes(`/docs/reference/self-hosting-storage`) && url:
+        menuState.setMenuLevelId('reference_self_hosting_storage')
+        break
+      case url.includes(`/docs/reference/self-hosting-realtime`) && url:
+        menuState.setMenuLevelId('reference_self_hosting_realtime')
+        break
 
-  //     default:
-  //       break
-  //   }
-  // }
+      default:
+        break
+    }
+  }
 
-  // useEffect(() => {
-  //   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.events])
+  useEffect(() => {
+    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.events])
 
   const home = [
     [
@@ -269,16 +269,17 @@ const SideNav = () => {
     ],
   ]
 
+  const level = useMenuLevelId()
+
   return (
     <div className="flex relative">
       {/* // main menu */}
       <div
         className={[
           'transition-all duration-150 ease-out',
-          // level === 'home' || !level
-          // ?
-          'opacity-100 ml-0 delay-150',
-          // : 'opacity-0 -ml-8 invisible absolute',
+          level === 'home' || !level
+            ? 'opacity-100 ml-0 delay-150'
+            : 'opacity-0 -ml-8 invisible absolute',
         ].join(' ')}
       >
         <ul className="relative w-full flex flex-col gap-4">
@@ -348,7 +349,7 @@ const SideNav = () => {
       <NavigationMenuGuideList id={'realtime'} />
       <NavigationMenuGuideList id={'storage'} />
       <NavigationMenuGuideList id={'platform'} />
-      <NavigationMenuGuideList id={'resources'} setMenuLevelId={menuState.setMenuLevelId} />
+      <NavigationMenuGuideList id={'resources'} />
       <NavigationMenuGuideList id={'integrations'} />
       <NavigationMenuGuideList id={'reference'} />
       {/* // Client Libs */}
diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
index 650a3560734..6fcae17712d 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx
@@ -1,10 +1,23 @@
-import { useTheme } from 'common/Providers'
 import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { FC, useEffect, useState } from 'react'
-import { Button, IconMoon, IconSun } from 'ui'
+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 'common/Providers'
 
 import { getPageType } from '~/lib/helpers'
 
@@ -83,7 +96,7 @@ const TopNavBarRef: FC = () => {
         </div>
 
         <div className="flex items-center gap-12">
-          {/* <SearchButton className="w-full lg:w-96">
+          <SearchButton className="w-full lg:w-96">
             <div
               className="
               flex
@@ -110,7 +123,7 @@ const TopNavBarRef: FC = () => {
                 </div>
               </div>
             </div>
-          </SearchButton> */}
+          </SearchButton>
         </div>
         <div className="hidden lg:flex grow items-center justify-end gap-3">
           <Button
diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index 48d9d2e9144..0c38378609e 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -65,7 +65,9 @@ const Layout: FC<Props> = (props) => {
   }, [])
 
   useEffect(() => {
+    // setTimeout(function () {
     setActive(true)
+    // }, 150)
   }, [])
 
   const hasTableOfContents = tocList.length > 0
@@ -92,9 +94,9 @@ const Layout: FC<Props> = (props) => {
           className={[
             'relative',
             !props.hideToc ? 'col-span-12 md:col-span-9' : 'col-span-12',
-            'transition ease-out',
-            'duration-50',
-            active ? 'opacity-100 left-0' : 'opacity-0 left-6',
+            'transition-all ease-out',
+            // 'duration-100',
+            // active ? 'opacity-100 left-0' : 'opacity-0 left-6',
           ].join(' ')}
         >
           {props.meta.breadcrumb && (
diff --git a/apps/docs/pages/_app.tsx b/apps/docs/pages/_app.tsx
index 76faa52a6b9..6eb9cb54852 100644
--- a/apps/docs/pages/_app.tsx
+++ b/apps/docs/pages/_app.tsx
@@ -2,16 +2,18 @@ import { DefaultSeo } from 'next-seo'
 import { useRouter } from 'next/router'
 import { useEffect } from 'react'
 import { AppPropsWithLayout } from 'types'
-// import Favicons from '~/components/Favicons'
-import { post } from '~/lib/fetchWrappers'
+import { SearchProvider } from '~/components/DocSearch'
+import Favicons from '~/components/Favicons'
+import { ThemeProvider } from 'common/Providers'
+import SiteLayout from '~/layouts/SiteLayout'
 import '../styles/algolia-search.scss'
-// import '../styles/ch.scss'
-// import '../styles/docsearch.scss'
+import '../styles/ch.scss'
+import '../styles/docsearch.scss'
 import '../styles/main.scss?v=1.0.0'
 import '../styles/new-docs.scss'
-// import '../styles/prism-okaidia.scss'
-// import { menuState } from '~/hooks/useMenuState'
-import SiteRefLayout from '~/layouts/SiteRefLayout'
+import '../styles/prism-okaidia.scss'
+import { post } from '~/lib/fetchWrappers'
+import { menuState } from '~/hooks/useMenuState'
 
 function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const router = useRouter()
@@ -33,25 +35,23 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
       /*
        * handle "scroll to top" behaviour on route change
        */
-      // if (document) {
-      //   console.log('url', url)
-      //   // do not scroll to top for reference docs
-      //   if (!url.includes('reference/')) {
-      //     // scroll container div to top
-      //     const container = document.getElementById('docs-content-container')
-      //     // check container exists (only avail on new docs)
-      //     if (container) container.scrollTop = 0
-      //   }
-      // }
-      // menuState.setMenuMobileOpen(false)
+      if (document) {
+        console.log('url', url)
+        // do not scroll to top for reference docs
+        if (!url.includes('reference/')) {
+          // scroll container div to top
+          const container = document.getElementById('docs-content-container')
+          // check container exists (only avail on new docs)
+          if (container) container.scrollTop = 0
+        }
+      }
     }
 
-    // function handlePagrScroll() {}
-    // // Listen for page changes after a navigation or when the query changes
-    // router.events.on('routeChangeComplete', handleRouteChange)
-    // return () => {
-    //   router.events.off('routeChangeComplete', handleRouteChange)
-    // }
+    // Listen for page changes after a navigation or when the query changes
+    router.events.on('routeChangeComplete', handleRouteChange)
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange)
+    }
   }, [router.events])
 
   const SITE_TITLE = 'Supabase Documentation'
@@ -60,7 +60,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
 
   return (
     <>
-      {/* <Favicons /> */}
+      <Favicons />
       <DefaultSeo
         title={SITE_TITLE}
         description={SITE_DESCRIPTION}
@@ -83,13 +83,13 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
           cardType: 'summary_large_image',
         }}
       />
-      {/* <ThemeProvider> */}
-      {/* <SearchProvider> */}
-      <SiteRefLayout>
-        <Component {...pageProps} />
-      </SiteRefLayout>
-      {/* </SearchProvider> */}
-      {/* </ThemeProvider> */}
+      <ThemeProvider>
+        <SearchProvider>
+          <SiteLayout>
+            <Component {...pageProps} />
+          </SiteLayout>
+        </SearchProvider>
+      </ThemeProvider>
     </>
   )
 }