brian/briannelson.dev
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header nav bar

Browse Source
This commit is contained in:
Brian Nelson
2025-10-28 14:54:56 -04:00
parent 23055629c9
commit 853cfe358b
4 changed files with 41 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/Header/Nav/index.tsx Normal file
View File

@@ -0,0 +1,25 @@
'use client'
import React from 'react'
import type { Header as HeaderType } from '@/src/payload-types'
import { CMSLink } from '@/src/components/Link'
import Link from 'next/link'
import { SearchIcon } from 'lucide-react'
export const HeaderNav: React.FC<{ data: HeaderType }> = ({ data }) => {
const navItems = data?.navItems || []
return (
<nav className="flex gap-3 items-center">
{navItems.map(({ link }, i) => {
return <CMSLink key={i} {...link} appearance="link" />
})}
<Link href="/search">
<span className="sr-only">Search</span>
<SearchIcon className="w-5 text-primary" />
</Link>
</nav>
)
}

5
src/app/(frontend)/layout.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react'
import './globals.css'
import { AdminBar } from '@/src/components/AdminBar'
import { GLOBALS_QUERY } from '@/utilities/queries'
import { Header } from '@/src/Header/Component'
export const metadata = {
description: 'Web developer',
@@ -9,11 +11,14 @@ export const metadata = {
export default async function RootLayout(props: { children: React.ReactNode }) {
const { children } = props
const data = GLOBALS_QUERY
console.log(data)
return (
<html lang="en">
<body>
<AdminBar />
<Header />
<main>{children}</main>
</body>
</html>

7
src/components/Navbar.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react'
export default function Navbar() {
return (
<nav>Navbar</nav>
)
}

4
utilities/queries.ts
View File

@@ -3,6 +3,10 @@ import { getPayload } from "payload"
const payload = await getPayload({ config: payloadConfig })
export const GLOBALS_QUERY = await payload.findGlobal({
slug: 'header',
})
export const HOMEPAGE_QUERY = await payload.find({
collection: 'pages',
where: {