feat: improve navigation template (#238)

Co-authored-by: Claude <[email protected]>

Author: thedaviddias

apps/gallery/app/api/search-data/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from "next/server";
+import { getUniquePatterns, loadEntries } from "@/lib/loadEntries";
+
+export async function GET() {
+	try {
+		const entries = await loadEntries();
+		const patterns = getUniquePatterns(entries);
+
+		return NextResponse.json({
+			entries,
+			patterns,
+		});
+	} catch (error) {
+		console.error("Failed to load search data:", error);
+		return NextResponse.json(
+			{ error: "Failed to load search data" },
+			{ status: 500 },
+		);
+	}
+}

apps/gallery/app/layout.tsx

@@ -1,14 +1,16 @@
 import "@/app/global.css";
 
+import { HomeLayout } from "@ux-patterns/ui/components/custom/header";
 import { RootProvider } from "fumadocs-ui/provider";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import Link from "next/link";
 import PlausibleProvider from "next-plausible";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
-import { Header } from "@/components/common/header";
 import { KeyboardShortcuts } from "@/components/common/keyboard-shortcuts";
 import { FooterCopyright } from "@/components/footer/footer-copyright";
+import { HeaderSearchDialog } from "@/components/header/header-search-wrapper";
+import { baseOptions } from "@/lib/layout.shared";
 import { SearchProvider } from "@/lib/search-context";
 import { metadataSEO } from "./metadata";
 
@@ -45,12 +47,10 @@ export default function RootLayout({ children }: LayoutProps) {
 						<NuqsAdapter>
 							<SearchProvider>
 								<KeyboardShortcuts />
+								<HeaderSearchDialog />
 								<div className="min-h-screen bg-fd-background">
 									{/* Header */}
-									<Header />
-
-									{/* Main content */}
-									<main className="flex-1">{children}</main>
+									<HomeLayout {...baseOptions()}>{children}</HomeLayout>
 
 									{/* Footer */}
 									<footer className="bg-fd-card border-t border-fd-border mt-16">

apps/gallery/components/common/header.tsx

@@ -1,9 +1,89 @@
-import { getUniquePatterns, loadEntries } from "@/lib/loadEntries";
-import { HeaderSearch } from "./header-search";
+"use client";
 
-export async function HeaderSearchWrapper() {
-	const entries = await loadEntries();
-	const patterns = getUniquePatterns(entries);
+import { LargeSearchToggleBtn } from "@ux-patterns/ui/components/custom/search-button";
+import { SearchModal } from "@ux-patterns/ui/components/custom/search-modal";
+import { usePlausible } from "next-plausible";
+import { useEffect, useState } from "react";
+import { useSearch } from "@/lib/search-context";
+import { trackGallerySearch } from "@/lib/tracking";
+import type { Entry } from "@/lib/types";
 
-	return <HeaderSearch entries={entries} patterns={patterns} />;
+interface HeaderSearchWrapperProps {
+	entries: Entry[];
+	patterns: string[];
+}
+
+export function HeaderSearchWrapper({
+	entries,
+	patterns,
+}: HeaderSearchWrapperProps) {
+	const { isSearchOpen, openSearch, closeSearch } = useSearch();
+	const plausible = usePlausible();
+
+	const handleSearchClick = () => {
+		trackGallerySearch(plausible, "open");
+		openSearch();
+	};
+
+	return (
+		<>
+			<LargeSearchToggleBtn
+				onClick={handleSearchClick}
+				placeholder="Search..."
+			/>
+			<SearchModal
+				isOpen={isSearchOpen}
+				onClose={closeSearch}
+				entries={entries}
+				patterns={patterns}
+			/>
+		</>
+	);
+}
+
+// Client component that uses SearchProvider context
+export function HeaderSearchDialog() {
+	const [entries, setEntries] = useState<Entry[]>([]);
+	const [patterns, setPatterns] = useState<string[]>([]);
+	const [isLoading, setIsLoading] = useState(true);
+	const { isSearchOpen, openSearch, closeSearch } = useSearch();
+	const plausible = usePlausible();
+
+	useEffect(() => {
+		// Load data on the client side
+		const loadData = async () => {
+			try {
+				const response = await fetch("/api/search-data");
+				if (response.ok) {
+					const data = await response.json();
+					setEntries(data.entries);
+					setPatterns(data.patterns);
+				}
+			} catch (error) {
+				console.error("Failed to load search data:", error);
+			} finally {
+				setIsLoading(false);
+			}
+		};
+
+		loadData();
+	}, []);
+
+	const _handleSearchClick = () => {
+		trackGallerySearch(plausible, "open");
+		openSearch();
+	};
+
+	if (isLoading) {
+		return null; // Don't render anything while loading
+	}
+
+	return (
+		<SearchModal
+			isOpen={isSearchOpen}
+			onClose={closeSearch}
+			entries={entries}
+			patterns={patterns}
+		/>
+	);
 }

apps/gallery/components/header/header-search-wrapper.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { LargeSearchToggleBtn } from "@ux-patterns/ui/components/custom/search-button";
+import { usePlausible } from "next-plausible";
+import { useSearch } from "@/lib/search-context";
+import { trackGallerySearch } from "@/lib/tracking";
+
+export function SearchButton() {
+	const { openSearch } = useSearch();
+	const plausible = usePlausible();
+
+	const handleSearchClick = () => {
+		trackGallerySearch(plausible, "open");
+		openSearch();
+	};
+
+	return (
+		<LargeSearchToggleBtn onClick={handleSearchClick} placeholder="Search..." />
+	);
+}

apps/gallery/components/header/header-search.tsx

@@ -1,32 +1,76 @@
-import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
+import { SOCIAL_LINKS } from "@ux-patterns/constants/social";
+import { GitHubStarsWrapper } from "@ux-patterns/ui/components/custom/github-stars-wrapper";
+import type { HomeLayoutProps } from "@ux-patterns/ui/components/custom/header";
+import { ArrowUpRight } from "lucide-react";
+import Link from "next/link";
+import { SearchButton } from "@/components/header/search-button";
+import { GALLERY_TRACKING_EVENTS } from "./tracking";
 
 /**
  * Shared layout configurations
  *
- * you can customise layouts individually from:
- * Home Layout: app/(home)/layout.tsx
- * Docs Layout: app/docs/layout.tsx
  */
-export function baseOptions(): BaseLayoutProps {
+export function baseOptions(): HomeLayoutProps {
 	return {
+		wide: true,
 		nav: {
 			title: (
 				<>
-					<svg
-						width="24"
-						height="24"
-						xmlns="http://www.w3.org/2000/svg"
-						aria-label="Logo"
-						role="img"
-					>
-						<title>UX Patterns Gallery Logo</title>
-						<circle cx={12} cy={12} r={12} fill="currentColor" />
-					</svg>
-					My App
+					<div className="inline-flex items-center">
+						<Link
+							href="https://uxpatterns.dev"
+							className="hidden md:flex items-center gap-1 text-xl font-bold text-fd-muted-foreground hover:text-fd-primary transition-colors group"
+							title="Go to UX Patterns main site"
+						>
+							UX Patterns
+							<ArrowUpRight className="w-3 h-3" />
+						</Link>
+						<span className="hidden md:block mx-2 text-fd-muted-foreground">
+							/
+						</span>
+						<Link
+							href="/"
+							className="text-xl font-bold text-fd-primary hover:text-fd-primary/90 transition-colors"
+						>
+							Gallery
+						</Link>
+					</div>
 				</>
 			),
 		},
-		// see https://fumadocs.dev/docs/ui/navigation/links
-		links: [],
+		searchToggle: {
+			enabled: true,
+			components: {
+				lg: <SearchButton />,
+				sm: <SearchButton />,
+			},
+		},
+		githubStars: (
+			<GitHubStarsWrapper
+				variant="small"
+				asLink={true}
+				trackingEvent={GALLERY_TRACKING_EVENTS.GITHUB_STAR_CLICK}
+			/>
+		),
+		links: [
+			{
+				text: "Websites",
+				url: "/website",
+				active: "nested-url",
+			},
+			{
+				text: "Kit",
+				url: "https://kit.uxpatterns.dev",
+				external: false,
+			},
+			...SOCIAL_LINKS.map((social) => ({
+				type: "icon" as const,
+				label: social.label,
+				icon: social.icon,
+				text: social.label,
+				url: social.link,
+				external: true,
+			})),
+		],
 	};
 }

apps/gallery/components/header/search-button.tsx

@@ -1,4 +1,5 @@
-import { HomeLayout } from "fumadocs-ui/layouts/home";
+// import { HomeLayout } from "fumadocs-ui/layouts/home";
+import { HomeLayout } from "@ux-patterns/ui/components/custom/header";
 import { baseOptions } from "@/lib/layout.shared";
 
 export default function Layout({ children }: LayoutProps<"/">) {