Less obvious language picker

Author: jamiecarter7

vue3-dashboard/src/components/TheNav.vue

@@ -148,41 +148,14 @@
 
       <div class="flex justify-end items-center gap-2">
         <div class="language-selector">
-          <button 
-            @click="showLanguageMenu = !showLanguageMenu"
-            class="nav-button-base language-select-button"
-            type="button"
-          >
-            {{ currentLanguageLabel }}
-            <svg 
-              class="language-select-arrow"
-              :class="{ 'rotate-180': showLanguageMenu }"
-              xmlns="http://www.w3.org/2000/svg" 
-              viewBox="0 0 20 20" 
-              fill="currentColor"
-            >
-              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-            </svg>
-          </button>
-          <div 
-            v-if="showLanguageMenu"
-            class="language-menu"
+          <select 
+            v-model="selectedLanguage" 
+            @change="onLanguageChange"
+            class="language-select nav-button-base"
           >
-            <button
-              @click="changeLanguage('en')"
-              class="language-menu-item"
-              :class="{ 'language-menu-item-active': locale.value === 'en' }"
-            >
-              {{ $t('nav.english') }}
-            </button>
-            <button
-              @click="changeLanguage('id')"
-              class="language-menu-item"
-              :class="{ 'language-menu-item-active': locale.value === 'id' }"
-            >
-              {{ $t('nav.indonesian') }}
-            </button>
-          </div>
+            <option value="en">{{ $t('nav.english') }}</option>
+            <option value="id">{{ $t('nav.indonesian') }}</option>
+          </select>
         </div>
         <a 
           class="nav-button-base" 
@@ -460,7 +433,16 @@ const selectedMonth = computed({
   set: (value) => { store.setSelectedMonth(value) }
 })
 
-const showLanguageMenu = ref(false)
+// Language selection
+const selectedLanguage = computed({
+  get: () => locale.value,
+  set: (value) => { locale.value = value }
+})
+
+const onLanguageChange = () => {
+  // Save to localStorage for persistence
+  localStorage.setItem('preferred-language', selectedLanguage.value)
+}
 
 // Generate month options: current month + past 6 months
 const generateMonthOptions = () => {
@@ -486,23 +468,6 @@ const onMonthChange = () => {
   console.log('Selected month:', selectedMonth.value)
 }
 
-const currentLanguageLabel = computed(() => {
-  // Show language name in its own language
-  if (locale.value === 'en') {
-    return 'English'
-  } else {
-    // Use Indonesian translation for Indonesian
-    return t('nav.indonesian')
-  }
-})
-
-const changeLanguage = (lang) => {
-  locale.value = lang
-  showLanguageMenu.value = false
-  // Save to localStorage for persistence
-  localStorage.setItem('preferred-language', lang)
-}
-
 // Navigate to upload page
 const navigateToUpload = () => {
   emit('navigate', 'upload')
@@ -513,13 +478,6 @@ const navigateToDashboard = () => {
   emit('navigate', 'dashboard')
 }
 
-// Close menu when clicking outside
-const handleClickOutside = (event) => {
-  if (!event.target.closest('.language-selector')) {
-    showLanguageMenu.value = false
-  }
-}
-
 // Initialize expanded state based on current selection
 const initializeExpandedState = () => {
   if (store.currentLevel === 'facility' && store.currentId) {
@@ -542,11 +500,6 @@ const initializeExpandedState = () => {
 }
 
 onMounted(() => {
-  document.addEventListener('click', handleClickOutside)
   initializeExpandedState()
 })
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside)
-})
 </script>

vue3-dashboard/src/style.css

@@ -1185,7 +1185,7 @@
     appearance: none;
     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>');
     background-repeat: no-repeat;
-    background-position: right 8px center;
+    background-position: right 10px center;
     background-size: 16px;
 
     @media screen and (min-width: 660px) {
@@ -1212,65 +1212,28 @@
     }
   }
 
-  /* Language selector button - uses nav-button-base design with flex layout */
-  .language-select-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
+  /* Language selector - standard dropdown using nav-button-base design */
+  .language-select {
+    --nav-btn-padding-x: 40px; /* Extra padding for dropdown arrow */
+    padding-right: 40px;
+    padding-left: 20px;
+    display: block;
     width: 100%;
-    
+    appearance: none;
+    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>');
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+    background-size: 16px;
+    background-color: transparent;
+    outline: 1px solid #ffffff60;
+    outline-offset: -1px;
     @media screen and (min-width: 660px) {
       width: auto;
     }
-  }
-
-  .language-select-arrow {
-    width: 16px;
-    height: 16px;
-    transition: transform 0.2s ease;
-  }
 
-  .language-menu {
-    position: absolute;
-    right: 0;
-    top: 100%;
-    margin-top: 0.25rem;
-    background: white;
-    border-radius: 4px;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-    border: 1px solid #e5e7eb;
-    min-width: 150px;
-    z-index: 50;
-    overflow: hidden;
-  }
-
-  .language-menu-item {
-    width: 100%;
-    text-align: left;
-    padding: 0.5rem 1rem;
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 0.875rem;
-    color: #333;
-    transition: background-color 0.2s ease;
-
-    &:first-child {
-      border-radius: 4px 4px 0 0;
-    }
-
-    &:last-child {
-      border-radius: 0 0 4px 4px;
-    }
-
-    &:hover {
-      background-color: #f3f4f6;
-    }
-
-    &.language-menu-item-active {
-      background-color: #eff6ff;
-      font-weight: 600;
+    option {
+      background: #fff;
+      color: #333;
     }
   }