kofi-stack-template-generator 2.1.37 → 2.1.38

package/templates/marketing/payload/src/Header/Component.client.tsx

@@ -0,0 +1,94 @@
+"use client"
+import { useHeaderTheme } from "@/providers/HeaderTheme"
+import Link from "next/link"
+import type React from "react"
+import { useEffect, useMemo, useState } from "react"
+
+import type { Header, Page, Post } from "@/payload-types"
+
+import { Logo } from "@/components/Logo/Logo"
+import { Button } from "@/components/ui/button"
+import { MobileMenu } from "./MobileMenu"
+import { HeaderNav } from "./Nav"
+
+interface HeaderClientProps {
+	data: Header
+}
+
+// Helper to get href from link data
+const getLinkHref = (link: {
+	type?: "custom" | "reference" | null
+	reference?: {
+		relationTo: "pages" | "posts"
+		value: Page | Post | string | number
+	} | null
+	url?: string | null
+}): string => {
+	if (link.type === "reference" && link.reference) {
+		const { relationTo, value } = link.reference
+		if (typeof value === "object" && value.slug) {
+			return relationTo === "pages" ? `/${value.slug}` : `/${relationTo}/${value.slug}`
+		}
+	}
+	return link.url || "#"
+}
+
+export const HeaderClient: React.FC<HeaderClientProps> = ({ data }) => {
+	/* Storing the value in a useState to avoid hydration errors */
+	const [theme, setTheme] = useState<string | null>(null)
+	const { headerTheme, setHeaderTheme } = useHeaderTheme()
+
+	useEffect(() => {
+		setHeaderTheme(null)
+	}, [setHeaderTheme])
+
+	useEffect(() => {
+		if (headerTheme && headerTheme !== theme) setTheme(headerTheme)
+	}, [headerTheme, theme])
+
+	// Get the primary CTA (first right-positioned button item) for mobile view
+	const primaryCta = useMemo(() => {
+		const rightButtonItems = data?.navItems?.filter(
+			(item) =>
+				(item.position || "left") === "right" &&
+				item.type === "link" &&
+				(item.appearance || "button") === "button",
+		)
+		return rightButtonItems?.[0]
+	}, [data?.navItems])
+
+	return (
+		<header
+			className="sticky top-0 z-20 border-b border-border bg-background"
+			{...(theme ? { "data-theme": theme } : {})}
+		>
+			<div className="container mx-auto px-4 h-16 flex justify-between items-center">
+				{/* Left section: Logo + Left Nav Links */}
+				<div className="flex items-center gap-8">
+					<Link href="/" className="flex items-center gap-2">
+						<Logo loading="eager" priority="high" variant="auto" />
+						<span className="text-xl font-semibold hidden sm:inline">DirectoryHub</span>
+					</Link>
+					{/* Left nav - hidden on tablet and below, visible on desktop */}
+					<HeaderNav data={data} position="left" className="hidden lg:flex gap-6 items-center" />
+				</div>
+
+				{/* Right section: Right Nav Links (CTAs) */}
+				<div className="flex items-center gap-3">
+					{/* Full right nav - hidden on mobile and tablet, visible on desktop */}
+					<HeaderNav data={data} position="right" className="hidden lg:flex gap-4 items-center" />
+
+					{/* Primary CTA for tablet/mobile - visible on tablet and below, hidden on desktop */}
+					{primaryCta?.link && (
+						<Button asChild className="lg:hidden" size="sm">
+							<Link href={getLinkHref(primaryCta.link)}>{primaryCta.label}</Link>
+						</Button>
+					)}
+
+					{/* Mobile menu hamburger - visible on tablet and below */}
+					<MobileMenu data={data} />
+				</div>
+			</div>
+		</header>
+	)
+}

package/templates/marketing/payload/src/Header/Component.tsx

@@ -0,0 +1,10 @@
+import { getCachedGlobal } from "@/utilities/getGlobals"
+import { HeaderClient } from "./Component.client"
+
+import type { Header as HeaderType } from "@/payload-types"
+
+export async function Header() {
+	const headerData: HeaderType = await getCachedGlobal("header", 1)()
+
+	return <HeaderClient data={headerData} />
+}

