From 74bbfd0f973f9dcf2ac2ccdbfb28c8086fd13bb0 Mon Sep 17 00:00:00 2001
From: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Date: Thu, 24 Nov 2022 17:00:39 +0800
Subject: [PATCH] fix active states on side menu

---
 .../NavigationMenu.constants.ts               |  4 +-
 .../NavigationMenu/NavigationMenu.tsx         |  7 +-
 .../NavigationMenu/NavigationMenuCliList.tsx  |  4 +-
 .../NavigationMenuGuideList.tsx               | 32 ++++++-
 .../NavigationMenu/NavigationMenuRefList.tsx  | 12 +--
 apps/docs/pages/guides/database.mdx           | 10 ++-
 apps/docs/pages/guides/integrations.mdx       | 85 +++++++++++++++++++
 apps/docs/pages/guides/tutorials.mdx          | 85 +++++++++++++++++++
 apps/docs/pages/new/database.mdx              | 85 +++++++++++++++++++
 9 files changed, 307 insertions(+), 17 deletions(-)
 create mode 100644 apps/docs/pages/guides/integrations.mdx
 create mode 100644 apps/docs/pages/guides/tutorials.mdx
 create mode 100644 apps/docs/pages/new/database.mdx

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index a879fdb4a1f..1f4f49dd47f 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -504,8 +504,8 @@ export const reference_javascript = {
 }
 
 export const reference_cli = {
-  icon: '/img/icons/javascript-icon.svg',
-  title: 'javascript-js',
+  icon: '/img/icons/cli-icon.svg',
+  title: 'Supabase CLI',
   parent: '/reference',
   items: [
     {
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
index ba32b83378f..1f773d645e1 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
@@ -44,7 +44,8 @@ const SideNav = () => {
       case url.includes(`/docs/guides/integrations`) && url:
         setLevel('integrations')
         break
-      case url.includes(`/docs/platform`) && url:
+      case url.includes(`/docs/guides/platform`) ||
+        (url.includes(`/docs/guides/hosting/platform`) && url):
         setLevel('platform')
         break
       case url.includes(`/docs/new/reference/javascript/`) && url:
@@ -117,7 +118,7 @@ const SideNav = () => {
       {
         label: 'Edge Functions',
         icon: 'functions.svg',
-        href: '/guides/edge-functions',
+        href: '/guides/functions',
         level: 'functions',
       },
     ],
@@ -137,7 +138,7 @@ const SideNav = () => {
       {
         label: 'Platform',
         icon: 'platform.svg',
-        href: '/guides/platform',
+        href: '/guides/hosting/platform',
         level: 'platform',
       },
     ],
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
index 0a2e1fdaebd..557a38c8f27 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuCliList.tsx
@@ -125,7 +125,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
                 <IconChevronLeft size={10} strokeWidth={3} />
               </div>
             </div>
-            <span>Main Menu</span>
+            <span>Back to reference</span>
           </a>
         </Link>
         <div className="flex items-center gap-3 my-3">
@@ -148,7 +148,7 @@ const NavigationMenuCliList = ({ currentLevel, setLevel, id }) => {
                 {clientLibsCommon.commands
                   .filter((x) => x.product === section.key)
                   .map((x, index) => {
-                    console.log(functions)
+                    // console.log(functions)
                     return (
                       <>
                         <FunctionLink {...x} />
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
index a649bc70760..28f75a3c234 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -9,6 +9,8 @@ const NavigationMenuGuideList = ({ currentLevel, setLevel, id }) => {
 
   const menu = NavItems[id]
 
+  console.log('router', router)
+
   return (
     <div
       className={[
@@ -47,17 +49,27 @@ const NavigationMenuGuideList = ({ currentLevel, setLevel, id }) => {
             className="w-5 rounded"
           />
           {/* </div> */}
-          <h2 className={['text-scale-1200 ', !menu.title && 'capitalize'].join(' ')}>
+          <h2
+            className={[
+              ' ',
+              !menu.title && 'capitalize',
+              id === router.pathname ? 'text-brand-900' : 'hover:text-brand-900 text-scale-1200',
+            ].join(' ')}
+          >
             {menu.title ?? currentLevel}
           </h2>
         </div>
 
         {menu.items.map((x, index) => {
+          // console.log('1st type of link?', x.items && x.items.length > 0)
+          console.log()
           return (
             <div key={x.name}>
               {x.items && x.items.length > 0 ? (
                 <>
                   {x.items.map((subItem, subItemIndex) => {
+                    // console.log('router', router)
+                    console.log('subitem url', subItem.url)
                     return (
                       <>
                         {subItemIndex === 0 && (
@@ -70,7 +82,14 @@ const NavigationMenuGuideList = ({ currentLevel, setLevel, id }) => {
                         )}
                         <li key={subItem.name}>
                           <Link href={`/${subItem.url}`} passHref>
-                            <a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand-900">
+                            <a
+                              className={[
+                                'cursor-pointer transition text-sm',
+                                subItem.url === router.pathname
+                                  ? 'text-brand-900'
+                                  : 'hover:text-brand-900 text-scale-1000',
+                              ].join(' ')}
+                            >
                               {subItem.name}
                             </a>
                           </Link>
@@ -86,7 +105,14 @@ const NavigationMenuGuideList = ({ currentLevel, setLevel, id }) => {
                 <>
                   <li>
                     <Link href={`/${x.url}`} passHref>
-                      <a className="cursor-pointer transition text-scale-1000 text-sm hover:text-brand-900 flex gap-3">
+                      <a
+                        className={[
+                          'cursor-pointer transition text-sm',
+                          x.url === router.pathname
+                            ? 'text-brand-900'
+                            : 'hover:text-brand-900 text-scale-1000',
+                        ].join(' ')}
+                      >
                         {x.icon && <img className="w-3" src={`${router.basePath}${x.icon}`} />}
                         {x.name}
                       </a>
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
index 33900c54f0d..68dae8beacb 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefList.tsx
@@ -94,7 +94,7 @@ const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => {
                 <IconChevronLeft size={10} strokeWidth={3} />
               </div>
             </div>
-            <span>Main Menu</span>
+            <span>Back to reference</span>
           </a>
         </Link>
         <div className="flex items-center gap-3 my-3">
@@ -114,7 +114,7 @@ const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => {
           {clientLibsCommon.functions
             .filter((x) => x.product === 'database')
             .map((x, index) => {
-              console.log(functions)
+              // console.log(functions)
               return (
                 <>
                   <FunctionLink {...x} />
@@ -128,7 +128,7 @@ const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => {
           {clientLibsCommon.functions
             .filter((x) => x.product === 'auth')
             .map((x, index) => {
-              console.log(functions)
+              // console.log(functions)
               return (
                 <>
                   <FunctionLink {...x} />
@@ -140,7 +140,7 @@ const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => {
           {clientLibsCommon.functions
             .filter((x) => x.product === 'storage')
             .map((x, index) => {
-              console.log(functions)
+              // console.log(functions)
               return (
                 <>
                   <FunctionLink {...x} />
@@ -152,7 +152,7 @@ const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => {
           {clientLibsCommon.functions
             .filter((x) => x.product === 'realtime')
             .map((x, index) => {
-              console.log(functions)
+              // console.log(functions)
               return (
                 <>
                   <FunctionLink {...x} />
@@ -164,7 +164,7 @@ const NavigationMenuRefList = ({ currentLevel, setLevel, id }) => {
           {clientLibsCommon.functions
             .filter((x) => x.product === 'functions')
             .map((x, index) => {
-              console.log(functions)
+              // console.log(functions)
               return (
                 <>
                   <FunctionLink {...x} />
diff --git a/apps/docs/pages/guides/database.mdx b/apps/docs/pages/guides/database.mdx
index d557ac7a79e..3dd7df57aa3 100644
--- a/apps/docs/pages/guides/database.mdx
+++ b/apps/docs/pages/guides/database.mdx
@@ -1,4 +1,6 @@
 import Layout from '~/layouts/DefaultGuideLayout'
+import NewContent from '~/pages/new/database.mdx'
+import { useRouter } from 'next/router'
 
 export const meta = {
   id: 'database',
@@ -88,6 +90,12 @@ Read about resetting your database password [here](/docs/guides/database/managin
 - Read more about [Postgres](/docs/postgres/server/about)
 - Sign in: [app.supabase.com](https://app.supabase.com)
 
-export const Page = ({ children }) => <Layout meta={meta} children={children} />
+export const Page = ({ children }) => {
+  const router = useRouter()
+  if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true' && !router.asPath.includes('overview')) {
+    return NewContent()
+  }
+  return <Layout meta={meta} children={children} />
+}
 
 export default Page
diff --git a/apps/docs/pages/guides/integrations.mdx b/apps/docs/pages/guides/integrations.mdx
new file mode 100644
index 00000000000..7077327474d
--- /dev/null
+++ b/apps/docs/pages/guides/integrations.mdx
@@ -0,0 +1,85 @@
+import Layout from '~/layouts/DefaultLayout'
+import Link from 'next/link'
+import { GlassPanel } from 'ui'
+
+export const meta = {
+  title: 'Integrations',
+}
+
+## Learn how to use Supabase Auth to handle authentication and authorization of your users blah blah i am test text
+
+### Popular Guides
+
+<div className="grid grid-cols-12 gap-6 not-prose">
+  {topArticles.map((item) => {
+    return (
+      <Link
+        href={`/new/${item.href}`}
+        key={item.title}
+        passHref
+      >
+        <a className={item.span ?? 'col-span-4'}>
+          <GlassPanel
+            title="Social Login"
+            header="/docs/img/cards/sample-card-header-4.svg"
+            span="col-span-6"
+            background={false}
+          >
+            {item.description}
+          </GlassPanel>
+        </a>
+      </Link>
+    )})}
+
+</div>
+
+export const topArticles = [
+  {
+    title: 'Database',
+    header: '/docs/img/cards/sample-card-header-4.svg',
+    href: '/auth/auth-login',
+    description: 'Social Login allows the user to sign into a third party website instead of.',
+    span: 'col-span-6',
+  },
+  {
+    title: 'Auth',
+    header: '/docs/img/cards/sample-card-header-4.svg',
+    icon: 'auth',
+    href: '/auth/auth-login',
+    description: `
+Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
+  `,
+    span: 'col-span-6',
+  },
+  {
+    title: 'Storage',
+    header: '/docs/img/cards/sample-card-header-4.svg',
+    icon: 'storage',
+    href: '/auth/auth-login',
+    description: `
+Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
+  `,
+  },
+  {
+    title: 'Realtime',
+    header: '/docs/img/cards/sample-card-header-4.svg',
+    icon: 'realtime',
+    href: '/auth/auth-login',
+    description: `
+Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
+  `,
+  },
+  {
+    title: 'Edge Functions',
+    header: '/docs/img/cards/sample-card-header-4.svg',
+    icon: 'functions',
+    href: '/auth/auth-login',
+    description: `
+Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
+  `,
+  },
+]
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
diff --git a/apps/docs/pages/guides/tutorials.mdx b/apps/docs/pages/guides/tutorials.mdx
new file mode 100644
index 00000000000..d4681aa2977
--- /dev/null
+++ b/apps/docs/pages/guides/tutorials.mdx
@@ -0,0 +1,85 @@
+import Layout from '~/layouts/DefaultLayout'
+import Link from 'next/link'
+import { GlassPanel } from 'ui'
+
+export const meta = {
+  title: 'Tutorials',
+}
+
+## Learn how to use Supabase Auth to handle authentication and authorization of your users blah blah i am test text
+
+### Popular Guides
+
+<div className="grid grid-cols-12 gap-6 not-prose">
+  {topArticles.map((item) => {
+    return (
+      <Link
+        href={`/new/${item.href}`}
+        key={item.title}
+        passHref
+      >
+        <a className={item.span ?? 'col-span-4'}>
+          <GlassPanel
+            title="Social Login"
+            header="/docs/img/cards/sample-card-header-4.svg"
+            span="col-span-6"
+            background={false}
+          >
+            {item.description}
+          </GlassPanel>
+        </a>
+      </Link>
+    )})}
+
+</div>
+
+export const topArticles = [
+  {
+    title: 'Database',
+    header: '/docs/img/cards/sample-card-header-4.svg',
+    href: '/auth/auth-login',
+    description: 'Social Login allows the user to sign into a third party website instead of.',
+    span: 'col-span-6',
+  },
+  {
+    title: 'Auth',
+    header: '/docs/img/cards/sample-card-header-4.svg',
+    icon: 'auth',
+    href: '/auth/auth-login',
+    description: `
+Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
+  `,
+    span: 'col-span-6',
+  },
+  {
+    title: 'Storage',
+    header: '/docs/img/cards/sample-card-header-4.svg',
+    icon: 'storage',
+    href: '/auth/auth-login',
+    description: `
+Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
+  `,
+  },
+  {
+    title: 'Realtime',
+    header: '/docs/img/cards/sample-card-header-4.svg',
+    icon: 'realtime',
+    href: '/auth/auth-login',
+    description: `
+Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
+  `,
+  },
+  {
+    title: 'Edge Functions',
+    header: '/docs/img/cards/sample-card-header-4.svg',
+    icon: 'functions',
+    href: '/auth/auth-login',
+    description: `
+Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
+  `,
+  },
+]
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page
diff --git a/apps/docs/pages/new/database.mdx b/apps/docs/pages/new/database.mdx
new file mode 100644
index 00000000000..56a04f8ad28
--- /dev/null
+++ b/apps/docs/pages/new/database.mdx
@@ -0,0 +1,85 @@
+import Layout from '~/layouts/DefaultLayout'
+import Link from 'next/link'
+import { GlassPanel } from 'ui'
+
+export const meta = {
+  title: 'Database',
+}
+
+## Learn how to use Supabase Auth to handle authentication and authorization of your users blah blah i am test text
+
+### Popular Guides
+
+<div className="grid grid-cols-12 gap-6 not-prose">
+  {topArticles.map((item) => {
+    return (
+      <Link
+        href={`/new/${item.href}`}
+        key={item.title}
+        passHref
+      >
+        <a className={item.span ?? 'col-span-4'}>
+          <GlassPanel
+            title="Social Login"
+            header="/docs/img/cards/sample-card-header-4.svg"
+            span="col-span-6"
+            background={false}
+          >
+            {item.description}
+          </GlassPanel>
+        </a>
+      </Link>
+    )})}
+
+</div>
+
+export const topArticles = [
+  {
+    title: 'Database',
+    header: '/docs/img/cards/sample-card-header-4.svg',
+    href: '/auth/auth-login',
+    description: 'Social Login allows the user to sign into a third party website instead of.',
+    span: 'col-span-6',
+  },
+  {
+    title: 'Auth',
+    header: '/docs/img/cards/sample-card-header-4.svg',
+    icon: 'auth',
+    href: '/auth/auth-login',
+    description: `
+Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
+  `,
+    span: 'col-span-6',
+  },
+  {
+    title: 'Storage',
+    header: '/docs/img/cards/sample-card-header-4.svg',
+    icon: 'storage',
+    href: '/auth/auth-login',
+    description: `
+Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
+  `,
+  },
+  {
+    title: 'Realtime',
+    header: '/docs/img/cards/sample-card-header-4.svg',
+    icon: 'realtime',
+    href: '/auth/auth-login',
+    description: `
+Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
+  `,
+  },
+  {
+    title: 'Edge Functions',
+    header: '/docs/img/cards/sample-card-header-4.svg',
+    icon: 'functions',
+    href: '/auth/auth-login',
+    description: `
+Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
+  `,
+  },
+]
+
+export const Page = ({ children }) => <Layout meta={meta} children={children} />
+
+export default Page