feat: add API docs to the menu (#85)

# What ❔

Add API Documentation to the Tools menu item:

<img width="343" alt="Screenshot 2023-11-09 at 15 00 10"
src="https://github.com/matter-labs/block-explorer/assets/6553665/8a65ec50-6ef3-499d-bb4f-458695cc8062">
<img width="546" alt="Screenshot 2023-11-09 at 15 00 28"
src="https://github.com/matter-labs/block-explorer/assets/6553665/cbc41808-153a-4046-a015-4e27e4f11302">


## Why ❔

We want developers to easier find API Documentation on their own.

## Checklist

<!-- Check your PR fulfills the following items. -->
<!-- For draft PRs check the boxes as you complete them. -->

- [X] PR title corresponds to the body of PR (we generate changelog
entries from PRs).
- [X] Tests for the changes have been added / updated.

packages/app/src/components/header/TheHeader.vue

@@ -179,6 +179,10 @@ const blockExplorerLinks = reactive([
 ]);
 
 const links = [
+  {
+    label: computed(() => t("header.nav.apiDocs")),
+    url: computed(() => `${currentNetwork.value.apiUrl}/docs`),
+  },
   {
     label: computed(() => t("header.nav.contractVerification")),
     to: { name: "contract-verification" },

packages/app/src/locales/en.json

@@ -289,6 +289,7 @@
             "portal": "Portal",
             "documentation": "Documentation",
             "tools": "Tools",
+            "apiDocs": "API Documentation",
             "contractVerification": "Smart Contract Verification",
             "debugger": "zkEVM Debugger",
             "bridge": "Bridge"

packages/app/src/locales/uk.json

@@ -145,6 +145,7 @@
     "header": {
         "nav": {
             "tools": "Інструменти",
+            "apiDocs": "АРІ Документація",
             "contractVerification": "Верифікація Смарт контракту",
             "debugger": "zkEVM Налагоджувач",
             "blockExplorer": "Провідник",

packages/app/tests/components/TheHeader.spec.ts

@@ -25,6 +25,7 @@ vi.mock("@/composables/useContext", () => {
         maintenance: maintenanceMock(),
         l2WalletUrl: "https://portal.zksync.io/",
         bridgeUrl: "https://bridge.zksync.io/",
+        apiUrl: "https://api-url",
       })),
     }),
   };
@@ -57,9 +58,9 @@ describe("TheHeader:", () => {
     await fireEvent.click(dropdown[1].find("button")!.element);
     const toolsLinksRouter = dropdown[1].findAllComponents(RouterLinkStub);
     const toolsLinks = dropdown[1].findAll("a");
+    expect(toolsLinks[0].attributes("href")).toBe("https://api-url/docs");
     expect(toolsLinksRouter[0].props().to.name).toBe("contract-verification");
-    // expect(toolsLinksRouter[1].props().to.name).toBe("debugger");
-    expect(toolsLinks[1].attributes("href")).toBe("https://portal.zksync.io/");
+    expect(toolsLinks[2].attributes("href")).toBe("https://portal.zksync.io/");
 
     expect(wrapper.findAll(".navigation-container > .navigation-link")[0].attributes("href")).toBe(
       "https://era.zksync.io/docs/dev/"