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
+50 -17
View File
@@ -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">