308 lines
7.4 KiB
Plaintext
308 lines
7.4 KiB
Plaintext
---
|
|
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 flows = smartNavigation?.flows ?? [];
|
|
const hasPaths = paths.length > 0;
|
|
const hasFlows = flows.length > 0;
|
|
---
|
|
|
|
{(hasPrimary || hasPaths || hasFlows) && (
|
|
<section class="glossary-smart-nav" aria-label="Navigation guidée du glossaire">
|
|
<div class="glossary-smart-nav__eyebrow">Explorer les prolongements</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>
|
|
)}
|
|
|
|
{hasFlows && (
|
|
<div class="glossary-smart-nav__flows" aria-label="Parcours contextuels">
|
|
<span class="glossary-smart-nav__label">Parcours contextuels</span>
|
|
|
|
<div class="glossary-smart-nav__flow-list">
|
|
{flows.map((flow) => (
|
|
flow.primaryNext && (
|
|
<a class="glossary-smart-nav__flow" href={hrefOfGlossaryEntry(flow.primaryNext)}>
|
|
<span class="glossary-smart-nav__flow-label">{flow.label}</span>
|
|
<strong>{flow.primaryNext.data.term}</strong>
|
|
{flow.primaryReason && <span>{flow.primaryReason}</span>}
|
|
</a>
|
|
)
|
|
))}
|
|
</div>
|
|
</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__primary{
|
|
display: grid;
|
|
gap: 5px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.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: 1px solid rgba(127,127,127,0.18);
|
|
background: rgba(127,127,127,0.06);
|
|
color: inherit;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
font: inherit;
|
|
font-size: 13px;
|
|
font-weight: 850;
|
|
line-height: 1.25;
|
|
text-align: left;
|
|
user-select: none;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.glossary-smart-nav__path-button:hover{
|
|
background: rgba(127,127,127,0.10);
|
|
}
|
|
|
|
.glossary-smart-nav__path-button:active{
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.glossary-smart-nav__flows{
|
|
display: grid;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.glossary-smart-nav__flow-list{
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.glossary-smart-nav__flow{
|
|
display: grid;
|
|
gap: 3px;
|
|
padding: 10px 11px;
|
|
border: 1px solid rgba(127,127,127,0.18);
|
|
border-radius: 14px;
|
|
background: rgba(127,127,127,0.035);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.glossary-smart-nav__flow-label{
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
letter-spacing: .04em;
|
|
text-transform: uppercase;
|
|
opacity: .72;
|
|
}
|
|
|
|
.glossary-smart-nav__flow strong{
|
|
font-size: 14px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.glossary-smart-nav__flow span:last-child{
|
|
font-size: 13px;
|
|
line-height: 1.35;
|
|
opacity: .84;
|
|
}
|
|
|
|
.glossary-smart-nav__eyebrow{
|
|
margin-bottom: 8px;
|
|
font-size: 12px;
|
|
font-weight: 850;
|
|
letter-spacing: .08em; /* légèrement augmenté */
|
|
text-transform: uppercase;
|
|
opacity: .78; /* un poil plus visible */
|
|
}
|
|
|
|
@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);
|
|
}
|
|
|
|
.glossary-smart-nav__flow{
|
|
background: rgba(255,255,255,0.035);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script is:inline>
|
|
(() => {
|
|
document.querySelectorAll(".glossary-smart-nav").forEach((nav) => {
|
|
nav
|
|
.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 || !nav.contains(panel)) return;
|
|
|
|
const expanded = button.getAttribute("aria-expanded") === "true";
|
|
const nextExpanded = !expanded;
|
|
|
|
button.setAttribute("aria-expanded", nextExpanded ? "true" : "false");
|
|
panel.hidden = !nextExpanded;
|
|
|
|
button
|
|
.closest(".glossary-smart-nav__path")
|
|
?.classList.toggle("is-open", nextExpanded);
|
|
});
|
|
});
|
|
});
|
|
})();
|
|
</script>
|