28 lines
940 B
Vue
28 lines
940 B
Vue
<template>
|
|
<nav class="chapter-nav" aria-label="Navigation des chapitres">
|
|
<h2 class="mb-4 font-display text-sm font-semibold uppercase tracking-wider text-white/40">
|
|
Chapitres
|
|
</h2>
|
|
<ul class="flex flex-col gap-1">
|
|
<li v-for="chapter in chapters" :key="chapter.path">
|
|
<NuxtLink
|
|
:to="`/lire/${chapter.stem}`"
|
|
class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors hover:bg-white/5"
|
|
active-class="bg-primary/10 text-primary font-medium"
|
|
>
|
|
<span class="font-mono text-xs text-white/30 w-5 text-right">
|
|
{{ chapter.order }}
|
|
</span>
|
|
<span class="truncate">{{ chapter.title }}</span>
|
|
</NuxtLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { data: chapters } = await useAsyncData('book-chapters', () =>
|
|
queryCollection('book').order('order', 'ASC').all(),
|
|
)
|
|
</script>
|