Commit @5da61f3327230e004d56d3daa830ada241e4949e

임동욱 08-10

feat: 사이드바 링크에 중첩 들여쓰기 옵션 추가

SidebarGroup(예정)의 자식으로 렌더될 때 좌측 들여쓰기를 주는 isNested prop을
추가한다. 기본 false로 기존 평탄 항목 렌더링은 변경 없음.

Co-Authored-By: Claude Opus 5

@5da61f3327230e004d56d3daa830ada241e4949e

bc26380

5da61f3

components/ui/sidebar-link.tsx

--- components/ui/sidebar-link.tsx

+++ components/ui/sidebar-link.tsx


   icon?: ReactNode;
   /** 활성 경로 판단은 호출부(feature)가 현재 라우트를 비교해 전달한다. */
   isActive?: boolean;
+  /** SidebarGroup의 자식으로 렌더될 때 좌측 들여쓰기를 더한다. 기본 false(평탄 항목). */
+  isNested?: boolean;
 }
 
 /** 사이드바 내비게이션 항목. */
-export function SidebarLink({ href, label, icon, isActive = false }: SidebarLinkProps) {
+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 px-3 py-2 text-body-md ${
+      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"

Add a comment

Open 0
Closed 0

List

Delete comment