librodrome/app/pages/economique/monnaie-libre.vue

<template>
  <div class="section-padding">
    <div class="container-content">

      <!-- Header -->
      <div class="mx-auto max-w-2xl text-center mb-8">
        <div class="section-icon mx-auto mb-6">
          <span v-if="content?.icon === 'g1'" class="g1-icon">Ğ1</span>
          <div v-else :class="`i-lucide-${content?.icon ?? 'coins'}`" class="h-12 w-12" />
        </div>
        <p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase">
          {{ content?.kicker }}
        </p>
        <h1 class="font-display text-3xl font-bold mb-4" style="color: hsl(var(--color-text))">
          {{ content?.title }}
        </h1>
        <p class="text-lg leading-relaxed" style="color: hsl(var(--color-text-muted))">
          {{ content?.description }}
        </p>
      </div>

      <!-- Navigation prev / index / next -->
      <nav class="ctx-nav mx-auto max-w-2xl mb-10">
        <NuxtLink v-if="prevItem?.to" :to="prevItem.to" class="ctx-nav-btn ctx-nav-prev">
          <div class="i-lucide-arrow-left h-4 w-4 shrink-0" />
          <span>{{ prevItem.label }}</span>
        </NuxtLink>
        <div v-else class="ctx-nav-spacer" />

        <NuxtLink to="/economique" class="ctx-nav-btn ctx-nav-index">
          <div class="i-lucide-layout-grid h-4 w-4" />
          <span>Économique</span>
        </NuxtLink>

        <NuxtLink v-if="nextItem?.to" :to="nextItem.to" class="ctx-nav-btn ctx-nav-next">
          <span>{{ nextItem.label }}</span>
          <div class="i-lucide-arrow-right h-4 w-4 shrink-0" />
        </NuxtLink>
        <div v-else class="ctx-nav-spacer" />
      </nav>

      <!-- Zone sections — relative pour ancrer le sidebar -->
      <div class="sections-area">

        <!-- Sidebar sommaire -->
        <aside v-if="sommaire.length > 1" class="page-sidebar">
          <nav class="sommaire-sidebar">
            <p class="sommaire-sidebar-title">Sur cette page</p>
            <ol class="sommaire-sidebar-list">
              <li v-for="(entry, ei) in sommaire" :key="ei">
                <a :href="`#${entry.id}`" class="sommaire-sidebar-link">
                  <span class="sommaire-n">{{ ei + 1 }}</span>
                  <span>{{ entry.title }}</span>
                </a>
              </li>
            </ol>
          </nav>
        </aside>

        <!-- Content -->
        <div
          v-if="content?.content"
          id="section-content"
          class="prose-block mb-8 max-w-2xl mx-auto section-anchor"
        >
          <p class="leading-relaxed whitespace-pre-line" style="color: hsl(var(--color-text-muted))">
            {{ content.content }}
          </p>
        </div>

        <!-- External links -->
        <div
          v-if="content?.links"
          id="section-links"
          class="flex flex-col gap-3 mb-10 max-w-2xl mx-auto section-anchor"
        >
          <a
            v-for="link in content.links"
            :key="link.href"
            :href="link.href"
            target="_blank"
            rel="noopener"
            class="link-card group"
          >
            <div class="link-icon">
              <div :class="`i-lucide-${link.icon ?? 'external-link'} h-4 w-4`" />
            </div>
            <span class="text-sm font-medium" style="color: hsl(var(--color-text))">{{ link.label }}</span>
            <div class="i-lucide-arrow-up-right h-3.5 w-3.5 ml-auto text-primary/40 group-hover:text-primary transition-colors" />
          </a>
        </div>

      </div><!-- /sections-area -->

    </div>
  </div>
</template>

<script setup lang="ts">
const [{ data: content }, { data: homeData }] = await Promise.all([
  usePageContent('economique/monnaie-libre'),
  usePageContent('home'),
])

// Sommaire
const sommaire = computed(() => {
  const entries: { title: string; id: string }[] = []
  if (content.value?.content) entries.push({ title: 'La théorie', id: 'section-content' })
  if ((content.value?.links as unknown[])?.length) entries.push({ title: 'Ressources', id: 'section-links' })
  return entries
})

