LanguageButton.vue

<template>
    <div class="dropdown-container">
        <label for="language-select"><i>{{ $t('text.readIn') }}</i></label>
        <select id="language-select" v-model="selectedLanguage" @change="handleLanguageChange" >
        <option value="en">English</option>
        <option value="es">Español</option>
        </select>
    </div>
</template>
  
  
<script setup>
import { ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter, useRoute } from 'vue-router';

const { locale } = useI18n();
const router = useRouter();
const route = useRoute();

// Create a reactive variable to track the selected language
const selectedLanguage = ref(locale.value);

function handleLanguageChange() {
    switchLanguage(selectedLanguage.value);
}

function switchLanguage(lang) {
  if (locale.value !== lang) {
    locale.value = lang;

    // Remove any existing language prefix from the current path
    const currentPath = route.path.replace(/^\/(en|es)/, '');

    // Construct the new path with the selected language
    router.push({
      path: `/${lang}${currentPath || '/'}`
    });
  }
}

// Watch for changes in route language parameter to sync with selectedLanguage
watch(
  () => route.params.lang,
  (newLang) => {
    if (newLang && locale.value !== newLang) {
      locale.value = newLang;
      selectedLanguage.value = newLang;
    }
  },
  { immediate: true }
);
</script>


<style scoped lang="scss">
.dropdown-container {
  display: flex;
  justify-content: flex-end; /* Align to the right */
  align-items: center;
  padding: 0px;
}

select {
  margin-left: 10px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}

select:focus {
  outline: none;
  border-color: #007bff;
}

</style>