feat(ui): add anchor links to Header nav and expand FAQ block

This commit is contained in:
MichalC
2026-09-03 23:43:26 +02:00
parent 2964cf66c5
commit 2e782c431a
4 changed files with 60 additions and 21 deletions
+2 -2
View File
@@ -48,8 +48,8 @@ export default async function RootLayout({
}), }),
]); ]);
// Filtrujemy tylko poprawnie spopulowane strony (chroni przed brakiem dostępu lub usuniętymi relacjami) // Filtrujemy tylko poprawnie spopulowane strony (chroni przed brakiem dostępu lub usuniętymi relacjami) lub linki anchor
const headerNavItems = (headerData.navigation || []).map((item: any) => item.page).filter((page: any) => typeof page === 'object' && page !== null); 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); const footerNavItems = (footerData.navigation || []).map((item: any) => item.page).filter((page: any) => typeof page === 'object' && page !== null);
return ( return (
+50 -17
View File
@@ -52,14 +52,31 @@ export function Header({ navItems = [] }: { navItems?: any[] }) {
{/* Desktop Navigation */} {/* Desktop Navigation */}
<nav className="hidden xl:flex items-center gap-10"> <nav className="hidden xl:flex items-center gap-10">
{navItems.map((page, index) => ( {navItems.map((item, index) => {
<LocalizedLink if (item.page && item.page.slug) {
key={index} return (
page={page} <LocalizedLink
currentLocaleCode={currentLocale.code} key={index}
className="text-sm font-medium text-foreground/90 hover:text-accent transition-colors" 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> </nav>
{/* Right Actions & Hamburger */} {/* 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"> <nav className="flex flex-col gap-8 text-center w-full px-6">
{navItems.map((page, index) => ( {navItems.map((item, index) => {
<LocalizedLink if (item.page && item.page.slug) {
key={index} return (
page={page} <LocalizedLink
currentLocaleCode={currentLocale.code} key={index}
className="text-2xl font-bold text-foreground hover:text-accent transition-colors" page={item.page}
onClick={() => setIsMobileMenuOpen(false)} 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> </nav>
<div className="absolute bottom-12 left-0 right-0 px-6 flex flex-col items-center"> <div className="absolute bottom-12 left-0 right-0 px-6 flex flex-col items-center">
+5 -1
View File
@@ -14,7 +14,11 @@ export const Header: GlobalConfig = {
name: 'page', name: 'page',
type: 'relationship', type: 'relationship',
relationTo: 'pages', relationTo: 'pages',
required: true, required: false,
},
{
name: 'anchor',
type: 'text',
}, },
], ],
}, },
+3 -1
View File
@@ -989,7 +989,8 @@ export interface Header {
id: number; id: number;
navigation?: navigation?:
| { | {
page: number | Page; page?: (number | null) | Page;
anchor?: string | null;
id?: string | null; id?: string | null;
}[] }[]
| null; | null;
@@ -1214,6 +1215,7 @@ export interface HeaderSelect<T extends boolean = true> {
| T | T
| { | {
page?: T; page?: T;
anchor?: T;
id?: T; id?: T;
}; };
updatedAt?: T; updatedAt?: T;