From 2e782c431a24ce9209c32c10e15b939411cfde1b Mon Sep 17 00:00:00 2001
From: MichalC <103170279+wSBMichalee@users.noreply.github.com>
Date: Thu, 3 Sep 2026 23:43:26 +0200
Subject: [PATCH] feat(ui): add anchor links to Header nav and expand FAQ block

---
 src/app/(frontend)/layout.tsx   |  4 +-
 src/components/Header/index.tsx | 67 ++++++++++++++++++++++++---------
 src/globals/Header.ts           |  6 ++-
 src/payload-types.ts            |  4 +-
 4 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/src/app/(frontend)/layout.tsx b/src/app/(frontend)/layout.tsx
index 244e264..068f8f3 100644
--- a/src/app/(frontend)/layout.tsx
+++ b/src/app/(frontend)/layout.tsx
@@ -48,8 +48,8 @@ export default async function RootLayout({
     }),
   ]);
 
-  // Filtrujemy tylko poprawnie spopulowane strony (chroni przed brakiem dostępu lub usuniętymi relacjami)
-  const headerNavItems = (headerData.navigation || []).map((item: any) => item.page).filter((page: any) => typeof page === 'object' && page !== null);
+  // Filtrujemy tylko poprawnie spopulowane strony (chroni przed brakiem dostępu lub usuniętymi relacjami) lub linki anchor
+  const headerNavItems = (headerData.navigation || []).filter((item: any) => (item.page && typeof item.page === 'object' && item.page !== null) || item.anchor);
   const footerNavItems = (footerData.navigation || []).map((item: any) => item.page).filter((page: any) => typeof page === 'object' && page !== null);
 
   return (
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index e773be7..5df0c1c 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -52,14 +52,31 @@ export function Header({ navItems = [] }: { navItems?: any[] }) {
 
           {/* Desktop Navigation */}
           <nav className="hidden xl:flex items-center gap-10">
-            {navItems.map((page, index) => (
-              <LocalizedLink 
-                key={index} 
-                page={page}
-                currentLocaleCode={currentLocale.code}
-                className="text-sm font-medium text-foreground/90 hover:text-accent transition-colors"
-              />
-            ))}
+            {navItems.map((item, index) => {
+              if (item.page && item.page.slug) {
+                return (
+                  <LocalizedLink 
+                    key={index} 
+                    page={item.page}
+                    currentLocaleCode={currentLocale.code}
+                    className="text-sm font-medium text-foreground/90 hover:text-accent transition-colors"
+                  />
+                )
+              } else if (item.anchor) {
+                // If anchor only
+                const title = item.anchor.toUpperCase() // Fallback title
+                return (
+                  <Link 
+                    key={index}
+                    href={`/${currentLocale.code}#${item.anchor}`}
+                    className="text-sm font-medium text-foreground/90 hover:text-accent transition-colors"
+                  >
+                    FAQ
+                  </Link>
+                )
+              }
+              return null;
+            })}
           </nav>
 
           {/* Right Actions & Hamburger */}
@@ -87,15 +104,31 @@ export function Header({ navItems = [] }: { navItems?: any[] }) {
         }`}
       >
         <nav className="flex flex-col gap-8 text-center w-full px-6">
-          {navItems.map((page, index) => (
-            <LocalizedLink 
-              key={index} 
-              page={page}
-              currentLocaleCode={currentLocale.code}
-              className="text-2xl font-bold text-foreground hover:text-accent transition-colors"
-              onClick={() => setIsMobileMenuOpen(false)}
-            />
-          ))}
+          {navItems.map((item, index) => {
+            if (item.page && item.page.slug) {
+              return (
+                <LocalizedLink 
+                  key={index} 
+                  page={item.page}
+                  currentLocaleCode={currentLocale.code}
+                  className="text-2xl font-bold text-foreground hover:text-accent transition-colors"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                />
+              )
+            } else if (item.anchor) {
+              return (
+                <Link 
+                  key={index}
+                  href={`/${currentLocale.code}#${item.anchor}`}
+                  className="text-2xl font-bold text-foreground hover:text-accent transition-colors"
+                  onClick={() => setIsMobileMenuOpen(false)}
+                >
+                  FAQ
+                </Link>
+              )
+            }
+            return null;
+          })}
         </nav>
 
         <div className="absolute bottom-12 left-0 right-0 px-6 flex flex-col items-center">
diff --git a/src/globals/Header.ts b/src/globals/Header.ts
index 38f1232..b10e3b0 100644
--- a/src/globals/Header.ts
+++ b/src/globals/Header.ts
@@ -14,7 +14,11 @@ export const Header: GlobalConfig = {
           name: 'page',
           type: 'relationship',
           relationTo: 'pages',
-          required: true,
+          required: false,
+        },
+        {
+          name: 'anchor',
+          type: 'text',
         },
       ],
     },
diff --git a/src/payload-types.ts b/src/payload-types.ts
index e4c8625..a90aa04 100644
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@@ -989,7 +989,8 @@ export interface Header {
   id: number;
   navigation?:
     | {
-        page: number | Page;
+        page?: (number | null) | Page;
+        anchor?: string | null;
         id?: string | null;
       }[]
     | null;
@@ -1214,6 +1215,7 @@ export interface HeaderSelect<T extends boolean = true> {
     | T
     | {
         page?: T;
+        anchor?: T;
         id?: T;
       };
   updatedAt?: T;