feat: add google translate button

.prettierignore

@@ -1,5 +1,4 @@
 node_modules
 .github
 .idea
-public
 **/*.md

app.config.ts

@@ -57,15 +57,7 @@ export default defineAppConfig({
     },
     search: true,
     colorMode: true,
-    links: [
-      {
-        icon: 'i-simple-icons-github',
-        to: 'https://github.com/matter-labs/zksync-docs',
-        target: '_blank',
-        'aria-label': 'zkSync Docs on GitHub',
-        title: 'zkSync Docs on GitHub',
-      },
-    ],
+    links: [],
   },
   footer: {
     credits: 'Made with ❤️ by Matter Labs & Community',

components/HeaderComponent.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { NavItem } from '@nuxt/content/dist/runtime/types';
 import type { Link } from '@nuxt/ui-pro/types';
+// import GoogleTranslateSelect from '@google-translate-select/vue3';
 
 defineProps<{
   links: Link[];
@@ -28,12 +29,6 @@ const { header } = useAppConfig();
     </template>
 
     <template #right>
-      <UContentSearchButton
-        v-if="header?.search"
-        :label="undefined"
-        class="lg:hidden"
-      />
-
       <UColorModeButton v-if="header?.colorMode" />
 
       <template v-if="header?.links">
@@ -44,11 +39,33 @@ const { header } = useAppConfig();
         />
       </template>
 
-      <UContentSearchButton class="hidden max-w-[180px] lg:flex" />
+      <UContentSearchButton
+        v-if="header?.search"
+        :label="undefined"
+        class="hidden max-w-[160px] lg:flex"
+      />
+
+      <ClientOnly>
+        <GoogleTranslate
+          default-language-code="en"
+          default-page-language-code="en"
+          :fetch-browser-language="false"
+          trigger="click"
+        />
+      </ClientOnly>
     </template>
 
     <template #panel>
-      <UNavigationTree :links="mapContentNavigation(navigation)" />
+      <UContentSearchButton
+        v-if="header?.search"
+        :label="undefined"
+        class="mb-4 w-full"
+      />
+      <UNavigationTree
+        :links="mapContentNavigation(navigation)"
+        default-open
+        :multiple="false"
+      />
     </template>
   </UHeader>
 </template>

package.json

@@ -34,6 +34,7 @@
     "typescript": "^5.0.0"
   },
   "dependencies": {
+    "@google-translate-select/vue3": "^0.1.8",
     "@iconify-json/devicon": "^1.1.39",
     "@iconify-json/heroicons": "^1.1.20",
     "@iconify-json/simple-icons": "^1.1.95",

public/main.css

@@ -3,3 +3,11 @@ body {
   text-rendering: optimizeLegibility;
   letter-spacing: 0.1px;
 }
+
+.google-translate-select-language {
+  font-size: 14px;
+  line-height: 12px;
+}
+.google-translate-select-flag {
+  display: none !important;
+}