Merge branch 'master' of http://git.digital-tps.tk/TPS/birzha-legalizasia-frontend

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "cSpell.words": [
+        "dili",
+        "Türkmen"
+    ]
+}

src/components/top-bar/Main.vue

@@ -160,6 +160,51 @@
         </DropdownMenu>
       </Dropdown>
       <!-- END: Notifications -->
+
+      <!-- BEGIN: Languages -->
+      <Dropdown class="intro-x w-8 mr-4 sm:mr-6">
+        <DropdownToggle
+          tag="div"
+          role="button"
+          class="w-6 h-6 rounded-full overflow-hidden shadow-lg image-fit zoom-in scale-110"
+        >
+          <img
+            alt="flag"
+            :src="`/src/assets/images/flags/${selectedLang}.png`"
+          />
+        </DropdownToggle>
+
+        <DropdownMenu class="pt-2">
+          <DropdownContent tag="div">
+            <div
+              v-for="(lang, key) in languages"
+              :key="key"
+              class="cursor-pointer relative flex items-center"
+              :class="{ 'mt-5': key }"
+              @click="onLanguageChanged(lang.code)"
+            >
+              <div class="w-5 h-5 flex-none image-fit mr-1">
+                <img
+                  alt="Icewall Tailwind HTML Admin Template"
+                  class="rounded-full"
+                  :src="`/src/assets/images/flags/${lang.code}.png`"
+                />
+              </div>
+
+              <div class="ml-2 overflow-hidden">
+                <div class="flex items-center">
+                  <a href="javascript:;" class="font-medium truncate mr-5">{{
+                    lang.label
+                  }}</a>
+                  <!-- <a class="font-medium truncate mr-5">Rus Dili</a> -->
+                </div>
+              </div>
+            </div>
+          </DropdownContent>
+        </DropdownMenu>
+      </Dropdown>
+      <!-- END: Languages -->
+
       <!-- BEGIN: Account Menu -->
       <Dropdown class="intro-x w-8 h-8">
         <DropdownToggle
@@ -215,8 +260,9 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onBeforeMount } from "vue";
 import { useAuthStore } from "@/stores";
+import { SELECTED_LANG } from "@/helpers";
 
 const searchDropdown = ref(false);
 const showSearchDropdown = () => {
@@ -226,9 +272,38 @@ const hideSearchDropdown = () => {
   searchDropdown.value = false;
 };
 
+const selectedLang = ref("");
+const languages = [
+  {
+    code: "tm",
+    label: "Türkmen dili",
+  },
+  {
+    code: "ru",
+    label: "Русский",
+  },
+  {
+    code: "en",
+    label: "English",
+  },
+];
+
 const onLogout = () => {
   console.log("Logout");
   const authStore = useAuthStore();
   return authStore.logout();
 };
+
+const onLanguageChanged = (val) => {
+  selectedLang.value = val;
+  // i18n.locale = val;
+  localStorage.setItem(SELECTED_LANG, val);
+};
+
+onBeforeMount(() => {
+  const lang = localStorage.getItem(SELECTED_LANG);
+
+  if (lang) selectedLang.value = lang;
+  else selectedLang.value = "tm";
+});
 </script>

src/helpers/constants.js

@@ -1,2 +1,3 @@
 // localStorage items
 export const USER = "user";
+export const SELECTED_LANG = "selectedLang"