fix(nav): handle navigation from other pages in SmoothLink

This commit is contained in:
jessy-david-dev
2026-01-27 18:26:49 +01:00
parent d23081d69d
commit 7cd5a22964
+53 -25
View File
@@ -1,41 +1,69 @@
"use client"; "use client";
import { usePathname, useRouter } from "next/navigation";
import { ReactNode } from "react"; import { ReactNode } from "react";
interface SmoothLinkProps { interface SmoothLinkProps {
href: string; href: string;
children: ReactNode; children: ReactNode;
className?: string; className?: string;
onClick?: () => void; onClick?: () => void;
} }
export default function SmoothLink({ export default function SmoothLink({
href, href,
children, children,
className, className,
onClick, onClick,
}: SmoothLinkProps) { }: SmoothLinkProps) {
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => { const pathname = usePathname();
e.preventDefault(); const router = useRouter();
const targetId = href.replace("#", ""); const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
e.preventDefault();
// Si on clique sur "/" (Accueil)
if (href === "/") {
if (pathname === "/") {
// On est déjà sur l'accueil, scroll vers le haut
window.scrollTo({ top: 0, behavior: "smooth" });
} else {
// On est sur une autre page, naviguer vers l'accueil
router.push("/");
}
onClick?.();
return;
}
// Si c'est une ancre (#section)
if (href.startsWith("#")) {
const targetId = href.replace("#", "");
if (pathname === "/") {
// On est sur l'accueil, smooth scroll vers la section
const element = document.getElementById(targetId); const element = document.getElementById(targetId);
if (element) { if (element) {
element.scrollIntoView({ element.scrollIntoView({
behavior: "smooth", behavior: "smooth",
block: "start", block: "start",
}); });
} }
} else {
// On est sur une autre page, naviguer vers l'accueil + ancre
router.push(`/${href}`);
}
onClick?.();
return;
}
if (onClick) { // Sinon, navigation normale
onClick(); router.push(href);
} onClick?.();
}; };
return ( return (
<a href={href} onClick={handleClick} className={className}> <a href={href} onClick={handleClick} className={className}>
{children} {children}
</a> </a>
); );
} }