Menu Données Tiers-Lieux

Composant partagé entre tous les sites de la démarche données tiers-lieux.
Le bouton ☰ en haut à droite est une instance du composant.
Les entrées sont chargées depuis Grist (table MenuItems).

Intégration

<!-- Recommandé : placer juste avant </body> -->
<script type="module" src="https://menu.tiers-lieux.fr/menu.js"></script>
<tl-menu></tl-menu>
</body>

L'item actif est détecté automatiquement en comparant l'URL de chaque entrée avec window.location.origin. Aucune configuration nécessaire.

Attribut `current` (optionnel)

Utile en développement local ou pour forcer un item actif. La valeur est cherchée dans le champ URL de chaque entrée Grist.

<!-- Force l'item dont l'URL contient "annuaire" comme actif -->
<tl-menu current="annuaire"></tl-menu>

Attribut `position`

Valeur	Coin
`top-right`	Haut droite (défaut)
`top-left`	Haut gauche
`bottom-right`	Bas droite
`bottom-left`	Bas gauche

Attribut `offset`

Distance en pixels par rapport au bord de la fenêtre. Défaut : 16.
Utile si le site hôte a déjà un élément dans le même coin (navbar, widget chat…).

<!-- Décaler le bouton sous une navbar de 60px -->
<tl-menu position="top-right" offset="70"></tl-menu>

Svelte

<!-- Dans app.html ou index.html -->
<script type="module" src="https://menu.tiers-lieux.fr/menu.js"></script>

<!-- Dans n'importe quel composant .svelte -->
<tl-menu></tl-menu>

Table Grist — structure

Document 65Qr2aRztrwA sur grist.tiers-lieux.fr, table MenuItems.

Colonne	Type	Rôle
`label`	Text	Libellé affiché
`URL`	Text	Lien de destination
`info_bulle`	Text	Attribut `title` HTML
`poids`	Integer	Ordre d'affichage
`parent`	Ref:MenuItems	Élément parent (sous-menu)
`bientot`	Bool	Affiche le badge "bientôt"
`appel_a_l_action`	Bool	Affiche comme bouton CTA en bas du panneau