feat: connect header and footer to cms as globals

src/app/(frontend)/[[...slug]]/page.tsx

@@ -1,4 +1,10 @@
+import configPromise from '@payload-config'
+import { getPayload } from 'payload'
+
 import NextApp from '@/spa/NextApp'
+import { normalizeFooterData, normalizeHeaderData } from '@/spa/cmsNavigation'
+
+export const dynamic = 'force-dynamic'
 
 type Args = {
   params: Promise<{ slug?: string[] }>
@@ -7,6 +13,11 @@ type Args = {
 export default async function Page({ params }: Args) {
   const { slug = [] } = await params
   const pathname = `/${slug.join('/')}`.replace(/\/$/, '') || '/'
+  const payload = await getPayload({ config: configPromise })
+  const [header, footer] = await Promise.all([
+    payload.findGlobal({ slug: 'header', depth: 1 }).catch(() => undefined),
+    payload.findGlobal({ slug: 'footer', depth: 1 }).catch(() => undefined),
+  ])
 
-  return <NextApp pathname={pathname} />
+  return <NextApp pathname={pathname} header={normalizeHeaderData(header)} footer={normalizeFooterData(footer)} />
 }