From 5c82a01203dea3fc73eb8abbd0285548d3097c94 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Fri, 6 Sep 2024 21:50:48 +0200
Subject: [PATCH] chore: include logic for mobile

---
 .../components/VPNavScreenTranslations.vue    | 53 +++++++++++++++----
 1 file changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/client/theme-default/components/VPNavScreenTranslations.vue b/src/client/theme-default/components/VPNavScreenTranslations.vue
index a0b6261a..11581a85 100644
--- a/src/client/theme-default/components/VPNavScreenTranslations.vue
+++ b/src/client/theme-default/components/VPNavScreenTranslations.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useLangs } from '../composables/langs'
 import VPLink from './VPLink.vue'
+import VPSocialLink from "./VPSocialLink.vue";
 
 const { localeLinks, currentLang } = useLangs({ correspondingLink: true })
 const isOpen = ref(false)
-// for helping translate
-// const repoLink = computed(() => currentLang.value.repo || (localeLinks.value.length > 1 && localeLinks.value.some(l => !!l.repo)))
+const repo = computed(() => !!currentLang.value.repo || (localeLinks.value.length > 1 && localeLinks.value.some(l => !!l.repo)))
 
 function toggle() {
   isOpen.value = !isOpen.value
@@ -17,17 +17,26 @@ function toggle() {
   <div
     v-if="localeLinks.length && currentLang.label"
     class="VPNavScreenTranslations"
-    :class="{ open: isOpen }"
+    :class="{ open: isOpen, repo }"
   >
-    <button class="title" @click="toggle">
-      <span class="vpi-languages icon lang" />
-      {{ currentLang.label }}
-      <span class="vpi-chevron-down icon chevron" />
+    <button class="title" :class="{ repo: !!currentLang.repo }" @click="toggle">
+      <span v-if="currentLang.repo" class="repo">
+        <span class="vpi-languages icon lang" />
+        <span>{{ currentLang.label }}</span>
+        <span class="vpi-chevron-down icon chevron" />
+      </span>
+      <template v-else>
+        <span class="vpi-languages icon lang" />
+        <span>{{ currentLang.label }}</span>
+        <span class="vpi-chevron-down icon chevron" />
+      </template>
+      <VPSocialLink v-if="currentLang.repo" icon="github" :link="currentLang.repo.link" :ariaLabel="currentLang.repo.title" />
     </button>
 
     <ul class="list">
-      <li v-for="locale in localeLinks" :key="locale.link" class="item">
+      <li v-for="locale in localeLinks" :key="locale.link" :class="{ repo: !!locale.repo }" class="item">
         <VPLink class="link" :href="locale.link">{{ locale.text }}</VPLink>
+        <VPSocialLink v-if="locale.repo" icon="github" :link="locale.repo.link" :ariaLabel="locale.repo.title" />
       </li>
     </ul>
   </div>
@@ -39,16 +48,34 @@ function toggle() {
   overflow: hidden;
 }
 
+.VPNavScreenTranslations.repo {
+  height: 40px;
+}
+
 .VPNavScreenTranslations.open {
   height: auto;
 }
 
-.title {
+.title, .title.repo .repo {
   display: flex;
   align-items: center;
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-1);
+
+}
+
+.VPNavScreenTranslations .title .vpi-chevron-down {
+  transition: transform 0.25s;
+  transform: rotate(90deg);
+}
+.VPNavScreenTranslations.open .title .vpi-chevron-down {
+  transform: rotate(-90deg);
+}
+
+.title.repo {
+  width: 100%;
+  justify-content: space-between;
 }
 
 .icon {
@@ -67,6 +94,12 @@ function toggle() {
   padding: 4px 0 0 24px;
 }
 
+.list .item.repo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .link {
   line-height: 32px;
   font-size: 13px;