boxmux 0.240.3373

YAML-driven terminal UI framework for rich, interactive CLI applications and dashboards with PTY support
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<script lang="ts">
	import Button from '../ui/button/button.svelte';
	import { TableOfContents } from './toc.svelte.js';

	import { ChevronRight } from 'lucide-svelte';
	let toc = $state(TableOfContents.getInstance());
</script>

<div>
	<h5
		id="docs-on-this-page-sidebar-label"
		class="mb-3 text-sm font-semibold text-gray-800 dark:text-neutral-300"
	>
		On this page
	</h5>
	<ul>
		{#each toc.headings as heading}
			<li>
				<Button
					variant="link"
					href="#{heading.id}"
					style="margin-left: {(heading.level - 1) * 1}rem"
					class="font-base text-sm text-gray-800 dark:text-neutral-300"
				>
					{#if heading.level > 1}
						<ChevronRight class="mt-[5px] size-3.5 shrink-0" />
					{/if}
					{heading.text}
				</Button>
			</li>
		{/each}
	</ul>
</div>