fix(v2): navbar dropdown subitems should be translated properly(#4118)

packages/docusaurus-theme-classic/src/__tests__/__snapshots__/translations.test.ts.snap

@@ -12,6 +12,10 @@ Array [
         "description": "Navbar item with label Dropdown item 1",
         "message": "Dropdown item 1",
       },
+      "item.label.Dropdown item 2": Object {
+        "description": "Navbar item with label Dropdown item 2",
+        "message": "Dropdown item 2",
+      },
       "title": Object {
         "description": "The title in the navbar",
         "message": "navbar title",
@@ -94,7 +98,11 @@ Object {
         "items": Array [
           Object {
             "items": Array [],
-            "label": "Dropdown item 1",
+            "label": "Dropdown item 1 (translated)",
+          },
+          Object {
+            "items": Array [],
+            "label": "Dropdown item 2 (translated)",
           },
         ],
         "label": "Dropdown (translated)",

packages/docusaurus-theme-classic/src/__tests__/translations.test.ts

@@ -22,7 +22,13 @@ const ThemeConfigSample: ThemeConfig = {
     style: 'dark',
     hideOnScroll: false,
     items: [
-      {label: 'Dropdown', items: [{label: 'Dropdown item 1', items: []}]},
+      {
+        label: 'Dropdown',
+        items: [
+          {label: 'Dropdown item 1', items: []},
+          {label: 'Dropdown item 2', items: []},
+        ],
+      },
     ],
   },
   footer: {

packages/docusaurus-theme-classic/src/translations.ts

@@ -54,11 +54,20 @@ function translateNavbar(
     ...navbar,
     title: navbarTranslations.title?.message ?? navbar.title,
     //  TODO handle properly all the navbar item types here!
-    items: navbar.items.map((item) => ({
+    items: navbar.items.map((item) => {
-      ...item,
+      const subItems = item.items?.map((subItem) => ({
-      label:
+        ...subItem,
-        navbarTranslations[`item.label.${item.label}`]?.message ?? item.label,
+        label:
-    })),
+          navbarTranslations[`item.label.${subItem.label}`]?.message ??
+          subItem.label,
+      }));
+      return {
+        ...item,
+        label:
+          navbarTranslations[`item.label.${item.label}`]?.message ?? item.label,
+        ...(subItems ? {items: subItems} : undefined),
+      };
+    }),
   };
 }