From b8de4834a7d210ddd99bc0bdc568af07abb59417 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Tue, 13 Dec 2022 05:00:54 +0800
Subject: [PATCH] move menu items

---
 .../Navigation/NavigationMenu/HomeMenu.tsx    | 188 +++++++++++++++++
 .../NavigationMenu/NavigationMenu.tsx         | 196 +-----------------
 apps/docs/pages/_app.tsx                      |   1 -
 3 files changed, 194 insertions(+), 191 deletions(-)
 create mode 100644 apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx

diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
new file mode 100644
index 00000000000..cab8dcce1d4
--- /dev/null
+++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenu.tsx
@@ -0,0 +1,188 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useMenuLevelId } from '~/hooks/useMenuState'
+import { useTheme } from 'common/Providers'
+
+const home = [
+  [
+    {
+      label: 'Home',
+      icon: '/img/icons/menu/home',
+      href: '/',
+      level: 'home',
+    },
+    {
+      label: 'Getting Started',
+      icon: '/img/icons/menu/getting-started',
+      href: '/guides/getting-started',
+      level: 'gettingstarted',
+    },
+  ],
+  [
+    {
+      label: 'Database',
+      icon: '/img/icons/menu/database',
+      href: '/guides/database',
+      level: 'database',
+    },
+    {
+      label: 'Auth',
+      icon: '/img/icons/menu/auth',
+      href: '/guides/auth/overview',
+      level: 'auth',
+    },
+    {
+      label: 'Edge Functions',
+      icon: '/img/icons/menu/functions',
+      href: '/guides/functions',
+      level: 'functions',
+    },
+    {
+      label: 'Realtime',
+      icon: '/img/icons/menu/realtime',
+      href: '/guides/realtime',
+      level: 'realtime',
+    },
+    {
+      label: 'Storage',
+      icon: '/img/icons/menu/storage',
+      href: '/guides/storage',
+      level: 'storage',
+    },
+  ],
+  [
+    {
+      label: 'Platform',
+      icon: '/img/icons/menu/platform',
+      href: '/guides/hosting/platform',
+      level: 'platform',
+    },
+    {
+      label: 'Resources',
+      icon: '/img/icons/menu/platform',
+      href: '/guides/resources',
+      level: 'resources',
+    },
+    {
+      label: 'Integrations',
+      icon: '/img/icons/menu/integrations',
+      href: '/guides/integrations',
+      level: 'integrations',
+    },
+  ],
+  [
+    {
+      label: 'Client Library Reference',
+    },
+    {
+      label: 'JavaScript',
+      icon: '/img/icons/menu/reference-javascript',
+      hasLightIcon: true,
+      href: '/reference/javascript/introduction',
+      level: 'reference_javascript',
+    },
+    {
+      label: 'Flutter',
+      icon: '/img/icons/menu/reference-dart',
+      hasLightIcon: true,
+      href: '/reference/dart/introduction',
+      level: 'reference_dart',
+    },
+    {
+      label: 'Tools Reference',
+    },
+    {
+      label: 'Management API',
+      icon: '/img/icons/menu/reference-api',
+      hasLightIcon: true,
+      href: '/reference/api/introduction',
+      level: 'reference_javascript',
+    },
+    {
+      label: 'Supabase CLI',
+      icon: '/img/icons/menu/reference-cli',
+      hasLightIcon: true,
+      href: '/reference/cli/introduction',
+      level: 'reference_javascript',
+    },
+  ],
+]
+
+const NavigationMenuHome = () => {
+  const level = useMenuLevelId()
+  const router = useRouter()
+  const { isDarkMode } = useTheme()
+
+  return (
+    <div
+      className={[
+        'transition-all duration-150 ease-out',
+        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">
+        {home.map((section, sectionIndex) => {
+          return (
+            <>
+              {sectionIndex !== 0 && (
+                <div
+                  className="h-px w-full bg-blackA-300 dark:bg-whiteA-300"
+                  key={`section-${sectionIndex}-border`}
+                ></div>
+              )}
+              <div key={`section-${sectionIndex}`}>
+                <div className="flex flex-col gap-3">
+                  {section.map((link) => {
+                    if (!link.href) {
+                      return (
+                        <span
+                          key={link.label}
+                          className="font-mono uppercase text-xs text-scale-900"
+                        >
+                          {link.label}
+                        </span>
+                      )
+                    } else {
+                      return (
+                        <Link href={link.href} passHref key={link.label}>
+                          <a>
+                            <li
+                              className={[
+                                'group flex items-center gap-3',
+                                'text-base transition-all duration-150 text-scale-1200 hover:text-brand-900 hover:cursor-pointer ',
+                              ].join(' ')}
+                            >
+                              <Image
+                                alt={link.label}
+                                src={`${router.basePath}${
+                                  Object.hasOwn(link, 'hasLightIcon') && !link.hasLightIcon
+                                    ? link.icon
+                                    : isDarkMode
+                                    ? link.icon
+                                    : `${link.icon}-light`
+                                }${!link.icon.includes('png') ? '.svg' : ''}`}
+                                width={17}
+                                height={17}
+                                className="w-4 h-4 group-hover:scale-110 ease-out transition-all"
+                              />
+                              {link.label}
+                            </li>
+                          </a>
+                        </Link>
+                      )
+                    }
+                  })}
+                </div>
+              </div>
+            </>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
+
+export default NavigationMenuHome
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index 3f370838df0..56e04385d5c 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -1,12 +1,8 @@
-import { useTheme } from 'common/Providers'
-import Image from 'next/image'
-import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { memo, useEffect, useState } from 'react'
+import { memo, useEffect } from 'react'
+import { menuState } from '~/hooks/useMenuState'
 import NavigationMenuGuideList from './NavigationMenuGuideList'
 import NavigationMenuRefList from './NavigationMenuRefList'
-import { menuState } from '~/hooks/useMenuState'
-
 // @ts-expect-error
 import spec_js_v2 from '~/../../spec/supabase_js_v2.yml' assert { type: 'yml' }
 // @ts-expect-error
@@ -15,16 +11,15 @@ import spec_js_v1 from '~/../../spec/supabase_js_v1.yml' assert { type: 'yml' }
 import spec_dart_v1 from '~/../../spec/supabase_dart_v1.yml' assert { type: 'yml' }
 // @ts-expect-error
 import spec_dart_v0 from '~/../../spec/supabase_dart_v0.yml' assert { type: 'yml' }
-
 // import { gen_v3 } from '~/lib/refGenerator/helpers'
-import libCommonSections from '~/../../spec/common-client-libs-sections.json'
 import apiCommonSections from '~/../../spec/common-api-sections.json'
 import cliCommonSections from '~/../../spec/common-cli-sections.json'
+import libCommonSections from '~/../../spec/common-client-libs-sections.json'
 import authServerCommonSections from '~/../../spec/common-self-hosting-auth-sections.json'
-import storageServerCommonSections from '~/../../spec/common-self-hosting-storage-sections.json'
 import realtimeServerCommonSections from '~/../../spec/common-self-hosting-realtime-sections.json'
+import storageServerCommonSections from '~/../../spec/common-self-hosting-storage-sections.json'
 import { flattenSections } from '~/lib/helpers'
-import { useMenuLevelId } from '~/hooks/useMenuState'
+import NavigationMenuHome from './HomeMenu'
 
 // Filter libCommonSections for just the relevant sections in the current library
 function generateAllowedClientLibKeys(sections, spec) {
@@ -69,11 +64,6 @@ export type RefKeyOptions =
 
 const SideNav = () => {
   const router = useRouter()
-  const { isDarkMode } = useTheme()
-
-  // const level = useMenuLevelId()
-
-  console.log()
 
   let version = ''
 
@@ -164,184 +154,10 @@ const SideNav = () => {
     }
   }, [router.events])
 
-  const home = [
-    [
-      {
-        label: 'Home',
-        icon: '/img/icons/menu/home',
-        href: '/',
-        level: 'home',
-      },
-      {
-        label: 'Getting Started',
-        icon: '/img/icons/menu/getting-started',
-        href: '/guides/getting-started',
-        level: 'gettingstarted',
-      },
-    ],
-    [
-      {
-        label: 'Database',
-        icon: '/img/icons/menu/database',
-        href: '/guides/database',
-        level: 'database',
-      },
-      {
-        label: 'Auth',
-        icon: '/img/icons/menu/auth',
-        href: '/guides/auth/overview',
-        level: 'auth',
-      },
-      {
-        label: 'Edge Functions',
-        icon: '/img/icons/menu/functions',
-        href: '/guides/functions',
-        level: 'functions',
-      },
-      {
-        label: 'Realtime',
-        icon: '/img/icons/menu/realtime',
-        href: '/guides/realtime',
-        level: 'realtime',
-      },
-      {
-        label: 'Storage',
-        icon: '/img/icons/menu/storage',
-        href: '/guides/storage',
-        level: 'storage',
-      },
-    ],
-    [
-      {
-        label: 'Platform',
-        icon: '/img/icons/menu/platform',
-        href: '/guides/hosting/platform',
-        level: 'platform',
-      },
-      {
-        label: 'Resources',
-        icon: '/img/icons/menu/platform',
-        href: '/guides/resources',
-        level: 'resources',
-      },
-      {
-        label: 'Integrations',
-        icon: '/img/icons/menu/integrations',
-        href: '/guides/integrations',
-        level: 'integrations',
-      },
-    ],
-    [
-      {
-        label: 'Client Library Reference',
-      },
-      {
-        label: 'JavaScript',
-        icon: '/img/icons/menu/reference-javascript',
-        hasLightIcon: true,
-        href: '/reference/javascript/introduction',
-        level: 'reference_javascript',
-      },
-      {
-        label: 'Flutter',
-        icon: '/img/icons/menu/reference-dart',
-        hasLightIcon: true,
-        href: '/reference/dart/introduction',
-        level: 'reference_dart',
-      },
-      {
-        label: 'Tools Reference',
-      },
-      {
-        label: 'Management API',
-        icon: '/img/icons/menu/reference-api',
-        hasLightIcon: true,
-        href: '/reference/api/introduction',
-        level: 'reference_javascript',
-      },
-      {
-        label: 'Supabase CLI',
-        icon: '/img/icons/menu/reference-cli',
-        hasLightIcon: true,
-        href: '/reference/cli/introduction',
-        level: 'reference_javascript',
-      },
-    ],
-  ]
-
-  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',
-        ].join(' ')}
-      >
-        <ul className="relative w-full flex flex-col gap-4">
-          {home.map((section, sectionIndex) => {
-            return (
-              <>
-                {sectionIndex !== 0 && (
-                  <div
-                    className="h-px w-full bg-blackA-300 dark:bg-whiteA-300"
-                    key={`section-${sectionIndex}-border`}
-                  ></div>
-                )}
-                <div key={`section-${sectionIndex}`}>
-                  <div className="flex flex-col gap-3">
-                    {section.map((link) => {
-                      if (!link.href) {
-                        return (
-                          <span
-                            key={link.label}
-                            className="font-mono uppercase text-xs text-scale-900"
-                          >
-                            {link.label}
-                          </span>
-                        )
-                      } else {
-                        return (
-                          <Link href={link.href} passHref key={link.label}>
-                            <a>
-                              <li
-                                className={[
-                                  'group flex items-center gap-3',
-                                  'text-base transition-all duration-150 text-scale-1200 hover:text-brand-900 hover:cursor-pointer ',
-                                ].join(' ')}
-                              >
-                                <Image
-                                  alt={link.label}
-                                  src={`${router.basePath}${
-                                    Object.hasOwn(link, 'hasLightIcon') && !link.hasLightIcon
-                                      ? link.icon
-                                      : isDarkMode
-                                      ? link.icon
-                                      : `${link.icon}-light`
-                                  }${!link.icon.includes('png') ? '.svg' : ''}`}
-                                  width={17}
-                                  height={17}
-                                  className="w-4 h-4 group-hover:scale-110 ease-out transition-all"
-                                />
-                                {link.label}
-                              </li>
-                            </a>
-                          </Link>
-                        )
-                      }
-                    })}
-                  </div>
-                </div>
-              </>
-            )
-          })}
-        </ul>
-      </div>
-
+      <NavigationMenuHome />
       <NavigationMenuGuideList id={'gettingstarted'} />
       <NavigationMenuGuideList id={'database'} />
       <NavigationMenuGuideList id={'auth'} />
diff --git a/apps/docs/pages/_app.tsx b/apps/docs/pages/_app.tsx
index 6eb9cb54852..52a0b995643 100644
--- a/apps/docs/pages/_app.tsx
+++ b/apps/docs/pages/_app.tsx
@@ -36,7 +36,6 @@ 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