lywsvip/supabase
1
0
Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-06-09 11:38:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

move menu items

Browse Source
This commit is contained in:
Jonathan Summers-Muir
2022-12-13 05:00:54 +08:00
parent 0c725796e2
commit b8de4834a7
3 changed files with 194 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

196
apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx
View File

@@ -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'} />