initiation librodrome

app/components/book/ChapterNav.vue

@@ -0,0 +1,27 @@
+<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>