// Prev / next dans la section économique
interface AxisItem { label: string; to?: string; icon?: string }
const economieItems = computed<AxisItem[]>(
  () => (homeData.value as Record<string, unknown> | null)?.axes?.economie?.items as AxisItem[] ?? [],
)
const currentPath = '/economique/monnaie-libre'
const currentIdx = computed(() => economieItems.value.findIndex(i => i.to === currentPath))
const prevItem = computed(() => currentIdx.value > 0 ? economieItems.value[currentIdx.value - 1] : null)
const nextItem = computed(() => currentIdx.value < economieItems.value.length - 1 ? economieItems.value[currentIdx.value + 1] : null)

useSeoPage({
  title: content.value?.meta?.title ?? 'Monnaie libre — Autonomie économique',
  description: content.value?.description as string ?? 'La monnaie libre (June / G1) : comprendre la théorie relative de la monnaie et expérimenter une monnaie équitable.',
})
</script>

<style scoped>
.g1-icon {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
}

.section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 1rem;
  background: hsl(var(--color-primary) / 0.1);
  border: 1px solid hsl(var(--color-primary) / 0.2);
  color: hsl(var(--color-primary));
}

.prose-block {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: hsl(var(--color-surface));
}

.link-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--color-primary) / 0.1);
  background: hsl(var(--color-surface));
  text-decoration: none;
  transition: border-color 0.2s;
}

.link-card:hover {
  border-color: hsl(var(--color-primary) / 0.25);
}

.link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  background: hsl(var(--color-primary) / 0.1);
  color: hsl(var(--color-primary));
  flex-shrink: 0;
}

.section-anchor {
  scroll-margin-top: 5.5rem;
}

/* ── Navigation prev/next ── */
.ctx-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  align-items: center;
}

.ctx-nav-spacer { min-width: 0; }

.ctx-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.875rem;
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  color: hsl(var(--color-text-muted));
  background: hsl(var(--color-surface));
  border: 1px solid hsl(var(--color-text) / 0.08);
  transition: all 0.15s;
  min-width: 0;
}

.ctx-nav-btn:hover {
  color: hsl(var(--color-primary));
  border-color: hsl(var(--color-primary) / 0.25);
  background: hsl(var(--color-primary) / 0.05);
}

.ctx-nav-prev { justify-content: flex-start; }
.ctx-nav-next { justify-content: flex-end; }

.ctx-nav-prev span,
.ctx-nav-next span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctx-nav-index {
  justify-content: center;
  background: hsl(var(--color-primary) / 0.08);
  border-color: hsl(var(--color-primary) / 0.15);
  color: hsl(var(--color-primary));
  font-size: 0.75rem;
  padding: 0.45rem 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.ctx-nav-index:hover { background: hsl(var(--color-primary) / 0.15); }

@media (max-width: 480px) {
  .ctx-nav { grid-template-columns: auto 1fr auto; }
  .ctx-nav-prev span, .ctx-nav-next span { display: none; }
  .ctx-nav-prev, .ctx-nav-next { padding: 0.5rem; }
}

/* ── Zone sections ── */
.sections-area {
  position: relative;
}

/* ── Sidebar sommaire ── */
.page-sidebar {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 10.5rem;
  height: 100%;
}

@media (min-width: 1300px) {
  .page-sidebar { display: block; }
}

.sommaire-sidebar {
  position: sticky;
  top: 5.5rem;
  padding: 0.875rem;
  border-radius: 14px;
  background: hsl(var(--color-surface));
  border: 1px solid hsl(var(--color-text) / 0.07);
}

.sommaire-sidebar-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--color-text-muted));
  margin: 0 0 0.6rem;
}

.sommaire-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.sommaire-sidebar-link {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.28rem 0.4rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.75rem;
  color: hsl(var(--color-text-muted));
  line-height: 1.4;
  transition: color 0.12s, background 0.12s;
}

.sommaire-sidebar-link:hover {
  color: hsl(var(--color-primary));
  background: hsl(var(--color-primary) / 0.06);
}

.sommaire-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: hsl(var(--color-primary) / 0.1);
  color: hsl(var(--color-primary));
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  flex-shrink: 0;
}
</style>