Added more things

frontend/app/components/parts/site_options/LanguageSelector.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const dropdownVisible = ref(false);
+
+const toggleDropdown = () => {
+    dropdownVisible.value = !dropdownVisible.value;
+}
+
+const menuContainer = ref(null);
+
+const handleClickOutside = (e) => {
+    if (menuContainer.value && !menuContainer.value.contains(e.target)) {
+    dropdownVisible.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+
+
+// i18n
+const { locale } = useI18n()
+
+const setLocale = (lang) => {
+  locale.value = lang
+  dropdownVisible.value = false
+}
+</script>
+
+<template>
+<div class="menu-container" ref="menuContainer">
+  <button class="menu-button" @click="toggleDropdown">Language </button>
+
+  <div class="dropdown" v-show="dropdownVisible">
+    <div class="section">
+        <div class="menu-item" @click="setLocale('en')">
+            🇬🇧 English
+        </div>
+        <div class="menu-item" @click="setLocale('es')">
+            🇪🇸 Spanish
+        </div>
+        <div class="menu-item" @click="setLocale('ca')">
+            🇦🇩 Catalan
+        </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<style lang="scss" scoped>
+.menu-button {
+  background: #161b22;
+  color: white;
+  font-size: 1em;
+  border: 1px solid #30363d;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  margin-right: 15px;
+}
+.dropdown {
+z-index: 10;
+  position: absolute;
+  top: 50px;
+  right: 0;
+  margin-right: 10px;
+  background: #161b22;
+  border: 1px solid #30363d;
+  border-radius: 8px;
+  padding: 8px 0;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
+}
+
+/* Items */
+.menu-item {
+  padding: 8px 16px;
+  color: #c9d1d9;
+  cursor: pointer;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+
+  &.active {
+    background: #30363d;
+  }
+}
+</style>