package/templates/marketing/payload/src/Header/MegaMenu/index.tsx

@@ -0,0 +1,197 @@
+"use client"
+
+import { Media } from "@/components/Media"
+import { cn } from "@/utilities/ui"
+import {
+	BarChart3,
+	Building,
+	ChevronDown,
+	Database,
+	DollarSign,
+	Globe,
+	Layers,
+	Layout,
+	type LucideIcon,
+	Rocket,
+	Search,
+	Settings,
+	Shield,
+	Store,
+	Target,
+	Users,
+	Zap,
+} from "lucide-react"
+import Link from "next/link"
+import type React from "react"
+import { useState } from "react"
+
+import type { Header, Media as MediaType, Page, Post } from "@/payload-types"
+
+type NavItem = NonNullable<Header["navItems"]>[number]
+
+const iconMap: Record<string, LucideIcon> = {
+	layout: Layout,
+	dollarSign: DollarSign,
+	search: Search,
+	settings: Settings,
+	zap: Zap,
+	layers: Layers,
+	users: Users,
+	building: Building,
+	globe: Globe,
+	store: Store,
+	rocket: Rocket,
+	target: Target,
+	barChart: BarChart3,
+	shield: Shield,
+	database: Database,
+}
+
+// Helper to get href from link data
+const getLinkHref = (link: {
+	type?: "custom" | "reference" | null
+	reference?: {
+		relationTo: "pages" | "posts"
+		value: Page | Post | string | number
+	} | null
+	url?: string | null
+}): string => {
+	if (link.type === "reference" && link.reference) {
+		const { relationTo, value } = link.reference
+		if (typeof value === "object" && value.slug) {
+			return relationTo === "pages" ? `/${value.slug}` : `/${relationTo}/${value.slug}`
+		}
+	}
+	return link.url || "#"
+}
+
+interface MegaMenuProps {
+	item: NavItem
+}
+
+export const MegaMenu: React.FC<MegaMenuProps> = ({ item }) => {
+	const [isOpen, setIsOpen] = useState(false)
+
+	const columns = item.megaMenuColumns || []
+	const featuredItem = item.featuredItem
+
+	return (
+		<div
+			className="relative"
+			onMouseEnter={() => setIsOpen(true)}
+			onMouseLeave={() => setIsOpen(false)}
+		>
+			{/* Trigger */}
+			<button
+				type="button"
+				className={cn(
+					"flex items-center gap-1 text-sm font-medium transition-colors hover:text-primary",
+					isOpen && "text-primary",
+				)}
+				onClick={() => setIsOpen(!isOpen)}
+			>
+				{item.label}
+				<ChevronDown
+					className={cn("h-4 w-4 transition-transform duration-200", isOpen && "rotate-180")}
+				/>
+			</button>
+
+			{/* Dropdown */}
+			{isOpen && (
+				<div className="absolute left-1/2 -translate-x-1/2 top-full pt-4 z-50">
+					<div
+						className={cn(
+							"bg-background border border-border rounded-xl shadow-xl overflow-hidden",
+							"animate-in fade-in-0 zoom-in-95 duration-200",
+							featuredItem?.enabled ? "min-w-[700px]" : "min-w-[500px]",
+						)}
+					>
+						<div className="flex">
+							{/* Menu Columns */}
+							<div className={cn("flex-1 p-6", columns.length > 1 ? "grid grid-cols-2 gap-8" : "")}>
+								{columns.map((column) => (
+									<div key={column.columnLabel || "column"}>
+										{column.columnLabel && (
+											<div className="mb-4">
+												<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+													{column.columnLabel}
+												</h3>
+												{column.columnDescription && (
+													<p className="text-xs text-muted-foreground mt-1">
+														{column.columnDescription}
+													</p>
+												)}
+											</div>
+										)}
+										<ul className="space-y-1">
+											{column.items?.map((menuItem) => {
+												const Icon =
+													menuItem.icon && menuItem.icon !== "none" ? iconMap[menuItem.icon] : null
+												const href = menuItem.link ? getLinkHref(menuItem.link) : "#"
+
+												return (
+													<li key={menuItem.label}>
+														<Link
+															href={href}
+															className="flex items-start gap-3 p-2 rounded-lg hover:bg-muted transition-colors group"
+															onClick={() => setIsOpen(false)}
+														>
+															{Icon && (
+																<div className="flex-shrink-0 w-9 h-9 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
+																	<Icon className="w-4 h-4 text-primary" />
+																</div>
+															)}
+															<div className="flex-1 min-w-0">
+																<div className="text-sm font-medium group-hover:text-primary transition-colors">
+																	{menuItem.label}
+																</div>
+																{menuItem.description && (
+																	<div className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
+																		{menuItem.description}
+																	</div>
+																)}
+															</div>
+														</Link>
+													</li>
+												)
+											})}
+										</ul>
+									</div>
+								))}
+							</div>
+
+							{/* Featured Section */}
+							{featuredItem?.enabled && (
+								<div className="w-64 bg-muted/50 p-6 border-l border-border">
+									{featuredItem.image && typeof featuredItem.image === "object" && (
+										<div className="rounded-lg overflow-hidden mb-4 aspect-video">
+											<Media
+												resource={featuredItem.image as MediaType}
+												imgClassName="w-full h-full object-cover"
+											/>
+										</div>
+									)}
+									{featuredItem.heading && (
+										<h4 className="font-semibold text-sm mb-2">{featuredItem.heading}</h4>
+									)}
+									{featuredItem.description && (
+										<p className="text-xs text-muted-foreground mb-4">{featuredItem.description}</p>
+									)}
+									{featuredItem.link && (
+										<Link
+											href={getLinkHref(featuredItem.link)}
+											className="text-xs font-medium text-primary hover:underline"
+											onClick={() => setIsOpen(false)}
+										>
+											{featuredItem.link.label || "Learn more"} →
+										</Link>
+									)}
+								</div>
+							)}
+						</div>
+					</div>
+				</div>
+			)}
+		</div>
+	)
+}

