Introduction

🎯 Que fait ce module ?

Le module Menus vous permet de récupérer les structures de navigation du site - menus de header, menus de footer, navigation latérale, menus mobiles - en construisant dynamiquement une navigation multi-niveaux à partir des pages configurées dans OneEntry.

Considérez-le comme votre gestionnaire de navigation - vous créez des menus dans le panneau d'administration de OneEntry (en liant les pages entre elles), et ce module récupère la structure complète de l'arbre de menu, vous permettant de rendre la navigation dynamiquement sans coder en dur les liens.

---

📖 Explication Simple

Chaque site web a besoin d'une navigation pour aider les utilisateurs à trouver du contenu :

• Menu de Header - Navigation principale (Accueil, À propos, Services, Contact)
• Menu Mobile - Menu hamburger avec des sous-menus
• Menu Latéral - Navigation par catégorie (catégories de blog, filtres de produits)
• Menu de Footer - Liens légaux, liens sociaux, plan du site
• Mega Menu - Sous-menus complexes avec images et catégories
• Fil d'Ariane - Chemin de la page actuelle (Accueil > Produits > Électronique)

Problèmes :

• Difficile à mettre à jour - Nécessité de redéployer le code pour changer le menu
• Pas de support multilingue - Menus différents pour chaque langue
• Pas convivial pour les administrateurs - Développeurs nécessaires pour chaque changement
• Duplication de menu - Même menu codé en dur à plusieurs endroits

La solution Menus :

Avantages :

• Mises à jour faciles - Changer les menus dans le panneau d'administration, pas de redéploiement
• Multilingue - Menus automatiquement localisés
• Convivial pour les administrateurs - Les non-développeurs peuvent gérer la navigation
• Source unique de vérité - Une structure de menu partout

---

✨ Concepts Clés

Qu'est-ce qu'un Menu ?

Un Menu est une structure de navigation qui contient des liens vers des pages :

• Éléments de Menu - Liens de navigation individuels (pages)
• Hiérarchie - Structure imbriquée (parent → enfants)
• Ordre - Ordre d'affichage des éléments
• Localisation - Titres traduits par langue
• Dynamique - Récupérer la structure depuis l'API, rendre dans votre application

Structure du Menu

Chaque menu a cette structure :

{
  id: 123,
  identifier: "header_menu",          // Identifiant unique
  localizeInfos: {
    title: "Navigation Principale"    // Titre du menu
  },
  pages: [                            // Éléments du menu (pages)
    {
      id: 1,                          // ID de la page
      pageUrl: "/home",               // URL de la page
      localizeInfos: {
        title: "Accueil",              // Affichage sur la page
        menuTitle: "Accueil"           // Affichage dans le menu
      },
      attributeValues: {},            // Valeurs d'attribut
      parentId: 0,                    // Élément de niveau supérieur
      position: 1                     // Ordre d'affichage
    }
  ]
}

Hiérarchie du Menu

Les menus supportent des structures imbriquées (navigation multi-niveaux) :

📂 Menu de Header
├─ 🏠 Accueil (profondeur : 0, parentId : 0)
├─ 📖 À propos (profondeur : 0, parentId : 0)
│  ├─ 👥 Équipe (profondeur : 1, parentId : 2)
│  ├─ 🏢 Bureau (profondeur : 1, parentId : 2)
│  └─ 📜 Histoire (profondeur : 1, parentId : 2)
├─ 🛍️ Produits (profondeur : 0, parentId : 0)
│  ├─ 💻 Électronique (profondeur : 1, parentId : 4)
│  │  ├─ 📱 Téléphones (profondeur : 2, parentId : 5)
│  │  └─ 💻 Ordinateurs portables (profondeur : 2, parentId : 5)
│  └─ 👕 Vêtements (profondeur : 1, parentId : 4)
└─ 📞 Contact (profondeur : 0, parentId : 0)

Types de Menus Courants

Type de Menu	Description	Cas d'utilisation Exemple
Menu de Header	Navigation principale du site	Barre de navigation supérieure, liens principaux
Menu de Footer	Liens de footer	Légal, social, plan du site
Menu Latéral	Navigation par catégorie	Catégories de blog, filtres de produits
Menu Mobile	Navigation spécifique aux mobiles	Menu hamburger, menu tiroir
Mega Menu	Sous-menu complexe avec catégories	Navigation multi-niveaux e-commerce
Fil d'Ariane	Chemin de la page actuelle	Accueil > Produits > Électronique

Pourquoi Utiliser le Module Menus ?

Avantage	Description
Navigation Dynamique	Récupérer la structure du menu depuis l'API, pas de codage en dur
Multilingue	Menus automatiquement localisés selon la langue
Convivial pour les Administrateurs	Les non-développeurs peuvent mettre à jour la navigation
Structure Hiérarchique	Support pour des menus imbriqués (profondeur illimitée)
Convivial pour le SEO	Relations et structure de page appropriées
Source Unique de Vérité	Une structure de menu utilisée partout

---

📋 Ce que Vous Devez Savoir

Les Menus sont Créés dans le Panneau d'Administration

Vous ne pouvez pas créer de menus via le SDK - ils sont créés dans le panneau d'administration de OneEntry :

Panneau d'Administration OneEntry → Menus → Créer Menu → Ajouter Pages → Enregistrer

Le SDK est destiné à récupérer les structures de menu, pas à les créer.

Les Éléments de Menu sont des Pages

Important : Les éléments de menu sont des pages configurées dans OneEntry. Vous ne pouvez pas ajouter de liens arbitraires aux menus - chaque élément de menu doit être une page.

Hiérarchie du Menu (Relations Parent-Enfant)

