feat(glossary): add step 21 smart navigation

2026-04-26 13:03:45 +02:00
parent 689619d14d
commit 9f88112aca
45 changed files with 1020 additions and 112 deletions
--- a/src/components/GlossarySmartNav.astro
+++ b/src/components/GlossarySmartNav.astro
@@ -0,0 +1,225 @@
+---
+import type { GlossarySmartNavigation } from "../lib/glossary";
+import { hrefOfGlossaryEntry } from "../lib/glossary";
+
+interface Props {
+  smartNavigation?: GlossarySmartNavigation;
+}
+
+const { smartNavigation } = Astro.props;
+
+const hasPrimary = Boolean(smartNavigation?.primaryNext);
+const paths = smartNavigation?.paths ?? [];
+const hasPaths = paths.length > 0;
+---
+
+{(hasPrimary || hasPaths) && (
+  <section class="glossary-smart-nav" aria-label="Navigation guidée du glossaire">
+    <div class="glossary-smart-nav__eyebrow">Continuer dans le système</div>
+
+    {smartNavigation?.primaryNext && (
+      <div class="glossary-smart-nav__primary">
+        <span class="glossary-smart-nav__label">Étape suivante</span>
+        <a href={hrefOfGlossaryEntry(smartNavigation.primaryNext)}>
+          {smartNavigation.primaryNext.data.term}
+        </a>
+
+        {smartNavigation.primaryReason && (
+          <p>{smartNavigation.primaryReason}</p>
+        )}
+      </div>
+    )}
+
+    {hasPaths && (
+      <div class="glossary-smart-nav__paths" aria-label="Parcours de lecture">
+        {paths.map((path) => {
+          const panelId = `smart-nav-${path.key}`;
+
+          return (
+            <div class="glossary-smart-nav__path">
+              <button
+                class="glossary-smart-nav__path-button"
+                type="button"
+                aria-expanded="false"
+                aria-controls={panelId}
+              >
+                <span>{path.label}</span>
+                <span class="glossary-smart-nav__chevron" aria-hidden="true">▾</span>
+              </button>
+
+              <ul id={panelId} class="glossary-smart-nav__path-panel" hidden>
+                {path.entries.map((entry) => (
+                  <li>
+                    <a href={hrefOfGlossaryEntry(entry)}>{entry.data.term}</a>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          );
+        })}
+      </div>
+    )}
+  </section>
+)}
+
+<style>
+  .glossary-smart-nav{
+    margin: 14px 0 18px;
+    padding: 14px;
+    border: 1px solid rgba(127,127,127,0.20);
+    border-radius: 18px;
+    background: rgba(127,127,127,0.045);
+  }
+
+  .glossary-smart-nav__eyebrow{
+    margin-bottom: 8px;
+    font-size: 12px;
+    font-weight: 850;
+    letter-spacing: .06em;
+    text-transform: uppercase;
+    opacity: .72;
+  }
+
+  .glossary-smart-nav__primary{
+    display: grid;
+    gap: 5px;
+  }
+
+  .glossary-smart-nav__label{
+    font-size: 13px;
+    font-weight: 800;
+    opacity: .76;
+  }
+
+  .glossary-smart-nav__primary a{
+    width: fit-content;
+    font-size: clamp(1.05rem, 2vw, 1.22rem);
+    font-weight: 900;
+    line-height: 1.18;
+    text-decoration: none;
+  }
+
+  .glossary-smart-nav__primary p{
+    max-width: 72ch;
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.45;
+    opacity: .88;
+  }
+
+  .glossary-smart-nav__paths{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 8px;
+    margin-top: 12px;
+    }
+
+  .glossary-smart-nav__path{
+    align-self: flex-start;
+    min-width: min(180px, 100%);
+    border: 1px solid rgba(127,127,127,0.18);
+    border-radius: 14px;
+    background: rgba(127,127,127,0.035);
+    overflow: hidden;
+  }
+
+  .glossary-smart-nav__path-button{
+    width: 100%;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    padding: 9px 11px;
+    cursor: pointer;
+    font: inherit;
+    font-size: 13px;
+    font-weight: 850;
+    line-height: 1.25;
+    text-align: left;
+    user-select: none;
+  }
+
+  .glossary-smart-nav__chevron{
+    flex: 0 0 auto;
+    font-size: 13px;
+    line-height: 1;
+    opacity: .72;
+    transform: rotate(0deg);
+    transition: transform 160ms ease, opacity 160ms ease;
+  }
+
+  .glossary-smart-nav__path-button[aria-expanded="true"] .glossary-smart-nav__chevron{
+    transform: rotate(180deg);
+    opacity: .96;
+  }
+
+  .glossary-smart-nav__path-panel{
+    margin: 0;
+    padding: 0 11px 10px 24px;
+  }
+
+  .glossary-smart-nav__path-panel[hidden]{
+    display: none;
+  }
+
+  .glossary-smart-nav__path-panel li{
+    margin: 5px 0;
+    font-size: 13px;
+    line-height: 1.32;
+  }
+
+  .glossary-smart-nav__path-panel a{
+    text-decoration: none;
+  }
+
+  @media (max-width: 760px){
+    .glossary-smart-nav{
+      margin: 12px 0 16px;
+      padding: 12px;
+      border-radius: 16px;
+    }
+
+    .glossary-smart-nav__paths{
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 7px;
+    }
+
+    .glossary-smart-nav__path{
+      width: 100%;
+    }
+  }
+
+  @media (prefers-color-scheme: dark){
+    .glossary-smart-nav{
+      background: rgba(255,255,255,0.04);
+    }
+
+    .glossary-smart-nav__path{
+      background: rgba(255,255,255,0.035);
+    }
+  }
+</style>
+
+<script is:inline>
+  (() => {
+    document
+      .querySelectorAll(".glossary-smart-nav__path-button")
+      .forEach((button) => {
+        button.addEventListener("click", () => {
+          const panelId = button.getAttribute("aria-controls");
+          const panel = panelId ? document.getElementById(panelId) : null;
+          if (!panel) return;
+
+          const expanded = button.getAttribute("aria-expanded") === "true";
+
+          button.setAttribute("aria-expanded", expanded ? "false" : "true");
+          panel.hidden = expanded;
+        });
+      });
+  })();
+</script>