diff --git a/src/app/(frontend)/layout.tsx b/src/app/(frontend)/layout.tsx index 1bc73fa..ba68511 100644 --- a/src/app/(frontend)/layout.tsx +++ b/src/app/(frontend)/layout.tsx @@ -1,5 +1,8 @@ import SiteNavigation from '@/components/SiteNavigation' import React from 'react' +import { getPayload } from 'payload' +import config from '@/payload.config' +import { Header } from '@/payload-types' export const metadata = { description: 'House of Study for Temple Beth El', @@ -9,5 +12,19 @@ export const metadata = { export default async function RootLayout(props: { children: React.ReactNode }) { const { children } = props - return {children} + const payloadConfig = await config + const payload = await getPayload({ config: payloadConfig }) + + const headerGlobals = (await payload.findGlobal({ + slug: 'header', + })) as Header + + const navItems = + headerGlobals.headerLinks?.map((l) => ({ + label: l.label || '', + href: l.href || '', + newTab: l.newTab || false, + })) || [] + + return {children} } diff --git a/src/components/SiteNavigation.tsx b/src/components/SiteNavigation.tsx index 99728ae..646171d 100644 --- a/src/components/SiteNavigation.tsx +++ b/src/components/SiteNavigation.tsx @@ -28,21 +28,24 @@ import { import { StackedLayout } from '@/components/stacked-layout' import { Media } from '@/payload-types' import { useGlobal } from '@/providers/GlobalProvider' -import { ArrowRightStartOnRectangleIcon, LightBulbIcon, UserIcon } from '@heroicons/react/16/solid' +import { ArrowRightStartOnRectangleIcon, UserIcon } from '@heroicons/react/16/solid' import { MagnifyingGlassIcon, SunIcon, MoonIcon } from '@heroicons/react/20/solid' import { useTheme } from 'next-themes' import Link from 'next/link' -import React, { useMemo } from 'react' +import React, { ReactNode, useMemo } from 'react' -const navItems = [ - { label: 'Home', url: '/' }, - { label: 'Browse', url: '/books' }, - { label: 'Events', url: '/events' }, - { label: 'Settings', url: '/settings' }, -] +type NavItem = { + label: string + href: string + newTab: boolean +} -export default function SiteNavigation(props: { children: React.ReactNode }) { - const { children } = props +type Props = { + children: ReactNode + navItems: NavItem[] +} +export default function SiteNavigation(props: Props) { + const { children, navItems } = props const { theme, setTheme } = useTheme() const { user, setUser } = useGlobal() @@ -70,19 +73,17 @@ export default function SiteNavigation(props: { children: React.ReactNode }) { navbar={ - (window.location.href = '/')} - className="max-lg:hidden" - > - - Midrashim + + + + Midrashim + - {navItems.map(({ label, url }) => ( - + {navItems.map(({ label, href, newTab }) => ( + {label} ))} @@ -116,10 +117,6 @@ export default function SiteNavigation(props: { children: React.ReactNode }) { My profile )} - - - Share feedback - {!!user && ( <> @@ -149,8 +146,8 @@ export default function SiteNavigation(props: { children: React.ReactNode }) { - {navItems.map(({ label, url }) => ( - + {navItems.map(({ label, href, newTab }) => ( + {label} ))} diff --git a/src/globals/header/config.ts b/src/globals/header/config.ts index 6afa6bd..6f4671f 100644 --- a/src/globals/header/config.ts +++ b/src/globals/header/config.ts @@ -21,9 +21,8 @@ export const Header: GlobalConfig = { type: 'text', }, { - name: 'page', - type: 'relationship', - relationTo: 'pages' + name: 'href', + type: 'text' }, { name: 'newTab', diff --git a/src/payload-types.ts b/src/payload-types.ts index f7e3900..a00f550 100644 --- a/src/payload-types.ts +++ b/src/payload-types.ts @@ -678,7 +678,7 @@ export interface Header { headerLinks?: | { label?: string | null; - page?: (number | null) | Page; + href?: string | null; newTab?: boolean | null; id?: string | null; }[] @@ -696,7 +696,7 @@ export interface HeaderSelect { | T | { label?: T; - page?: T; + href?: T; newTab?: T; id?: T; };