122 lines
2.5 KiB
Plaintext
122 lines
2.5 KiB
Plaintext
---
|
|
interface LinkItem {
|
|
href: string;
|
|
label: string;
|
|
}
|
|
|
|
interface Props {
|
|
ariaLabel: string;
|
|
title: string;
|
|
meta?: string;
|
|
backHref?: string;
|
|
backLabel?: string;
|
|
pageItems?: LinkItem[];
|
|
usefulLinks?: LinkItem[];
|
|
}
|
|
|
|
const {
|
|
ariaLabel,
|
|
title,
|
|
meta,
|
|
backHref = "/glossaire/",
|
|
backLabel = "← Retour au glossaire",
|
|
pageItems = [],
|
|
usefulLinks = [],
|
|
} = Astro.props;
|
|
---
|
|
|
|
<nav class="glossary-portal-aside" aria-label={ariaLabel}>
|
|
<div class="glossary-portal-aside__block">
|
|
<a class="glossary-portal-aside__back" href={backHref}>{backLabel}</a>
|
|
<div class="glossary-portal-aside__title">{title}</div>
|
|
{meta && <div class="glossary-portal-aside__meta">{meta}</div>}
|
|
</div>
|
|
|
|
{pageItems.length > 0 && (
|
|
<div class="glossary-portal-aside__block">
|
|
<h2 class="glossary-portal-aside__heading">Dans cette page</h2>
|
|
<ul class="glossary-portal-aside__list">
|
|
{pageItems.map((item) => (
|
|
<li><a href={item.href}>{item.label}</a></li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{usefulLinks.length > 0 && (
|
|
<div class="glossary-portal-aside__block">
|
|
<h2 class="glossary-portal-aside__heading">Renvois utiles</h2>
|
|
<ul class="glossary-portal-aside__list">
|
|
{usefulLinks.map((item) => (
|
|
<li><a href={item.href}>{item.label}</a></li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</nav>
|
|
|
|
<style>
|
|
.glossary-portal-aside{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
|
|
.glossary-portal-aside__block{
|
|
border: 1px solid rgba(127,127,127,0.22);
|
|
border-radius: 16px;
|
|
padding: 12px;
|
|
background: rgba(127,127,127,0.05);
|
|
}
|
|
|
|
.glossary-portal-aside__back{
|
|
display: inline-block;
|
|
margin-bottom: 8px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.glossary-portal-aside__title{
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
letter-spacing: .2px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.glossary-portal-aside__meta{
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
line-height: 1.35;
|
|
opacity: .78;
|
|
}
|
|
|
|
.glossary-portal-aside__heading{
|
|
margin: 0 0 10px;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
opacity: .9;
|
|
}
|
|
|
|
.glossary-portal-aside__list{
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.glossary-portal-aside__list li{
|
|
margin: 6px 0;
|
|
}
|
|
|
|
.glossary-portal-aside__list a{
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark){
|
|
.glossary-portal-aside__block{
|
|
background: rgba(255,255,255,0.04);
|
|
}
|
|
}
|
|
</style> |