84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
<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>
|