Merge pull request #2499 from XRPLF/translate_nav_label

Make top nav translatable, with examples

@i18n/ja/translations.yaml

@@ -11,6 +11,12 @@ sidebar.docs.tutorials: チュートリアル
 sidebar.docs.references: リファレンス
 sidebars.resources: リソース
 sidebar.resources.codesamples: コードサンプル
+topnav.docs.title: ドキュメント
+topnav.docs.description: XRPL技術に掘り下げて組み込めましょう。
+topnav.resources.current-status: 現在のステータス
+topnav.resources.explorer: エクスプローラ
+topnav.community.title: コミュニティ
+topnav.community.description: 話題に加わろう。
 Open Source.: オープンソース
 Jump to top of page: ページの先頭へ
 Edit page: ページを編集

@theme/components/Navbar/Navbar.tsx

@@ -165,7 +165,7 @@ export function NavDropdown(props) {
         }
         return (
           <a key={index2} className={cls2} href={item2_href}>
-            {item2.label}
+            {translate(item2.labelTranslationKey, item2.label)}
           </a>
         );
       });
@@ -174,7 +174,7 @@ export function NavDropdown(props) {
 
       return (
         <div key={index} className={clnm}>
-          <h5 className="dropdown-item">{item.label}</h5>
+          <h5 className="dropdown-item">{translate(item.labelTranslationKey, item.label)}</h5>
           {groupLinks}
         </div>
       );
@@ -187,8 +187,12 @@ export function NavDropdown(props) {
         hero_href = pathPrefix + hero_href;
       }
       const splitlabel = item.label.split(" || ");
-      const newlabel = splitlabel[0];
+      let splittranslationkey = ["",""]
-      const description = splitlabel[1]; // might be undefined, that's ok
+      if (item.labelTranslationKey) {
+        splittranslationkey = item.labelTranslationKey.split(" || ");
+      }
+      const newlabel = translate(splittranslationkey[0], splitlabel[0]);
+      const description = translate(splittranslationkey[1], splitlabel[1]); // splitlabel[1] might be undefined, that's ok
 
       return (
         <a
@@ -214,7 +218,7 @@ export function NavDropdown(props) {
       }
       return (
         <a key={index} className={cls} href={item_href}>
-          {item.label}
+          {translate(item.labelTranslationKey, item.label)}
         </a>
       );
     }

sidebars.yaml

@@ -155,6 +155,7 @@
             - page: docs/concepts/xrpl-sidechains/witness-servers.md
     - page: docs/tutorials/index.md
       label: Tutorials
+      labelTranslationKey: sidebar.docs.tutorials
       expanded: false
       items:
         - page: docs/tutorials/public-servers.md
@@ -284,6 +285,7 @@
                 - page: docs/tutorials/how-tos/use-xrpl-sidechains/set-up-iou-iou-bridge.md
                 - page: docs/tutorials/how-tos/use-xrpl-sidechains/submit-cross-chain-transaction.md
     - page: docs/references/index.md
+      labelTranslationKey: sidebar.docs.references
       expanded: false
       items:
         - page: docs/references/protocol/index.md

top-nav.yaml

@@ -33,12 +33,14 @@
     - icon: ./static/img/icons/docs.svg
     # Note: arbitrary keys are dropped from these items, so the label & description are split on " || "
       label: Documentation || Dive into XRP Ledger technology and start integrating.
+      labelTranslationKey: topnav.docs.title || topnav.docs.description
       page: ./docs/index.page.tsx
     - group: Article Types
       items:
         - page: ./docs/concepts/index.md
         - page: ./docs/tutorials/index.md
           label: Tutorials
+          labelTranslationKey: sidebar.docs.tutorials
         - page: ./docs/references/index.md
         - page: ./docs/infrastructure/index.md
     - group: Use Cases
@@ -68,8 +70,10 @@
         - label: XRPL Brand Kit
           href: /XRPL_Brand_Kit.zip
     - group: Current Status
+      groupTranslationKey: topnav.resources.current-status
       items:
         - label: Ledger Explorer
+          labelTranslationKey: topnav.resources.explorer
           href: https://livenet.xrpl.org/
           external: true
         - label: Known Amendments
@@ -86,6 +90,7 @@
   items:
     - icon: ./static/img/icons/contribute.svg
       label: Contribute to the XRPL Community || Join the conversation
+      labelTranslationKey: topnav.community.title || topnav.community.description
       href: /community/
     - group: Get Involved
       items: