feat: integration page (PART 3/3)

web/src/components/SectionIndex.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+
+export interface IndexSection {
+	id: string
+	label: string
+}
+
+const props = defineProps<{
+	sections: IndexSection[]
+	active: string
+}>()
+
+const emit = defineEmits<{ select: [id: string] }>()
+
+const activeLabel = computed(
+	() => props.sections.find((section) => section.id === props.active)?.label ?? '',
+)
+
+function onJump(id: string) {
+	emit('select', id)
+}
+</script>
+
+<template>
+	<nav
+		:aria-label="t('On this page')"
+		class="sticky top-0 hidden w-42 shrink-0 flex-col gap-0.5 self-start border-l border-default lg:flex"
+	>
+		<span
+			class="px-3 pb-1.5 text-xs leading-5 font-medium tracking-wide text-muted uppercase"
+			>{{ t('On this page') }}</span
+		>
+		<button
+			v-for="section in sections"
+			:key="section.id"
+			type="button"
+			:aria-current="section.id === active ? 'true' : undefined"
+			class="-ml-px flex h-7 cursor-pointer items-center border-l-2 px-3 text-left hover:text-highlighted focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary"
+			:class="
+				section.id === active
+					? 'border-primary font-medium text-highlighted'
+					: 'border-transparent text-toned'
+			"
+			@click="onJump(section.id)"
+		>
+			{{ section.label }}
+		</button>
+	</nav>
+
+	<div
+		class="sticky -top-5 z-5 order-first -mx-4 -mt-5 mb-5 border-b border-default bg-default px-4 py-2 lg:hidden"
+	>
+		<USelectMenu
+			:model-value="active"
+			:items="sections"
+			value-key="id"
+			label-key="label"
+			trailing-icon="i-lucide-chevrons-up-down"
+			:search-input="false"
+			:aria-label="t('Jump to section')"
+			color="neutral"
+			variant="outline"
+			class="w-full"
+			:ui="{
+				base: 'h-11 rounded-none border border-accented bg-default px-3 text-base ring-0 hover:bg-default',
+				trailingIcon: 'size-4 text-muted',
+				content: 'max-h-none w-(--reka-popper-anchor-width) border border-default',
+				item: 'h-11 px-2.5 text-base text-highlighted',
+			}"
+			@update:model-value="onJump($event as string)"
+		>
+			<span class="flex min-w-0 flex-1 items-center gap-2">
+				<span class="text-muted">{{ t('Jump to') }}</span>
+				<span class="flex-1 truncate text-left font-medium text-highlighted">{{
+					activeLabel
+				}}</span>
+			</span>
+		</USelectMenu>
+	</div>
+</template>