Les menus supportent une profondeur d'imbrication illimitée

---

💡 Notes Importantes

Les Menus sont Créés dans le Panneau d'Administration

Rappelez-vous : Le SDK est destiné à récupérer les structures de menu, pas à créer des menus.

Pour créer/éditer des menus : Utilisez le Panneau d'Administration OneEntry ou l'API Admin.

Les Éléments de Menu Doivent Être des Pages

Vous ne pouvez pas ajouter de liens arbitraires aux menus. Chaque élément de menu doit être une page configurée dans OneEntry.

Solution pour les liens externes : Créez des pages avec des URL externes dans OneEntry, puis ajoutez-les aux menus.

La Hiérarchie du Menu est Flexible

Les menus supportent une profondeur d'imbrication illimitée - vous pouvez avoir autant de niveaux que nécessaire.

Support Multilingue

Les menus supportent automatiquement le multilingue basé sur langCode dans defineOneEntry().

Meilleure pratique : Récupérez les menus dans la langue préférée de l'utilisateur.

Mettez en Cache les Menus pour la Performance

Les menus changent rarement - implémentez un cache pour réduire les appels API :

• Frontend : localStorage, sessionStorage
• Backend : Redis, cache mémoire
• TTL : 1 heure recommandée

---

📊 Tableau de Référence Rapide

Méthode	Description	Cas d'utilisation
getMenuByMarker()	Récupérer le menu par marqueur	Récupérer une structure de menu spécifique

❓ Questions Fréquemment Posées (FAQ)

Comment créer un menu multi-niveaux (navigation déroulante) ?

Les menus supportent une profondeur d'imbrication illimitée. Utilisez parentId pour créer des structures hiérarchiques. Dans le panneau d'administration, vous pouvez imbriquer des pages pour créer des relations parent-enfant qui se reflètent automatiquement dans la structure du menu.

---

Puis-je ajouter des liens externes aux menus ?

Les éléments de menu doivent être des pages configurées dans OneEntry. Pour ajouter des liens externes, créez des pages avec des URL externes dans le module Pages, puis ajoutez-les à votre menu.

---

Comment gérer l'état de l'élément de menu actif ?

Comparez l'URL de la page actuelle avec chaque pageUrl d'élément de menu. Appliquez une classe/style actif lorsqu'ils correspondent pour mettre en évidence la page actuelle dans la navigation.

---

Mon menu a trop d'éléments. Comment optimiser la performance ?

Mettez en cache les menus en utilisant localStorage ou sessionStorage car ils changent rarement. Implémentez le chargement paresseux pour les mega menus avec de nombreux éléments imbriqués. Envisagez d'utiliser un menu hamburger optimisé pour mobile pour une meilleure expérience utilisateur.

---

Comment créer une navigation par fil d'Ariane ?

Utilisez la hiérarchie du menu pour construire des fils d'Ariane. Tracez depuis la page actuelle à travers les relations parentId pour construire le chemin du fil d'Ariane (Accueil > Catégorie > Sous-catégorie > Page Actuelle).

---

Puis-je avoir des menus différents pour différentes sections ?

Oui ! Créez plusieurs menus avec des marqueurs différents (par exemple, header_menu, footer_menu, sidebar_menu) et récupérez-les séparément en utilisant getMenuByMarker().

---

🎓 Meilleures Pratiques

• Utilisez des marqueurs, pas des IDs - Les marqueurs sont stables à travers les environnements
• Mettez en cache les menus - Réduisez les appels API pour des données rarement changeantes
• Construisez un arbre récursif - Utilisez parentId pour la structure hiérarchique
• Triez par position - Respectez l'ordre d'affichage
• Gérez l'état actif - Mettez en évidence la page actuelle
• Fournissez des menus de secours - Gérez les erreurs avec grâce
• Supportez le multilingue - Utilisez langCode pour la localisation
• Optimisez pour mobile - Implémentez une navigation responsive

---

Plus d'informations sur l'interface utilisateur du module https://doc.oneentry.cloud/docs/menu/introduction_menu

---

Définition du module Menus

Le module Menus définit la structure et la navigation de votre site.

Le menu est un élément clé de la structure et de la navigation de votre site. Avec le menu, vous offrez aux visiteurs un moyen pratique de naviguer à travers différentes sections de votre application et de trouver les informations dont ils ont besoin.

const { Menus } = defineOneEntry(
  "your-project-url", {
    "token": "your-app-token"
  }
);

Dans la plateforme OneEntry, vous pouvez créer la structure du menu directement depuis votre compte personnel. Cela vous permet de changer l'ensemble des pages incluses dans le menu, leur ordre et leurs titres sans modifier le code source de votre application.

De plus, si nécessaire, vous pouvez créer des niveaux imbriqués dans le menu, permettant une structure en arbre avec des sections et des sous-sections.

Tout cela vous permet de travailler de manière pratique et flexible avec la navigation de votre application directement depuis votre compte personnel.

Au cœur du menu se trouvent les pages. La structure du menu est créée à partir des pages.

Vous pouvez définir :

Quelles pages seront incluses dans le menu Dans quel ordre elles seront présentées à l'utilisateur Quel titre sera donné à l'élément de menu menant à une page spécifique L'imbrication des éléments de menu (structure en arbre) Certains de ces concepts ont été discutés dans la section des pages, et certains paramètres de page affectent la structure du menu que vous pouvez créer à partir de ces pages.

---

🔗 Documentation Connexe

• Module Pages - Gérer les pages qui composent vos menus
• Module Locales - Support multilingue pour la localisation des menus
• Module GeneralTypes - Types de pages utilisés dans les menus

---