Jessy/jessy-david.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Merged
jessy-david-dev merged 1 commits from dev into main 2026-01-27 17:27:47 +00:00
Conversation 1 Commits 1 Files Changed 1
+53 -25
1 changed files with 53 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 7cd5a22964 - Show all commits
component/ui/SmoothLink.tsx
+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?.();
copilot-pull-request-reviewer[bot] commented 2026-01-27 17:30:30 +00:00 (Migrated from github.com)
Review
Copy Link
Copy Source

handleClick calls e.preventDefault() unconditionally, which breaks standard link behaviors like Cmd/Ctrl+click or middle-click to open in a new tab/window (and can interfere with keyboard accessibility expectations). Consider only preventing default for same-page smooth-scroll cases, and early-return to let the browser handle modified clicks (e.g., e.metaKey, e.ctrlKey, e.shiftKey, e.altKey, or e.button !== 0).

  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    // Allow default browser behavior for modified clicks or non-left clicks
    if (
      e.defaultPrevented ||
      e.button !== 0 ||
      e.metaKey ||
      e.ctrlKey ||
      e.shiftKey ||
      e.altKey
    ) {
      return;
    }
`handleClick` calls `e.preventDefault()` unconditionally, which breaks standard link behaviors like Cmd/Ctrl+click or middle-click to open in a new tab/window (and can interfere with keyboard accessibility expectations). Consider only preventing default for same-page smooth-scroll cases, and early-return to let the browser handle modified clicks (e.g., `e.metaKey`, `e.ctrlKey`, `e.shiftKey`, `e.altKey`, or `e.button !== 0`). ```suggestion const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => { // Allow default browser behavior for modified clicks or non-left clicks if ( e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) { return; } ```
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>
); );
} }