implement ssg config for blog posts in project ,

app/components/LanguageSwitcher.vue

@@ -3,23 +3,22 @@
     <!-- Nuxt UI Select-based language picker -->
     <USelect v-model="model" :items="items" value-key="value" size="sm" color="primary" variant="soft"
       :highlight="false" arrow :trailing="true" placeholder="Language"
-      class="px-1 w-[64px] sm:w-[76px] rounded-full ring-1 ring-gray-200/70 dark:ring-gray-700/60 backdrop-blur-md shadow-sm h-[25px]"
+      class="px-1 w-[64px] sm:w-[76px] rounded-full ring-1 ring-gray-200/70 dark:ring-gray-700/60 backdrop-blur-md shadow-sm h-[25px] hover:ring-primary-500/50 hover:shadow-md transition-all duration-200"
       :ui="{
         base: 'rounded-full',
-        value: 'sr-only',
         trailingIcon: 'text-dimmed group-data-[state=open]:rotate-180 transition-transform duration-200',
-        content: 'min-w-fit'
-      }" aria-label="Language selector">
+        content: 'min-w-fit scale-fade-in'
+      }" :aria-label="t('nav.languageSelector')">
 
-      <!-- Leading icon in trigger (already provided by :icon via selectedIcon) -->
-      <template #leading="{ ui }">
+      <!-- Leading icon in trigger -->
+      <template #leading>
         <UIcon :name="selectedIcon" class="text-[16px]" />
       </template>
       <template #item-leading="{ item }">
         <UIcon :name="item.icon" class="text-[16px]" />
       </template>
       <template #item-label="{ item }">
-        <span>{{ item.label }}</span>
+        <!-- <span>{{ item.label }}</span> -->
       </template>
     </USelect>
   </ClientOnly>
@@ -29,7 +28,9 @@
 import { ref, computed, watch } from '#imports'
 import { useLocaleSwitching, useLoadingIndicator } from '#imports'
 
-const { locale, setLocale } = useI18n()
+const { locale, setLocale, t } = useI18n()
+const switchLocalePath = useSwitchLocalePath()
+const router = useRouter()
 
 type LangValue = 'en' | 'fa'
 type Item = { label: string; value: LangValue; icon: string }
@@ -53,14 +54,40 @@ const selectedIcon = computed<string>(() => items.value.find(i => i.value === mo
 const { startLocaleSwitching } = useLocaleSwitching()
 const loading = useLoadingIndicator()
 
-// On selection change, run visual feedback and update i18n
-watch(model, (val, oldVal) => {
+// On selection change, update locale and navigate
+watch(model, async (val, oldVal) => {
   if (val === oldVal) return
+
+  // Preserve scroll position
+  const scrollY = window.scrollY
+
   startLocaleSwitching(600)
   if (loading) {
     loading.start()
+  }
+
+  // Update locale
+  await setLocale(val)
+
+  // Get the current route path without locale prefix
+  const currentPath = router.currentRoute.value.path
+  const pathWithoutLocale = currentPath.replace(/^\/(en|fa)/, '')
+
+  // Build new path with new locale
+  const newLocalePrefix = val === 'en' ? '' : `/${val}`
+  const newPath = `${newLocalePrefix}${pathWithoutLocale || '/'}`
+
+  // Navigate to new path
+  if (newPath !== currentPath) {
+    await router.push(newPath)
+  }
+
+  // Restore scroll position after navigation
+  await nextTick()
+  window.scrollTo(0, scrollY)
+
+  if (loading) {
     setTimeout(() => loading.finish(), 600)
   }
-  setLocale(val)
 })
 </script>