package/templates/marketing/payload/src/Header/MobileMenu/HamburgerIcon.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import { cn } from "@/utilities/ui"
+import type React from "react"
+
+interface HamburgerIconProps {
+	isOpen: boolean
+	onClick: () => void
+	className?: string
+}
+
+/**
+ * Animated 2-line hamburger icon that morphs into an X when open
+ */
+export const HamburgerIcon: React.FC<HamburgerIconProps> = ({ isOpen, onClick, className }) => {
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			className={cn(
+				"relative w-8 h-8 flex items-center justify-center focus:outline-none",
+				"lg:hidden", // Only show on tablet and below
+				className,
+			)}
+			aria-label={isOpen ? "Close menu" : "Open menu"}
+			aria-expanded={isOpen}
+		>
+			<div className="relative w-6 h-4 flex flex-col justify-between">
+				{/* Top line */}
+				<span
+					className={cn(
+						"absolute left-0 w-full h-0.5 bg-foreground rounded-full",
+						"transition-all duration-300 ease-in-out origin-center",
+						isOpen ? "top-1/2 -translate-y-1/2 rotate-45" : "top-0 translate-y-0 rotate-0",
+					)}
+				/>
+				{/* Bottom line */}
+				<span
+					className={cn(
+						"absolute left-0 w-full h-0.5 bg-foreground rounded-full",
+						"transition-all duration-300 ease-in-out origin-center",
+						isOpen ? "top-1/2 -translate-y-1/2 -rotate-45" : "bottom-0 translate-y-0 rotate-0",
+					)}
+				/>
+			</div>
+		</button>
+	)
+}

package/templates/marketing/payload/src/Header/MobileMenu/index.tsx

