fix active states on side menu

2026-06-01 18:34:37 +08:00 · 2022-11-24 17:00:39 +08:00
parent f62c0858f4
commit 74bbfd0f97
9 changed files with 307 additions and 17 deletions
--- 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: [
    {
--- 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',
      },
    ],
--- 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} />
--- 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>
--- 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} />
--- 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
--- a/apps/docs/pages/guides/integrations.mdx
+++ 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
--- a/apps/docs/pages/guides/tutorials.mdx
+++ 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
--- a/apps/docs/pages/new/database.mdx
+++ 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