feat: Add menu to navigate to the domestic mirror address

hellof2e · Apr 2, 2024 · e1bb7f4 · e1bb7f4
1 parent e2845a4
commit e1bb7f4
Showing 1 changed file with 57 additions and 1 deletion.
diff --git a/src/index.tsx b/src/index.tsx
@@ -26,6 +26,9 @@ const langs = {
       "Svelte",
       "Angular",
     ],
+    domesticMirror: "国内镜像",
+    mirrorAddress: "镜像地址",
+    mirrors: ["Github", "Gitee"]
   },
   "en-US": {
     ecosystem: "Ecosystem",
@@ -47,6 +50,9 @@ const langs = {
       "Svelte",
       "Angular",
     ],
+    domesticMirror: "Domestic Mirror",
+    mirrorAddress: "Mirror Address",
+    mirrors: ["Github", "Gitee"],
   },
 };
 
@@ -422,6 +428,57 @@ class MyComponent extends QuarkElement {
                       </div>
                     </div>
                   </div>
+                  <div class="nav-item flyout">
+                    <button type="button">
+                      <span>{this.#ecosystemLangs.domesticMirror}</span>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        aria-hidden="true"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                        class="flyout-button-text-icon"
+                      >
+                        <path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path>
+                      </svg>
+                    </button>
+
+                    <div class="flyout-menu">
+                      <div class="menu-wrap">
+                        <div class="menu-items">
+                          <div class="menu-item-group">
+                            <p class="menu-group-title">
+                              {this.#ecosystemLangs.mirrorAddress}
+                            </p>
+                            {this.#ecosystemLangs.mirrors.map((item) => (
+                              <a
+                                key={item}
+                                class="link menu-link"
+                                href={`https://quark-ecosystem.${item.toLocaleLowerCase()}.io/quarkd-docs/#/${
+                                  this.#isZhLang ? "zh-CN" : "en-US"
+                                }`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                              >
+                                {item} {this.#isZhLang ? "镜像" : "Mirror"}
+                                <svg
+                                  xmlns="http://www.w3.org/2000/svg"
+                                  aria-hidden="true"
+                                  focusable="false"
+                                  height="24px"
+                                  viewBox="0 0 24 24"
+                                  width="24px"
+                                  class="link-icon"
+                                >
+                                  <path d="M0 0h24v24H0V0z" fill="none"></path>
+                                  <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path>
+                                </svg>
+                              </a>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
 
                 <div class="translations">
@@ -444,7 +501,6 @@ class MyComponent extends QuarkElement {
                     </svg>
                   </a>
                 </div>
-
                 <div class="appearance">
                   <dark-mode />
                 </div>