make button a dropdown

src/assets/text/text_en.js

 export default {
   pageTitle: "Unequal access to water",
   pageSubtitle: "How societal factors shape vulnerability to water insecurity",
+  readIn: 'Read in: ',
   components: {
     introNarrative: {
       paragraph1: `Imagine, for example, that you live in a big house in the suburbs where clean water flows out of every faucet. There’s enough water for you and your family to grow a nice garden every year. The public water supplier treats the water and maintains the distribution system regularly, so you know the water is safe for you to drink.`,

src/assets/text/text_es.js

 export default {
   pageTitle: "Desigualdad de acceso al agua",
   pageSubtitle: "Por qué los factores sociales determinan el nivel de riesgo de la falta de agua potable",
+  readIn: 'Leer en: ',
   components: {
     introNarrative: {
       paragraph1: `Imagine, por ejemplo, que vive en una casa grande de una zona residencial donde el agua potable fluye de cada grifo. Hay suficiente agua para que disfrute con su familia de un bonito jardín cada año. La compañía de agua se ocupa de tratarla y mantener los sistemas de tuberías con regularidad, para asegurarse de que el agua continúe siendo apta para el consumo humano.`,

src/components/BeeswarmChart.vue

 <template>
   <section id="beeswarm">
+    <div id="text1" class="text-container">
+    <LanguageButton />
+    </div>
     <div id="text1" class="text-container">
     <p v-html="t('text.components.chartText.bubbleCheckbox')"></p>
     <!-- Render the translated labels within the span elements -->
@@ -66,6 +69,7 @@
 import { onMounted, ref } from "vue";
 import * as d3 from 'd3';
 import { useI18n } from 'vue-i18n';
+import LanguageButton from '@/components/LanguageButton.vue';
 
 const { t } = useI18n();
 const userLang = navigator.language || navigator.userLanguage;
@@ -553,7 +557,9 @@ $ThemeGrey: var(--color-themegrey);
       margin: 10px;
     }
   }
-
+LanguageButton {
+  align-items: right;
+}
   #water-insecurity-tooltip {
     margin-left: -160px;
   }

src/components/LanguageButton.vue

 <template>
-    <div class="button-container" >
-        <i>Read in 
-      <button @click="switchLanguage('en')">English</button>
-      Leer en 
-      <button @click="switchLanguage('es')">Español</button>
-        </i>
+    <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>
+</template>
   
-  <script setup>
-  import { useI18n } from 'vue-i18n';
-  import { useRouter, useRoute } from 'vue-router';
   
-  const { locale } = useI18n();
-  const router = useRouter();
-  const route = useRoute();
-  
-  function switchLanguage(lang) {
-    locale.value = lang;
-    
-    // Update the URL with language ending
+<script setup>
+import { ref } 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(event) {
+    switchLanguage(selectedLanguage.value);
+}
+
+function switchLanguage(lang) {
+  if (locale.value !== lang) {
+    locale.value = lang; // Update the locale
+
+    // Update the URL with the new language
     router.push({
       path: `/${lang}${route.path.substring(3) || ''}` // Preserve the existing path, only change the language
     });
   }
-  </script>
+}
+</script>
+
 
 <style scoped lang="scss">
-button {
-    color: black;
-    padding: 2px 5px;
-    border-radius: 10px;
-    white-space: nowrap;
-    font-weight: bold;
-    cursor: pointer;
-    transition: all 0.1s;
+.dropdown-container {
+  display: flex;
+  justify-content: flex-end; /* Align to the right */
+  align-items: center;
+  padding: 0px;
 }
-.button-container {
-    padding: 5px;
+
+select {
+  margin-left: 10px;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  font-weight: bold;
+  cursor: pointer;
+  transition: all 0.2s;
 }
-p {
 
+select:focus {
+  outline: none;
+  border-color: #007bff;
 }
+
 </style>
\ No newline at end of file

src/views/VisualizationView.vue

 <template>
   <section id="visualization">
     <VizTitle class="section-component"/>
-    <LanguageButton  class="section-component" />
     <BeeswarmChart class="section-component" /> 
     <NarrativeIntro class="section-component"/>
     <InteractiveDendrogram class="section-component"/>
@@ -18,7 +17,6 @@
 import { defineAsyncComponent } from 'vue';
 
 const VizTitle = defineAsyncComponent(() =>  import('../components/VizTitle.vue'));
-const LanguageButton = defineAsyncComponent(() =>  import('../components/LanguageButton.vue'));
 const BeeswarmChart = defineAsyncComponent(() => import('../components/BeeswarmChart.vue'));
 const NarrativeIntro = defineAsyncComponent(() => import('../components/NarrativeIntro.vue'));
 const InteractiveDendrogram = defineAsyncComponent(() => import('../components/InteractiveDendrogram.vue'));