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
+33 -5
View File
@@ -1,5 +1,6 @@
"use client"; "use client";
import { usePathname, useRouter } from "next/navigation";
import { ReactNode } from "react"; import { ReactNode } from "react";
interface SmoothLinkProps { interface SmoothLinkProps {
@@ -15,22 +16,49 @@ export default function SmoothLink({
className, className,
onClick, onClick,
}: SmoothLinkProps) { }: SmoothLinkProps) {
const pathname = usePathname();
const router = useRouter();
const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => { const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
e.preventDefault(); e.preventDefault();
const targetId = href.replace("#", ""); // Si on clique sur "/" (Accueil)
const element = document.getElementById(targetId); 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);
if (element) { if (element) {
element.scrollIntoView({ element.scrollIntoView({
behavior: "smooth", behavior: "smooth",
block: "start", block: "start",
}); });
} }
} else {
if (onClick) { // On est sur une autre page, naviguer vers l'accueil + ancre
onClick(); router.push(`/${href}`);
} }
onClick?.();
return;
}
// Sinon, navigation normale
router.push(href);
onClick?.();
}; };
return ( return (