fixed most language selector issues

Kahera · Dec 19, 2023 · e8b9c44 · e8b9c44
1 parent b205af2
commit e8b9c44
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 41 deletions.
diff --git a/src/components/DropdownComponent.vue b/src/components/DropdownComponent.vue
@@ -14,7 +14,7 @@ defineProps({
     buttonType: {
         type: String as PropType<'outline' | 'solid'>,
         default: 'outline'
-    } 
+    }
 });
 
 const dropdownOpen = ref(false);
@@ -27,7 +27,7 @@ function toggleDropdown(closeDropdown: boolean = false) {
   else dropdownOpen.value = !dropdownOpen.value;
 
   if (dropdownOpen.value) {
-    gsap.fromTo('.dropdown', {
+    gsap.fromTo('.dropdown-parent', {
       opacity: 0,
       height: 0
     }, {
@@ -37,7 +37,7 @@ function toggleDropdown(closeDropdown: boolean = false) {
       delay: reducedMotion.value ? 0 : 0.08,
     });
   } else {
-    gsap.to('.dropdown', {
+    gsap.to('.dropdown-parent', {
       opacity: 0,
       height: 0,
       duration: reducedMotion.value ? 0 : 0.2,
@@ -84,7 +84,7 @@ onUnmounted(() => {
 :slotted(.dropdown-parent > *) {
   @apply px-4 py-2 block text-center
     text-primary-darkest dark:text-primary-lighter
-    bg-primary-lighter dark:bg-accent-darker 
+    bg-primary-lighter dark:bg-accent-darker
     hover:bg-primary-light dark:hover:bg-accent-darkest
     transition-colors duration-200;
 }

diff --git a/src/components/LanguageSelector.vue b/src/components/LanguageSelector.vue
@@ -1,48 +1,51 @@
 <script setup lang="ts">
-
-import { computed } from 'vue';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 const labelRef = ref<HTMLElement | null>(null);
-const cssVariables = computed(() => ({
-   '--width': (labelRef.value ? (labelRef.value.offsetWidth + 16) : 0) + 'px'
+let cssVariables = computed(() => ({
+'--width': (labelRef.value ? (labelRef.value.offsetWidth + 16) : 0) + 'px'
 }));
 
+
 </script>
 
 <template>
-  <div class="relative">
-    <label
-      ref="labelRef"
-      for="locale"
-      class="absolute text-sm -mt-2.5 left-3 text-primary-darker dark:text-primary-light "
-    >
-      {{ $t('locale.select') }}
-    </label>
-    <div class="hide-border-top relative border border-primary overflow-clip rounded-md">
-      <div
-        class="absolute top-0 left-0 w-2 border-t border-x-0 border-primary rounded-tl-md"
-      />
-      <div
+  <div>
+    <!-- Wrapper to avoid the padding from the outside of this element to affect the insets -->
+    <div class="relative">
+      <label
+        ref="labelRef"
+        for="locale"
         :style="cssVariables"
-        class="absolute top-0 right-0 border-t border-x-0 border-primary top-border-right"
-      />
-      <select
-        id="locale"
-        v-model="$i18n.locale"
-        class="block h-12 py-0 px-6 w-full rounded-lg bg-transparent appearance-none"
-        @click="$event.stopPropagation()"
+        class="absolute text-sm -mt-2.5 left-3 text-primary-darker dark:text-primary-light floating-label-position"
       >
-        <option
-          v-for="(locale, index) in $i18n.availableLocales"
-          :key="`locale-${locale}`"
-          :data-index="index"
-          :value="locale"
-          class="bg-primary-lightest dark:bg-accent-darker"
+        {{ $t('locale.select') }}
+      </label>
+      <div class="hide-border-top relative  overflow-clip rounded-md">
+        <div
+          class="absolute top-0 left-0 w-2 border-t border-x-0 border-primary rounded-tl-md"
+        />
+        <div
+          :style="cssVariables"
+          class="absolute top-0 right-0 border-t border-x-0 border-primary top-border-right"
+        />
+        <select
+          id="locale"
+          v-model="$i18n.locale"
+          class="block h-12 py-0 px-6 w-full bg-transparent rounded-md border border-primary hide-border-top focus-visible:border-2 focus-visible:outline-0 focus-visible:outline-transparent appearance-none"
+          @click="$event.stopPropagation()"
         >
-          {{ $t('locale.' + locale) }}
-        </option>
-      </select>
+          <option
+            v-for="(locale, index) in $i18n.availableLocales"
+            :key="`locale-${locale}`"
+            :data-index="index"
+            :value="locale"
+            class="bg-primary-lightest dark:bg-accent-darker"
+          >
+            {{ $t('locale.' + locale) }}
+          </option>
+        </select>
+      </div>
     </div>
   </div>
 </template>

diff --git a/src/components/NavbarComponent.vue b/src/components/NavbarComponent.vue
@@ -57,7 +57,7 @@ function getNavIcon(name: string | undefined) {
       </RouterLink>
     </nav>
 
-    <LanguageSelector class="max-md:hidden w-24" />
+    <LanguageSelector class="max-md:hidden w-28" />
 
     <!-- Dark/light mode for larger screens -->
     <Button
@@ -68,7 +68,7 @@ function getNavIcon(name: string | undefined) {
       @click=" darkModeStore.toggle()"
     >
       <template #icon>
-        {{ darkModeStore.darkMode ? 'light_mode' : 'dark_mode' }} 
+        {{ darkModeStore.darkMode ? 'light_mode' : 'dark_mode' }}
       </template>
     </Button>
 
@@ -102,4 +102,4 @@ function getNavIcon(name: string | undefined) {
       </Dropdown>
     </nav>
   </header>
-</template>
+</template>