یه منوی تودرتو که بخش‌هاش مثل شاخه‌های درخت باز و بسته می‌شن و خطِ مسیر تا گزینه‌ی انتخاب‌شده کشیده می‌شه.

"use client";

import BranchedMenu from "@/components/farsify/branched-menu";

export function DocsNav() {
  return (
    <BranchedMenu
      defaultOpen={[0, 1]}
      defaultActive="quick"
      accentColor="var(--color-brand)"
      items={[
        {
          label: "شروع کار",
          children: [
            { value: "install", label: "نصب" },
            { value: "quick", label: "شروع سریع" },
            { value: "config", label: "پیکربندی" },
          ],
        },
        {
          label: "کامپوننت‌ها",
          children: [
            { value: "buttons", label: "دکمه‌ها" },
            { value: "forms", label: "فرم‌ها" },
          ],
        },
      ]}
      onSelect={(value) => console.log(value)}
    />
  );
}

// بخشِ تک‌برگ — بدون فرزند، خودش یک گزینه است
<BranchedMenu
  items={[
    { label: "راهنما", value: "help" },
    { label: "درباره", value: "about" },
  ]}
  defaultActive="about"
/>