@@ -0,0 +1,299 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { cn } from "@/utilities/ui"
+import {
+	BarChart3,
+	Building,
+	ChevronRight,
+	Database,
+	DollarSign,
+	Globe,
+	Layers,
+	Layout,
+	type LucideIcon,
+	Rocket,
+	Search,
+	Settings,
+	Shield,
+	Store,
+	Target,
+	Users,
+	Zap,
+} from "lucide-react"
+import Link from "next/link"
+import type React from "react"
+import { useEffect, useState } from "react"
+
+import type { Header, Page, Post } from "@/payload-types"
+import { HamburgerIcon } from "./HamburgerIcon"
+
+const iconMap: Record<string, LucideIcon> = {
+	layout: Layout,
+	dollarSign: DollarSign,
+	search: Search,
+	settings: Settings,
+	zap: Zap,
+	layers: Layers,
+	users: Users,
+	building: Building,
+	globe: Globe,
+	store: Store,
+	rocket: Rocket,
+	target: Target,
+	barChart: BarChart3,
+	shield: Shield,
+	database: Database,
+}
+
+// Helper to get href from link data
+const getLinkHref = (link: {
+	type?: "custom" | "reference" | null
+	reference?: {
+		relationTo: "pages" | "posts"
+		value: Page | Post | string | number
+	} | null
+	url?: string | null
+}): string => {
+	if (link.type === "reference" && link.reference) {
+		const { relationTo, value } = link.reference
+		if (typeof value === "object" && value.slug) {
+			return relationTo === "pages" ? `/${value.slug}` : `/${relationTo}/${value.slug}`
+		}
+	}
+	return link.url || "#"
+}
+
+interface MobileMenuProps {
+	data: Header
+}
+
+export const MobileMenu: React.FC<MobileMenuProps> = ({ data }) => {
+	const [isOpen, setIsOpen] = useState(false)
+	const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set())
+
+	const navItems = data?.navItems || []
+	const leftItems = navItems.filter((item) => (item.position || "left") === "left")
+	const rightItems = navItems.filter((item) => (item.position || "left") === "right")
+
+	// Separate CTA items (typically the primary action buttons)
+	const ctaItems = rightItems.filter((item) => item.type === "link")
+
+	// Prevent body scroll when menu is open
+	useEffect(() => {
+		if (isOpen) {
+			document.body.style.overflow = "hidden"
+		} else {
+			document.body.style.overflow = ""
+		}
+		return () => {
+			document.body.style.overflow = ""
+		}
+	}, [isOpen])
+
+	const toggleExpanded = (id: string) => {
+		setExpandedItems((prev) => {
+			const next = new Set(prev)
+			if (next.has(id)) {
+				next.delete(id)
+			} else {
+				next.add(id)
+			}
+			return next
+		})
+	}
+
+	const closeMenu = () => {
+		setIsOpen(false)
+		setExpandedItems(new Set())
+	}
+
+	return (
+		<>
+			{/* Hamburger button - visible on tablet and below */}
+			<HamburgerIcon isOpen={isOpen} onClick={() => setIsOpen(!isOpen)} />
+
+			{/* Mobile menu overlay */}
+			<div
+				className={cn(
+					"fixed inset-0 z-50 lg:hidden",
+					"transition-opacity duration-300",
+					isOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none",
+				)}
+			>
+				{/* Backdrop */}
+				<div
+					className="absolute inset-0 bg-background/80 backdrop-blur-sm"
+					onClick={closeMenu}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault()
+							closeMenu()
+						}
+					}}
+					role="button"
+					tabIndex={0}
+					aria-label="Close menu"
+				/>
+
+				{/* Menu panel */}
+				<div
+					className={cn(
+						"absolute top-0 right-0 h-full w-full max-w-md bg-background border-l border-border",
+						"flex flex-col",
+						"transition-transform duration-300 ease-out",
+						isOpen ? "translate-x-0" : "translate-x-full",
+					)}
+				>
+					{/* Header with close button */}
+					<div className="flex items-center justify-between p-4 border-b border-border">
+						<Link href="/" onClick={closeMenu} className="text-xl font-semibold">
+							DirectoryHub
+						</Link>
+						<HamburgerIcon isOpen={isOpen} onClick={closeMenu} className="lg:block" />
+					</div>
+
+					{/* Nav items */}
+					<div className="flex-1 overflow-y-auto p-4">
+						<nav className="space-y-1">
+							{leftItems.map((item, index) => {
+								const itemId = item.id || `item-${index}`
+								const isExpanded = expandedItems.has(itemId)
+								const hasMegaMenu = item.type === "megaMenu"
+
+								if (hasMegaMenu) {
+									return (
+										<div key={itemId}>
+											{/* Expandable item */}
+											<button
+												type="button"
+												onClick={() => toggleExpanded(itemId)}
+												className={cn(
+													"w-full flex items-center justify-between py-4 text-lg font-medium",
+													"border-b border-border/50 transition-colors hover:text-primary",
+												)}
+											>
+												<span>{item.label}</span>
+												<ChevronRight
+													className={cn(
+														"w-5 h-5 transition-transform duration-200",
+														isExpanded && "rotate-90",
+													)}
+												/>
+											</button>
+
+											{/* Expanded content */}
+											<div
+												className={cn(
+													"overflow-hidden transition-all duration-300",
+													isExpanded ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0",
+												)}
+											>
+												<div className="py-2 pl-4 space-y-4">
+													{item.megaMenuColumns?.map((column, colIndex) => (
+														<div key={column.columnLabel || `col-${colIndex}`}>
+															{column.columnLabel && (
+																<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">
+																	{column.columnLabel}
+																</p>
+															)}
+															<ul className="space-y-1">
+																{column.items?.map((menuItem) => {
+																	const Icon =
+																		menuItem.icon && menuItem.icon !== "none"
+																			? iconMap[menuItem.icon]
+																			: null
+																	const href = menuItem.link ? getLinkHref(menuItem.link) : "#"
+
+																	return (
+																		<li key={menuItem.label}>
+																			<Link
+																				href={href}
+																				onClick={closeMenu}
+																				className="flex items-center gap-3 py-2 text-sm hover:text-primary transition-colors"
+																			>
+																				{Icon && <Icon className="w-4 h-4 text-muted-foreground" />}
+																				<span>{menuItem.label}</span>
+																			</Link>
+																		</li>
+																	)
+																})}
+															</ul>
+														</div>
+													))}
+												</div>
+											</div>
+										</div>
+									)
+								}
+
+								// Simple link item
+								const link = item.link
+								if (!link) return null
+								const href = getLinkHref(link)
+
+								return (
+									<Link
+										key={itemId}
+										href={href}
+										onClick={closeMenu}
+										className={cn(
+											"block py-4 text-lg font-medium",
+											"border-b border-border/50 transition-colors hover:text-primary",
+										)}
+									>
+										{item.label}
+									</Link>
+								)
+							})}
+						</nav>
+					</div>
+
+					{/* Bottom CTA section */}
+					<div className="p-4 border-t border-border space-y-3">
+						{ctaItems.map((item, index) => {
+							const link = item.link
+							if (!link) return null
+							const href = getLinkHref(link)
+							const itemAppearance = item.appearance || "button"
+							const isButton = itemAppearance === "button"
+
+							if (isButton) {
+								// First button item is primary (filled), others are outline
+								const buttonItems = ctaItems.filter((i) => (i.appearance || "button") === "button")
+								const buttonIndex = buttonItems.findIndex((i) => i.id === item.id)
+								const isPrimary = buttonIndex === 0
+
+								return (
+									<Button
+										key={item.id || `cta-${index}`}
+										asChild
+										variant={isPrimary ? "default" : "outline"}
+										className="w-full"
+										size="lg"
+									>
+										<Link href={href} onClick={closeMenu}>
+											{item.label}
+										</Link>
+									</Button>
+								)
+							}
+
+							// Link appearance - render as text link
+							return (
+								<Link
+									key={item.id || `cta-${index}`}
+									href={href}
+									onClick={closeMenu}
+									className="block w-full text-center py-3 text-sm font-medium hover:text-primary transition-colors"
+								>
+									{item.label}
+								</Link>
+							)
+						})}
+					</div>
+				</div>
+			</div>
+		</>
+	)
+}