feat(locadex): continuous i18n

es/organize/navigation.mdx

@@ -1,23 +1,23 @@
 ---
 title: "Navegación"
 description: "Estructura y personaliza la jerarquía de navegación de tu documentación"
 ---
 
 La propiedad [navigation](es/settings#param-navigation) en `docs.json` controla la estructura y la jerarquía de la información de tu documentación.
 
 Con una configuración de navegación adecuada, puedes organizar tu contenido para que los usuarios encuentren exactamente lo que buscan.
 
 <div id="pages">
   ## Páginas
 </div>
 
 Las páginas son el componente de navegación más fundamental. Las páginas se corresponden con los archivos MDX que conforman tu documentación.
 
 <img className="block dark:hidden pointer-events-none" src="/images/navigation/pages-light.png" alt="" />
 
 <img className="hidden dark:block pointer-events-none" src="/images/navigation/pages-dark.png" alt="" />
 
 En el objeto `navigation`, `pages` es un arreglo donde cada entrada debe referenciar la ruta a un [archivo de página](es/pages).
 
 ```json
 {
@@ -37,13 +37,13 @@
   ## Grupos
 </div>
 
 Usa grupos para organizar la navegación de la barra lateral en secciones. Los grupos pueden anidarse, etiquetarse con tags y personalizarse con icon.
 
 <img className="block dark:hidden pointer-events-none" src="/images/navigation/groups-light.png" alt="" />
 
 <img className="hidden dark:block pointer-events-none" src="/images/navigation/groups-dark.png" alt="" />
 
 En el objeto `navigation`, `groups` es un array donde cada entrada es un objeto que requiere un campo `group` y un campo `pages`. Los campos `icon`, `tag` y `expanded` son opcionales.
 
 ```json
 {
@@ -80,10 +80,10 @@
 ```
 
 <div id="default-expanded-state">
   ### Estado expandido por defecto
 </div>
 
 Establece `expanded: true` en un grupo para que se muestre expandido por defecto en la barra lateral de navigation. Esto es útil para resaltar secciones importantes o mejorar el descubrimiento del contenido clave.
 
 ```json
 {
@@ -97,13 +97,13 @@
   ## Tabs
 </div>
 
 Tabs crean secciones diferenciadas de tu documentación con rutas de URL independientes. Tabs crean una barra de navegación horizontal en la parte superior de tu documentación que permite a los usuarios cambiar entre secciones.
 
 <img className="block dark:hidden pointer-events-none" src="/images/navigation/tabs-light.png" alt="" />
 
 <img className="hidden dark:block pointer-events-none" src="/images/navigation/tabs-dark.png" alt="" />
 
 En el objeto `navigation`, `tabs` es un array donde cada elemento es un objeto que requiere un campo `tab` y puede contener otros campos de navegación como groups, pages, icon o enlaces a páginas externas.
 
 ```json
 {
@@ -141,9 +141,9 @@
   ### Menús
 </div>
 
 Los menús añaden elementos de navegación desplegables a una Tab. Usa los menús para ayudar a los usuarios a ir directamente a páginas específicas dentro de una Tab.
 
 En el objeto `navigation`, `menu` es un array donde cada entrada es un objeto que requiere un campo `item` y puede incluir otros campos de navegación como groups, pages, icon o enlaces a páginas externas.
 
 ```json
 {
@@ -186,16 +186,16 @@
 ```
 
 <div id="anchors">
   ## Anclas
 </div>
 
 Las anclas añaden elementos de navegación persistentes en la parte superior de tu barra lateral. Usa anclas para dividir tu contenido, ofrecer acceso rápido a recursos externos o crear llamados a la acción destacados.
 
 <img className="block dark:hidden pointer-events-none" src="/images/navigation/anchors-light.png" />
 
 <img className="hidden dark:block pointer-events-none" src="/images/navigation/anchors-dark.png" />
 
 En el objeto `navigation`, `anchors` es un arreglo donde cada entrada es un objeto que requiere un campo `anchor` y puede contener otros campos de navegación como groups, pages, icons o enlaces a páginas externas.
 
 ```json
 {
@@ -228,9 +228,9 @@
 }
 ```
 
 Para los anclajes que dirigen únicamente a enlaces externos, usa la palabra clave `global`. Los anclajes en un objeto `global` deben tener un campo `href` y no pueden apuntar a una ruta relativa.
 
 Los anclajes globales son especialmente útiles para enlazar a recursos que no forman parte de tu documentación, pero que deberían estar fácilmente accesibles para tus usuarios, como un blog o un portal de soporte.
 
 ```json
 {
@@ -255,16 +255,16 @@
 ```
 
 <div id="dropdowns">
   ## Menús desplegables
 </div>
 
 Los menús desplegables se muestran en un menú expandible en la parte superior de la barra lateral de tu navegación. Cada elemento de un menú desplegable lleva a una sección de tu documentación.
 
 <img className="block dark:hidden pointer-events-none" src="/images/navigation/dropdowns-light.png" />
 
 <img className="hidden dark:block pointer-events-none" src="/images/navigation/dropdowns-dark.png" />
 
 En el objeto `navigation`, `dropdowns` es un arreglo donde cada entrada es un objeto que requiere un campo `dropdown` y puede contener otros campos de navegación como groups, páginas, iconos o enlaces a páginas externas.
 
 ```json
 {
@@ -298,19 +298,23 @@
 ```
 
 <div id="products">
   ## Productos
 </div>
 
-Los productos crean una sección de navegación específica para organizar la documentación de cada producto. Utiliza productos para separar distintas ofertas, servicios o conjuntos de funciones principales dentro de tu documentación.
+<img className="block dark:hidden pointer-events-none" src="/images/navigation/product-switcher-light.png" />
 
-En el objeto `navigation`, `products` es un array donde cada entrada es un objeto que requiere un campo `product` y puede contener otros campos de navegación como groups, pages, icons o enlaces a páginas externas.
+<img className="hidden dark:block pointer-events-none" src="/images/navigation/product-switcher-dark.png" />
+
+Los productos crean una sección de navegación dedicada para organizar la documentación específica de cada producto. Usa productos para separar diferentes ofertas, servicios o conjuntos de funcionalidades principales dentro de tu documentación.
+
+En el objeto `navigation`, `products` es un arreglo en el que cada elemento es un objeto que requiere un campo `product` y puede contener otros campos de navegación, como groups, pages, icon, o enlaces a páginas externas.
 
 ```json
 {
   "navigation": {
     "products": [
       {
-        "product": "API Principal",
+        "product": "Core API",
         "icon": "api",
         "groups": [
           {
@@ -339,7 +343,7 @@
         ]
       },
       {
-        "product": "SDK Móvil",
+        "product": "SDK para móviles",
         "icon": "smartphone",
         "href": "https://mobile-sdk-docs.example.com"
       }
@@ -352,9 +356,9 @@
   ## OpenAPI
 </div>
 
 Integra especificaciones de OpenAPI directamente en tu estructura de navegación para generar automáticamente la documentación de tu API. Crea secciones de API dedicadas o coloca páginas de endpoints dentro de otros componentes de la navegación.
 
 Configura una especificación de OpenAPI predeterminada en cualquier nivel de tu jerarquía de navegación. Los elementos descendientes heredarán esta especificación a menos que definan la suya propia.
 
 ```json
 {
@@ -383,19 +387,19 @@
 }
 ```
 
 Para obtener más información sobre cómo hacer referencia a endpoints de OpenAPI en tu documentación, consulta la [configuración de OpenAPI](/es/api-playground/openapi-setup).
 
 <div id="versions">
   ## Versiones
 </div>
 
 Divide tu navigation en diferentes versiones. Se pueden seleccionar desde un menú desplegable.
 
 <img className="block dark:hidden pointer-events-none" src="/images/navigation/versions-light.png" />
 
 <img className="hidden dark:block pointer-events-none" src="/images/navigation/versions-dark.png" />
 
 En el objeto `navigation`, `versions` es un arreglo donde cada entrada es un objeto que requiere un campo `version` y puede contener cualquier otro campo de navigation.
 
 ```json
 {
@@ -425,47 +429,47 @@
 ```
 
 <div id="languages">
   ## Idiomas
 </div>
 
 Divide tu navigation en diferentes idiomas. Puedes seleccionar los idiomas desde un menú desplegable.
 
 <img className="block dark:hidden pointer-events-none" src="/images/navigation/languages-light.png" />
 
 <img className="hidden dark:block pointer-events-none" src="/images/navigation/languages-dark.png" />
 
 En el objeto `navigation`, `languages` es un arreglo donde cada entrada es un objeto que requiere un campo `language` y puede incluir cualquier otro campo de navigation.
 
 Actualmente admitimos los siguientes idiomas para la localización:
 
 <CardGroup cols={2}>
   <Card title="Arabic (ar)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ar.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Chinese (cn)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/cn.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Chinese (zh-Hant)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/cn.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="English (en)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/en.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="French (fr)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/fr.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="German (de)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/de.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Indonesian (id)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/id.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Italian (it)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/it.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Japanese (jp)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/jp.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Korean (ko)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ko.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Portuguese (pt-BR)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/pt-br.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Russian (ru)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ru.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Spanish (es)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/es.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Turkish (tr)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/tr.png" className="w-6 h-6 my-0" />} horizontal />
 </CardGroup>
 
 ```json
@@ -495,13 +499,13 @@
 }
 ```
 
 Para traducciones automatizadas, [ponte en contacto con nuestro equipo de ventas](mailto:[email protected]) para analizar soluciones.
 
 <div id="nesting">
   ## Anidación
 </div>
 
 Puedes usar cualquier combinación de anclas, pestañas, menús desplegables y productos. Los componentes se pueden anidar entre sí de forma intercambiable para crear la estructura de navigation que desees.
 
 <CodeGroup>
   ```json Anclas
@@ -619,10 +623,10 @@
 </CodeGroup>
 
 <div id="breadcrumbs">
   ## Migas de pan
 </div>
 
 Las migas de pan muestran la ruta completa de navegación en la parte superior de las páginas. Algunos temas las traen habilitadas de forma predeterminada y otros no. Puedes controlar si las migas de pan están habilitadas en tu sitio usando la propiedad `styling` en tu `docs.json`.
 
 <CodeGroup>
   ```json Mostrar migas de pan completas
@@ -642,17 +646,17 @@
   ## Configuración de la interacción
 </div>
 
 Controla cómo los usuarios interactúan con los elementos de navigation usando la propiedad `interaction` en tu `docs.json`.
 
 <div id="enable-auto-navigation-for-groups">
   ### Habilitar la navegación automática para grupos
 </div>
 
 Cuando un usuario expande un grupo de navigation, algunos temas navegarán automáticamente a la primera página del grupo. Puedes anular el comportamiento predeterminado del tema usando la opción `drilldown`.
 
 * Configúralo en `true` para forzar la navegación automática a la primera página cuando se selecciona un grupo de navigation.
 * Configúralo en `false` para evitar la navegación y solo expandir o contraer el grupo al seleccionarlo.
 * Déjalo sin configurar para usar el comportamiento predeterminado del tema.
 
 <CodeGroup>
   ```json Force navigation

fr/organize/navigation.mdx

@@ -1,23 +1,23 @@
 ---
 title: "Navigation"
 description: "Structurez et personnalisez la hiérarchie de navigation de votre documentation"
 ---
 
 La propriété [navigation](fr/settings#param-navigation) dans `docs.json` contrôle la structure et la hiérarchie d’informations de votre documentation.
 
 Avec une configuration de navigation appropriée, vous pouvez organiser votre contenu pour que les utilisateurs trouvent exactement ce qu’ils recherchent.
 
 <div id="pages">
   ## Pages
 </div>
 
 Les pages sont l’élément de navigation le plus fondamental. Elles correspondent aux fichiers MDX qui composent votre documentation.
 
 <img className="block dark:hidden pointer-events-none" src="/images/navigation/pages-light.png" alt="" />
 
 <img className="hidden dark:block pointer-events-none" src="/images/navigation/pages-dark.png" alt="" />
 
 Dans l’objet `navigation`, `pages` est un tableau où chaque entrée doit indiquer le chemin d’accès vers un [fichier de page](fr/pages).
 
 ```json
 {
@@ -37,13 +37,13 @@
   ## Groupes
 </div>
 
 Utilisez des groupes pour organiser la navigation de votre barre latérale en sections. Les groupes peuvent être imbriqués, accompagnés de tags et affichés avec des icons.
 
 <img className="block dark:hidden pointer-events-none" src="/images/navigation/groups-light.png" alt="" />
 
 <img className="hidden dark:block pointer-events-none" src="/images/navigation/groups-dark.png" alt="" />
 
 Dans l’objet `navigation`, `groups` est un tableau où chaque entrée est un objet qui requiert un champ `group` et un champ `pages`. Les champs `icon`, `tag` et `expanded` sont facultatifs.
 
 ```json
 {
@@ -83,7 +83,7 @@
   ### État développé par défaut
 </div>
 
 Définissez `expanded: true` sur un groupe pour qu’il soit développé par défaut dans la barre latérale de navigation. Cela est utile pour mettre en avant des sections importantes ou améliorer la découverte du contenu clé.
 
 ```json
 {
@@ -97,13 +97,13 @@
   ## Tabs
 </div>
 
 Les Tabs créent des sections distinctes dans votre documentation avec des chemins d’URL séparés. Elles affichent une barre de navigation horizontale en haut de la documentation, permettant aux utilisateurs de passer d’une section à l’autre.
 
 <img className="block dark:hidden pointer-events-none" src="/images/navigation/tabs-light.png" alt="" />
 
 <img className="hidden dark:block pointer-events-none" src="/images/navigation/tabs-dark.png" alt="" />
 
 Dans l’objet `navigation`, `tabs` est un tableau dont chaque entrée est un objet qui doit contenir un champ `tab` et peut inclure d’autres champs de navigation tels que des groupes, des pages, des icons ou des liens vers des pages externes.
 
 ```json
 {
@@ -141,9 +141,9 @@
   ### Menus
 </div>
 
 Les menus ajoutent des éléments de navigation déroulants à un onglet. Utilisez-les pour aider les utilisateurs à accéder directement à des pages spécifiques au sein d’un onglet.
 
 Dans l’objet `navigation`, `menu` est un tableau où chaque entrée est un objet qui requiert un champ `item` et peut contenir d’autres champs de navigation tels que des groupes, des pages, des icon, ou des liens vers des pages externes.
 
 ```json
 {
@@ -175,7 +175,7 @@
             "pages": [
               "sdk/fetch",
               "sdk/create",
               "sdk/delete"
             ]
           }
         ]
@@ -186,16 +186,16 @@
 ```
 
 <div id="anchors">
   ## Ancres
 </div>
 
 Les ancres ajoutent des éléments de navigation persistants en haut de votre barre latérale. Utilisez-les pour structurer votre contenu, offrir un accès rapide à des ressources externes ou créer des appels à l’action bien visibles.
 
 <img className="block dark:hidden pointer-events-none" src="/images/navigation/anchors-light.png" />
 
 <img className="hidden dark:block pointer-events-none" src="/images/navigation/anchors-dark.png" />
 
 Dans l’objet `navigation`, `anchors` est un tableau dont chaque entrée est un objet qui doit inclure un champ `anchor` et peut contenir d’autres champs de navigation tels que des groupes, des pages, des icon ou des liens vers des pages externes.
 
 ```json
 {
@@ -228,9 +228,9 @@
 }
 ```
 
 Pour les ancres qui pointent uniquement vers des liens externes, utilisez le mot-clé `global`. Les ancres dans un objet `global` doivent comporter un champ `href` et ne peuvent pas cibler un chemin relatif.
 
 Les ancres globales sont particulièrement utiles pour créer des liens vers des ressources qui ne font pas partie de votre documentation, mais qui doivent rester facilement accessibles à vos utilisateurs, comme un blog ou un portail d’assistance.
 
 ```json
 {
@@ -239,7 +239,7 @@
       "anchors": [
         {
           "anchor": "Communauté",
           "icon": "house",
           "href": "https://slack.com"
         },
         {
@@ -258,13 +258,13 @@
   ## Menus déroulants
 </div>
 
 Les menus déroulants se trouvent dans un menu extensible en haut de la barre latérale de votre navigation. Chaque élément d’un menu déroulant pointe vers une section de votre documentation.
 
 <img className="block dark:hidden pointer-events-none" src="/images/navigation/dropdowns-light.png" />
 
 <img className="hidden dark:block pointer-events-none" src="/images/navigation/dropdowns-dark.png" />
 
 Dans l’objet `navigation`, `dropdowns` est un tableau où chaque entrée est un objet qui requiert un champ `dropdown` et peut contenir d’autres champs de navigation tels que des groupes, des pages, des icon, ou des liens vers des pages externes.
 
 ```json
 {
@@ -298,12 +298,16 @@
 ```
 
 <div id="products">
   ## Produits
 </div>
 
-Les produits créent une section de navigation dédiée pour organiser la documentation propre à chaque produit. Utilisez-les pour séparer différentes offres, services ou ensembles de fonctionnalités majeurs au sein de votre documentation.
+<img className="block dark:hidden pointer-events-none" src="/images/navigation/product-switcher-light.png" />
 
-Dans l’objet `navigation`, `products` est un tableau où chaque entrée est un objet qui doit inclure un champ `product` et peut contenir d’autres champs de navigation, tels que des groups, des pages, des icon ou des liens vers des pages externes.
+<img className="hidden dark:block pointer-events-none" src="/images/navigation/product-switcher-dark.png" />
+
+Les produits créent une section de navigation dédiée pour organiser la documentation propre à chaque produit. Utilisez les produits pour séparer différentes offres, services ou ensembles de fonctionnalités majeures au sein de votre documentation.
+
+Dans l’objet `navigation`, `products` est un tableau où chaque entrée est un objet qui requiert un champ `product` et peut contenir d’autres champs de navigation tels que des groupes, des pages, des icons ou des liens vers des pages externes.
 
 ```json
 {
@@ -352,9 +356,9 @@
   ## OpenAPI
 </div>
 
 Intégrez des spécifications OpenAPI directement dans votre structure de navigation pour générer automatiquement la documentation de votre API. Créez des sections API dédiées ou placez des pages d’endpoints au sein d’autres éléments de navigation.
 
 Définissez une spécification OpenAPI par défaut à n’importe quel niveau de votre hiérarchie de navigation. Les éléments enfants hériteront de cette spécification, sauf s’ils définissent la leur.
 
 ```json
 {
@@ -383,19 +387,19 @@
 }
 ```
 
 Pour en savoir plus sur la façon de référencer des endpoints OpenAPI dans votre documentation, consultez la page [OpenAPI setup](/fr/api-playground/openapi-setup).
 
 <div id="versions">
   ## Versions
 </div>
 
 Divisez votre navigation en différentes versions. Les versions peuvent être sélectionnées à partir d’un menu déroulant.
 
 <img className="block dark:hidden pointer-events-none" src="/images/navigation/versions-light.png" />
 
 <img className="hidden dark:block pointer-events-none" src="/images/navigation/versions-dark.png" />
 
 Dans l’objet `navigation`, `versions` est un tableau où chaque entrée est un objet qui exige un champ `version` et peut contenir n’importe quels autres champs de navigation.
 
 ```json
 {
@@ -425,47 +429,47 @@
 ```
 
 <div id="languages">
   ## Langues
 </div>
 
 Divisez votre navigation par langue. Les langues sont sélectionnables via un menu déroulant.
 
 <img className="block dark:hidden pointer-events-none" src="/images/navigation/languages-light.png" />
 
 <img className="hidden dark:block pointer-events-none" src="/images/navigation/languages-dark.png" />
 
 Dans l’objet `navigation`, `languages` est un tableau où chaque entrée est un objet qui exige un champ `language` et peut contenir tous les autres champs de navigation.
 
 Nous prenons actuellement en charge les langues suivantes pour la localisation :
 
 <CardGroup cols={2}>
   <Card title="Arabic (ar)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ar.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Chinese (cn)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/cn.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Chinese (zh-Hant)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/cn.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="English (en)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/en.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="French (fr)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/fr.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="German (de)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/de.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Indonesian (id)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/id.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Italian (it)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/it.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Japanese (jp)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/jp.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Korean (ko)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ko.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Portuguese (pt-BR)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/pt-br.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Russian (ru)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ru.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Spanish (es)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/es.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Turkish (tr)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/tr.png" className="w-6 h-6 my-0" />} horizontal />
 </CardGroup>
 
 ```json
@@ -495,13 +499,13 @@
 }
 ```
 
 Pour les traductions automatisées, [contactez notre équipe commerciale](mailto:[email protected]) pour discuter de solutions.
 
 <div id="nesting">
   ## Imbrication
 </div>
 
 Vous pouvez utiliser n’importe quelle combinaison d’ancres, d’onglets, de menus déroulants et de produits. Les composants peuvent être imbriqués les uns dans les autres de manière interchangeable pour créer la structure de navigation de votre choix.
 
 <CodeGroup>
   ```json Ancres
@@ -514,9 +518,9 @@
             {
               "group": "Group 1",
               "pages": [
                 "some-folder/file-1",
                 "another-folder/file-2",
                 "just-a-file"
               ]
             }
           ]
@@ -619,10 +623,10 @@
 </CodeGroup>
 
 <div id="breadcrumbs">
   ## Fil d’Ariane
 </div>
 
 Le fil d’Ariane affiche le chemin de navigation complet en haut des pages. Certains thèmes activent le fil d’Ariane par défaut, d’autres non. Vous pouvez contrôler son activation pour votre site à l’aide de la propriété `styling` dans votre `docs.json`.
 
 <CodeGroup>
   ```json Display full breadcrumbs
@@ -639,20 +643,20 @@
 </CodeGroup>
 
 <div id="interaction-configuration">
   ## Configuration des interactions
 </div>
 
 Contrôlez la manière dont les utilisateurs interagissent avec les éléments de navigation à l&#39;aide de la propriété `interaction` dans votre `docs.json`.
 
 <div id="enable-auto-navigation-for-groups">
   ### Activer la navigation automatique pour les groupes
 </div>
 
 Lorsqu’un utilisateur ouvre un groupe de navigation, certains thèmes redirigent automatiquement vers la première page du groupe. Vous pouvez modifier le comportement par défaut d’un thème avec l’option `drilldown`.
 
 * Définissez `true` pour forcer la navigation automatique vers la première page lorsqu’un groupe de navigation est sélectionné.
 * Définissez `false` pour empêcher la navigation et uniquement développer ou réduire le groupe lorsqu’il est sélectionné.
 * Laissez la valeur non définie pour utiliser le comportement par défaut du thème.
 
 <CodeGroup>
   ```json Forcer la navigation

zh/organize/navigation.mdx

@@ -298,12 +298,16 @@
 ```
 
 <div id="products">
-  ## 产品
+  ## Products
 </div>
 
-“产品”会在导航中创建一个专用分区，用于组织特定产品的文档。使用产品可在文档中区分不同的产品、服务或主要功能集。
+<img className="block dark:hidden pointer-events-none" src="/images/navigation/product-switcher-light.png" />
 
-在 `navigation` 对象中，`products` 是一个数组，其中每个条目都是一个对象，必须包含 `product` 字段，并且可以包含其他导航字段，例如 groups、pages、icons，或指向外部页面的链接。
+<img className="hidden dark:block pointer-events-none" src="/images/navigation/product-switcher-dark.png" />
+
+Products 会为产品相关文档创建一个独立的导航分区，用于组织产品级文档。使用 Products 可以在文档中区分不同的产品、服务或大型功能集。
+
+在 `navigation` 对象中，`products` 是一个数组，其中每个条目都是一个对象，必须包含 `product` 字段，并且可以包含其他导航字段，例如 groups、pages、icon，或指向外部页面的链接。
 
 ```json
 {
@@ -439,33 +443,33 @@
 我们目前支持以下本地化语言：
 
 <CardGroup cols={2}>
   <Card title="Arabic (ar)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ar.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Chinese (cn)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/cn.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Chinese (zh-Hant)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/cn.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="English (en)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/en.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="French (fr)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/fr.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="German (de)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/de.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Indonesian (id)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/id.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Italian (it)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/it.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Japanese (jp)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/jp.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Korean (ko)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ko.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Portuguese (pt-BR)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/pt-br.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Russian (ru)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/ru.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Spanish (es)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/es.png" className="w-6 h-6 my-0" />} horizontal />
 
   <Card title="Turkish (tr)" icon={<img src="https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/navigation/languages/tr.png" className="w-6 h-6 my-0" />} horizontal />
 </CardGroup>
 
 ```json