96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter, usePathname } from "next/navigation";
|
|
import { ReadingSettings } from "@/components/reading-settings";
|
|
import { HeaderSearchButton } from "@/components/header-search";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const SEARCH_RETURN_KEY = "spsays_from_search";
|
|
|
|
export function PageHeader({
|
|
children,
|
|
sticky = false,
|
|
className,
|
|
}: {
|
|
children: React.ReactNode;
|
|
sticky?: boolean;
|
|
className?: string;
|
|
}) {
|
|
const [searchExpanded, setSearchExpanded] = useState(false);
|
|
const router = useRouter();
|
|
const pathname = usePathname();
|
|
|
|
// Read (and consume) the search-return flag once on first render.
|
|
// The lazy initialiser runs exactly once; on the server
|
|
// (typeof window === "undefined") it returns false.
|
|
const [fromSearch, setFromSearch] = useState(() => {
|
|
if (typeof window === "undefined") return false;
|
|
try {
|
|
if (
|
|
sessionStorage.getItem(SEARCH_RETURN_KEY) === "1" &&
|
|
!pathname.startsWith("/search")
|
|
) {
|
|
sessionStorage.removeItem(SEARCH_RETURN_KEY);
|
|
return true;
|
|
}
|
|
} catch {
|
|
// sessionStorage unavailable
|
|
}
|
|
return false;
|
|
});
|
|
|
|
return (
|
|
<header
|
|
className={cn(
|
|
"border-b border-border bg-card px-6",
|
|
sticky ? "py-4 sticky top-0 z-20" : "py-4",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="max-w-5xl mx-auto flex items-start justify-between gap-4">
|
|
{/* Title / logo area — hidden on mobile when search is active */}
|
|
<div
|
|
className={cn("flex-1 min-w-0", searchExpanded && "max-md:hidden")}
|
|
>
|
|
{fromSearch ? (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setFromSearch(false);
|
|
router.back();
|
|
}}
|
|
className="block text-sm text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
← Back to search results
|
|
</button>
|
|
{/* Hide the page's own breadcrumb link (always the first <a>) */}
|
|
<div className="[&>a:first-child]:hidden">{children}</div>
|
|
</>
|
|
) : (
|
|
children
|
|
)}
|
|
</div>
|
|
|
|
{/* Actions — expands to fill width on mobile when search is active */}
|
|
<div
|
|
className={cn(
|
|
"shrink-0 pt-1 flex items-center gap-1.5",
|
|
searchExpanded && "max-md:flex-1 max-md:min-w-0",
|
|
)}
|
|
>
|
|
<HeaderSearchButton
|
|
expanded={searchExpanded}
|
|
onExpandedChange={setSearchExpanded}
|
|
/>
|
|
{/* Hide reading settings on mobile when search is active */}
|
|
<div className={cn(searchExpanded && "max-md:hidden")}>
|
|
<ReadingSettings />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|