archicratie-edition/src/components/GlossaryAside.astro

---
import {
  getGlossaryEntryAsideData,
  getGlossaryPortalLinks,
  hrefOfGlossaryEntry,
  slugOfGlossaryEntry,
} from "../lib/glossary";

const {
  currentEntry,
  allEntries = [],
} = Astro.props;

const currentSlug = slugOfGlossaryEntry(currentEntry);

const {
  displayFamily,
  displayDomain,
  displayLevel,
  showNoyau,
  showSameFamily,
  fondamentaux,
  sameFamilyTitle,
  sameFamilyEntries,
  relationSections,
  contextualTheory,
} = getGlossaryEntryAsideData(currentEntry, allEntries);

const portalLinks = getGlossaryPortalLinks();
---

<nav class="glossary-aside" aria-label="Navigation du glossaire">
  <div class="glossary-aside__block glossary-aside__block--intro">
    <a class="glossary-aside__back" href="/glossaire/">← Retour au glossaire</a>
    <div class="glossary-aside__title">Glossaire archicratique</div>

    <div class="glossary-aside__pills" aria-label="Repères de lecture">
      <span class="glossary-aside__pill glossary-aside__pill--family">
        {displayFamily}
      </span>

      {displayDomain && (
        <span class="glossary-aside__pill">{displayDomain}</span>
      )}

      {displayLevel && (
        <span class="glossary-aside__pill">{displayLevel}</span>
      )}
    </div>
  </div>

  <section class="glossary-aside__block">
    <h2 class="glossary-aside__heading">Portails</h2>
    <ul class="glossary-aside__list">
      {portalLinks.map((item) => (
        <li><a href={item.href}>{item.label}</a></li>
      ))}
    </ul>
  </section>

  {showNoyau && (
    <section class="glossary-aside__block">
      <h2 class="glossary-aside__heading">Noyau archicratique</h2>
      <ul class="glossary-aside__list">
        {fondamentaux.map((entry) => {
          const active = slugOfGlossaryEntry(entry) === currentSlug;
          return (
            <li>
              <a
                href={hrefOfGlossaryEntry(entry)}
                aria-current={active ? "page" : undefined}
                class={active ? "is-active" : undefined}
              >
                {entry.data.term}
              </a>
            </li>
          );
        })}
      </ul>
    </section>
  )}

  {showSameFamily && (
    <section class="glossary-aside__block">
      <h2 class="glossary-aside__heading">{sameFamilyTitle}</h2>
      <ul class="glossary-aside__list">
        {sameFamilyEntries.map((entry) => {
          const active = slugOfGlossaryEntry(entry) === currentSlug;
          return (
            <li>
              <a
                href={hrefOfGlossaryEntry(entry)}
                aria-current={active ? "page" : undefined}
                class={active ? "is-active" : undefined}
              >
                {entry.data.term}
              </a>
            </li>
          );
        })}
      </ul>
    </section>
  )}

  {relationSections.length > 0 && (
    <section class="glossary-aside__block">
      <h2 class="glossary-aside__heading">Autour de cette fiche</h2>

      {relationSections.map((section) => (
        <>
          <h3 class="glossary-aside__subheading">{section.title}</h3>
          <ul class="glossary-aside__list">
            {section.items.map((entry) => (
              <li><a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a></li>
            ))}
          </ul>
        </>
      ))}
    </section>
  )}

  {contextualTheory.length > 0 && (
    <section class="glossary-aside__block">
      <h2 class="glossary-aside__heading">Paysage théorique</h2>
      <ul class="glossary-aside__list">
        {contextualTheory.map((entry) => (
          <li><a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a></li>
        ))}
      </ul>
    </section>
  )}
</nav>

<style>
  .glossary-aside{
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .glossary-aside__block{
    border: 1px solid rgba(127,127,127,0.22);
    border-radius: 16px;
    padding: 14px;
    background: rgba(127,127,127,0.05);
  }

  .glossary-aside__block--intro{
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .glossary-aside__back{
    display: inline-block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
  }

  .glossary-aside__title{
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.3;
  }

  .glossary-aside__pills{
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
  }

  .glossary-aside__pill{
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid rgba(127,127,127,0.24);
    border-radius: 999px;
    background: rgba(127,127,127,0.04);
    font-size: 13px;
    line-height: 1.35;
    opacity: .92;
  }

  .glossary-aside__pill--family{
    border-color: rgba(127,127,127,0.38);
    font-weight: 800;
  }

  .glossary-aside__heading{
    margin: 0 0 11px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
    opacity: .94;
  }

  .glossary-aside__subheading{
    margin: 13px 0 8px;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.35;
    opacity: .82;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  .glossary-aside__list{
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .glossary-aside__list li{
    margin: 7px 0;
  }

  .glossary-aside__list a{
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
  }

  .glossary-aside__list a.is-active{
    font-weight: 800;
  }

  @media (prefers-color-scheme: dark){
    .glossary-aside__block,
    .glossary-aside__pill{
      background: rgba(255,255,255,0.04);
    }
  }
</style>