Zenn
Open1

starlight サイドバーを全部閉じる

Astro
#
starlight
まめせぶんまめせぶん

astro starlight のサイドバーの項目が多いときに全部閉じる

項目が多くなってくると、スクロールしなければならないので、全部閉じることができたらいいかも。

SidebarSublist.astroを上書きしたらいい？

上書きできそうにない。

サイドバーはどうなっている

xxx.html
<details>
<summary>ここからはじめる</summary>
...
</details>

こんな感じでアコーディオンになっている。

Sidebar.astroを上書き

detailsを閉じれたらいいらしい。

閉じ方は次を参考にした。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10233056360

Sidebar.astro
---
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/Sidebar.astro';
import { Icon } from '@astrojs/starlight/components';
---

<!-- https://starlight.astro.build/guides/overriding-components/#reuse-a-built-in-component -->
<div class="open-close">
	<button id="tree-close-all"><Icon name="up-caret" size="0.75rem" /></button>
	<button id="tree-open-all"><Icon name="down-caret" size="0.75rem" /></button>
</div>
<Default {...Astro.props} />

<style>
	.open-close {
		display: flex;
		justify-content: flex-end;
	}
</style>

<script>
	let links = document.getElementsByTagName('details');
	function details_open(bool: boolean) {
		for (let link of links) {
			link.open = bool;
		}
	}

	// Find all buttons for open and close
	const openButton = document.getElementById("tree-open-all");
	const closeButton = document.getElementById("tree-close-all");

	// Handle clicks
	openButton?.addEventListener('click', () => {
		details_open(true);
	});

	// Handle clicks
	closeButton?.addEventListener('click', () => {
		details_open(false);
	});
</script>

astro.config.mjsにオーバーライドの設定

astro.config.mjs
components: {
    // デフォルトの`SocialIcons`コンポーネントをオーバーライドします。
    Sidebar: './src/components/Sidebar.astro',
},

Sidebar.astroは上記のフォルダに配置する。

全部を閉じれるようになったが、現在のページは開いたままにしてほしい。