## 概要

`SiteTreeNav`は、展開可能なカテゴリカードのレスポンシブグリッドでドキュメントツリー全体を表示するクライアントアイランドコンポーネントです。カテゴリの展開・折りたたみが可能な、サイトマップ形式のドキュメントページ一覧を提供します。

[Dynamic content unavailable in text export]

`SiteTreeNav`はMDXコンテンツで直接利用**できます**。グローバルMDXタグとして登録されているため、インポートなしで`<SiteTreeNav />`と書くだけで動作します。以下のライブデモで使用している`SiteTreeNavDemo`タグは、まったく同じ自己データ取得型のラッパーに解決されます。MDX内ではこの2つのタグ名は同じものとして使えます。

これは、`@takazudo/zudo-doc/site-tree-nav-island`から提供される、`tree`プロップを直接受け取る生の`SiteTreeNav`とは別のコンポーネントです。そちらは自身でデータを取得せず、すでに`tree`を持っているページモジュール向けです。両方の使い方は下記の[使い方](https://zudo-doc.takazudomodular.com/ja/docs/components/site-tree-nav#%E4%BD%BF%E3%81%84%E6%96%B9)を参照してください。



## ライブデモ

以下は`SiteTreeNav`でドキュメントツリー全体を表示した例です（[ホームページ](/)と同じ表示）：

[Dynamic content unavailable in text export]

## 使い方

### MDXコンテンツでの利用

`.mdx`ファイル内でグローバルMDXタグを直接使用します。インポートは不要です：

```mdx
<SiteTreeNav />
```

プロップは不要です。現在のロケールのドキュメントコレクションを自身で取得し、ナビゲーションツリーを構築して、インタラクティブなアイランドをレンダリングします — 上記の`SiteTreeNavDemo`と同じラッパーが使用されます。

ツリーから非表示にするカテゴリは、`zfb.config.ts` の [`siteTreeNavIgnore`](https://zudo-doc.takazudomodular.com/ja/docs/guides/configuration#%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8-sitetreenavignore) で設定します。[`siteTreeNavSecondary`](https://zudo-doc.takazudomodular.com/ja/docs/guides/configuration#%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8-sitetreenavsecondary) はホームページ専用の設定で、このコンポーネントには適用されません。そこに指定したカテゴリも、このコンポーネントのツリーにはそのまま表示されます。

### ページモジュールでの利用

すでに`tree`を持っているページモジュール（例：`buildNavTree` + `groupSatelliteNodes`で構築済み）では、代わりに`tree`プロップを直接受け取る生のコンポーネントをインポートできます：

```tsx
import { SiteTreeNav } from "@takazudo/zudo-doc/site-tree-nav-island";

export default function IndexPage() {
  return (
    <SiteTreeNav
      tree={tree}
      categoryOrder={categoryOrder}
      categoryIgnore={["inbox", "develop"]}
    />
  );
}
```

生のアイランドの `categoryIgnore` プロップは、サイト全体の [`siteTreeNavIgnore`](https://zudo-doc.takazudomodular.com/ja/docs/guides/configuration#%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8-sitetreenavignore) 設定に相当する呼び出し単位の指定です。パッケージのホームページと MDX タグは、ここにその設定を渡します。

このリポジトリ自体のホームページ（`pages/index.tsx`）は、このアイランドを直接呼び出していません。解決済みのロケールを`prepareHomeData()`に渡し、その結果を`HomePageView`（どちらも`@takazudo/zudo-doc/home-page`から提供）に渡しています。`HomePageView`はヒーローセクションやタグセクションと一緒に、内部で`SiteTreeNav`をレンダリングします。

このコンポーネントは展開・折りたたみのインタラクティブ機能にシグナルを使用するため、zfbのアイランドランタイムを介してクライアントでハイドレートされます。

## プロップ

以下のプロップは、生の`SiteTreeNav`アイランド（`@takazudo/zudo-doc/site-tree-nav-island`）に対するものです。MDXタグはデータプロップを一切受け取らず、現在のロケールに対して`tree`/`categoryOrder`を自身で解決し、任意の`ariaLabel`のみを転送します。

| プロップ | 型 | デフォルト | 説明 |
|------|------|---------|-------------|
| `tree` | `NavNode[]` | （必須） | コンテンツコレクションから構築されたナビゲーションツリー |
| `categoryOrder` | `string[]` | — | トップレベルカテゴリのカスタム並び順 |
| `categoryIgnore` | `string[]` | — | ツリーから非表示にするカテゴリスラッグ（パッケージのホームページと MDX タグはここに `siteTreeNavIgnore` を渡します） |
| `initiallyCollapsedCategorySlugs` | `string[]` | — | 初期状態で折りたたんでおくルートカテゴリのスラッグ |
| `ariaLabel` | `string` | `"Site index"` | nav要素のアクセシビリティラベル |

## 特徴

- **レスポンシブグリッドレイアウト** — `repeat(auto-fill, minmax(min(18rem, 100%), 1fr))`により、モバイルの1カラムからワイドスクリーンの複数カラムまで適応
- **展開可能なカテゴリ** — 各カテゴリカードは折りたたみ可能で、デフォルトでは開いた状態
- **階層的なツリー構造** — ネストされたページはインデントとコネクタラインでツリー構造を表示
- **カテゴリリンク** — トップレベルカテゴリは矢印アイコンとインデックスページへのリンクを表示
- **リーフページ** — 個別のドキュメントページはクリック可能なリンクとして表示

## ソース

`SiteTreeNav`は`@takazudo/zudo-doc`パッケージから提供されています。ページモジュールで使う場合は、生のアイランドを`@takazudo/zudo-doc/site-tree-nav-island`からインポートしてください。（このリポジトリ内では、アイランドのソースは`packages/zudo-doc/src/site-tree-nav-island/`にあります。）`<SiteTreeNav />` / `<SiteTreeNavDemo />`のMDXタグは、パッケージ所有のルート（`packageOwnedRoutes`、デフォルトで有効）によって自動的に組み込まれており、プロジェクト側で管理するファイルはありません。