File name
Commit message
Commit date
File name
Commit message
Commit date
import Link from "next/link";
import type { ReactNode } from "react";
interface SidebarLinkProps {
href: string;
label: string;
icon?: ReactNode;
/** 활성 경로 판단은 호출부(feature)가 현재 라우트를 비교해 전달한다. */
isActive?: boolean;
/** SidebarGroup의 자식으로 렌더될 때 좌측 들여쓰기를 더한다. 기본 false(평탄 항목). */
isNested?: boolean;
}
/** 사이드바 내비게이션 항목. */
export function SidebarLink({
href,
label,
icon,
isActive = false,
isNested = false,
}: SidebarLinkProps) {
return (
<Link
href={href}
aria-current={isActive ? "page" : undefined}
className={`flex items-center gap-3 rounded-lg py-2 text-body-md ${
isNested ? "pl-9 pr-3" : "px-3"
} ${
isActive
? "bg-primary-container text-on-primary-container"
: "text-foreground-muted hover:bg-surface-muted hover:text-foreground"
}`}
>
{icon}
{/* min-w-0: flex 아이템 기본 min-width:auto가 truncate의 overflow-hidden을 무력화하는
문제 대응. 접힘 폭(md:w-16)에서 라벨이 글자 단위로 세로 줄바꿈되던 것을 방지한다
(한 줄 유지 + 말줄임) — 접힘 시 아이콘 전용 표시로 전환하는 것이 정식 해법이나
아이콘 자산이 없어 이번 범위에서는 다루지 않는다. */}
<span className="min-w-0 truncate">{label}</span>
</Link>
);
}