48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
'use client'
|
||
|
||
import { useAuthStore } from '@/lib/store/authStore'
|
||
import { buildTree, type TreeNode } from './Sidebar'
|
||
|
||
function findTrail(nodes: TreeNode[], targetMenuNo: string | null): TreeNode[] {
|
||
if (!targetMenuNo) return []
|
||
for (const node of nodes) {
|
||
if (node.menuNo === targetMenuNo) return [node]
|
||
const childTrail = findTrail(node.children, targetMenuNo)
|
||
if (childTrail.length > 0) return [node, ...childTrail]
|
||
}
|
||
return []
|
||
}
|
||
|
||
export function Breadcrumb() {
|
||
const menuList = useAuthStore((s) => s.menuList)
|
||
const selectedMenuNo = useAuthStore((s) => s.selectedMenuNo)
|
||
|
||
const tree = buildTree(menuList)
|
||
const trail = findTrail(tree, selectedMenuNo)
|
||
|
||
if (trail.length === 0) return null
|
||
|
||
const current = trail[trail.length - 1]
|
||
|
||
return (
|
||
<div className="bg-white border-b px-6 py-2.5 flex items-center gap-3 shrink-0">
|
||
<h1 className="text-sm font-semibold text-gray-800">{current.menuNm}</h1>
|
||
{trail.length > 1 && (
|
||
<>
|
||
<span className="text-gray-200">|</span>
|
||
<nav className="flex items-center gap-1 text-xs text-gray-400">
|
||
{trail.map((item, i) => (
|
||
<span key={item.menuNo} className="flex items-center gap-1">
|
||
{i > 0 && <span className="text-gray-300">›</span>}
|
||
<span className={i === trail.length - 1 ? 'text-blue-600 font-medium' : ''}>
|
||
{item.menuNm}
|
||
</span>
|
||
</span>
|
||
))}
|
||
</nav>
|
||
</>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|