From 69c5b0ff834cdf7cd3fa3893eafd838f3e4e4d2c Mon Sep 17 00:00:00 2001
From: mDuo13 <mduo13@gmail.com>
Date: Tue, 26 Mar 2024 13:45:45 -0700
Subject: [PATCH] Make top nav translatable, with examples

---
 @i18n/ja/translations.yaml          |  8 +++++++-
 @theme/components/Navbar/Navbar.tsx | 14 +++++++++-----
 sidebars.yaml                       |  2 ++
 top-nav.yaml                        |  5 +++++
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/@i18n/ja/translations.yaml b/@i18n/ja/translations.yaml
index 31ccb83c30..90193115e4 100644
--- a/@i18n/ja/translations.yaml
+++ b/@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: ページを編集
@@ -296,4 +302,4 @@ Other Categories: 他のカテゴリ
 Proven Powerful for Innovation: イノベーションのための確かな実績
 XRPL Use Cases: XRPLのユースケース
 Building businesses and creating new value: ビジネスの構築と新たな価値の創造
-XRPL Ecosystem: XRPLエコシステム
\ No newline at end of file
+XRPL Ecosystem: XRPLエコシステム
diff --git a/@theme/components/Navbar/Navbar.tsx b/@theme/components/Navbar/Navbar.tsx
index e3aeddcde6..a900a1f581 100644
--- a/@theme/components/Navbar/Navbar.tsx
+++ b/@theme/components/Navbar/Navbar.tsx
@@ -230,7 +230,7 @@ export function NavDropdown(props) {
         }
         return (
           <a key={index2} className={cls2} href={item2_href}>
-            {item2.label}
+            {translate(item2.labelTranslationKey, item2.label)}
           </a>
         );
       });
@@ -239,7 +239,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>
       );
@@ -252,8 +252,12 @@ export function NavDropdown(props) {
         hero_href = pathPrefix + hero_href;
       }
       const splitlabel = item.label.split(" || ");
-      const newlabel = splitlabel[0];
-      const description = splitlabel[1]; // might be undefined, that's ok
+      let splittranslationkey = ["",""]
+      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
@@ -279,7 +283,7 @@ export function NavDropdown(props) {
       }
       return (
         <a key={index} className={cls} href={item_href}>
-          {item.label}
+          {translate(item.labelTranslationKey, item.label)}
         </a>
       );
     }
diff --git a/sidebars.yaml b/sidebars.yaml
index ca5ef0906e..2b650cbf9f 100644
--- a/sidebars.yaml
+++ b/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
diff --git a/top-nav.yaml b/top-nav.yaml
index 6eae19943e..6b7062c44a 100644
--- a/top-nav.yaml
+++ b/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: