ナビゲーションのレンダリング

Methanol は、ctx.pagesTree を通じて階層化されたナビゲーションツリーを提供します。このデータは、現在のナビゲーションルート（isRoot）に基づいて自動的にスコープされ、hidden や exclude などのルールが適用されています。

ツリーの各ノードは以下の構造を持ちます。

{
	type: 'page' | 'directory',
	title: '...',
	name: '...',
	routePath: '/guide/',
	routeHref: '/docs/guide/', // ベースパス対応 URL
	children: []
}

サイドバーの実装

以下は、再帰的なサイドバーコンポーネントの実装例です。

const NavTree = ({ nodes, currentHref }) => (
	<ul>
		{(nodes || []).map((node) => {
			const label = node.title || node.name || node.routePath
			if (node.type === 'directory') {
				return (
					<li>
						{node.routeHref ? <a href={node.routeHref}>{label}</a> : <span>{label}</span>}
						{node.children?.length ? <NavTree nodes={node.children} currentHref={currentHref} /> : null}
					</li>
				)
			}
			const isActive = node.routeHref === currentHref
			return (
				<li>
					<a href={node.routeHref} aria-current={isActive ? 'page' : null}>
						{label}
					</a>
				</li>
			)
		})}
	</ul>
)

export default function PageTemplate({ PageContent, ExtraHead, ctx }) {
	return (
		<>
			<html>
				<head>
					<ExtraHead />
				</head>
				<body>
					<aside>
						<NavTree nodes={ctx.pagesTree} currentHref={ctx.page.routeHref} />
					</aside>
					<main>
						<PageContent />
					</main>
				</body>
			</html>
		</>
	)
}

実装のアドバイス