Menu partagé
Un composant web partagé qui assure la navigation entre tous les outils de l'écosystème données tiers-lieux.
À quoi ça sert ?
Le menu partagé est le fil rouge de l’écosystème : un bouton de navigation présent sur l’ensemble des sites et outils. Il est utilisé sur les outils du comité data. Et il peut être utilisé facilement sur tous les sites (outils communs, sites régionaux …) qui souhaitent intégrer ce menu. Il permet aux utilisateurs de passer d’un outil à l’autre de manière fluide, et donne une cohérence visuelle à l’ensemble de la plateforme.
C’est une application 100% client : un simple fichier JavaScript hébergé sur GitLab Pages, chargé par chaque outil de l’écosystème. Aucun serveur dédié n’est nécessaire.
Ce menu peut se “contextualiser” par réseau : des liens spécifiques s’affichent selon le réseau, pour permettre aux utilisateurs de revenir dans les sites et outils de leur réseau.
Principe de fonctionnement
C’est un Web Component (
- Un bouton hamburger fixe (36x36px) s’affiche dans un coin configurable de la page
- Au clic, un panneau de navigation s’ouvre avec les liens vers tous les outils de l’écosystème
- Les entrées du menu sont gérées dans Grist (document dédié, table MenuItems), ce qui permet de les mettre à jour sans toucher au code
- Un cache localStorage de 5 minutes assure un affichage instantané sans requête réseau
- Le composant détecte automatiquement le réseau régional (Bretagne, Réunion, etc.) et persiste ce contexte entre les différents sites grâce à un mécanisme de bridge cross-origin
- Un fallback statique prend le relais si Grist est indisponible
Intégration
L’intégration sur n’importe quel site se fait en deux lignes :
<script src="https://menu.tiers-lieux.fr/menu.js"></script> <tl-menu></tl-menu>
Compatible avec les sites statiques, Svelte, React, ou via reverse proxy Nginx.