SiteTreeNav

展開可能なカテゴリでドキュメントツリー全体を表示する、サイトマップ風のグリッドコンポーネント。

概要

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

ライブデモ

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

使い方

SiteTreeNavはsrc/pages/index.astroでホームページのサイトマップを表示するために使用されています：

---
import { buildNavTree, groupSatelliteNodes } from "@/utils/docs";
import { loadLocaleDocs } from "@/utils/locale-docs";
import SiteTreeNav from "@/components/site-tree-nav.tsx";
import { settings } from "@/config/settings";

const categoryOrder = settings.headerNav
  .map((n) => n.categoryMatch)
  .filter((v): v is string => !!v);
const { allDocs, categoryMeta } = await loadLocaleDocs("en");
const navDocs = allDocs.filter((doc) => !doc.data.unlisted);
const tree = buildNavTree(navDocs, "en", categoryMeta);
const groupedTree = groupSatelliteNodes(tree, categoryOrder);
---

<SiteTreeNav
  tree={groupedTree}
  categoryOrder={categoryOrder}
  categoryIgnore={["inbox"]}
  client:idle
/>

このコンポーネントは展開・折りたたみのインタラクティブ機能にReactステートを使用するため、client:idle（または他のAstroクライアントディレクティブ）が必要です。

プロップ

特徴

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

ソース

コンポーネントはsrc/components/site-tree-nav.tsxに定義されています。