fix: clicking language menu is not auto closing the menu

virtualansh · Aug 9, 2023 · d9f77de · d9f77de
1 parent 51972dd
commit d9f77de
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 42 deletions.
diff --git a/src/components/Dropdown/src/DropdownItem.vue b/src/components/Dropdown/src/DropdownItem.vue
@@ -1,29 +1,18 @@
 <template>
-  <div
-    @click.stop.prevent="handleClick"
-    class="
-      block
-      cursor-pointer
-      hover:bg-ob-trans
-      my-1
-      px-4
-      py-1
-      font-medium
-      hover:text-ob-bright
-    "
-  >
+  <div @click.stop.prevent="handleClick" :class="itemClasses">
     <slot />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent, inject } from 'vue'
 import { useDropdownStore } from '@/stores/dropdown'
 
 export default defineComponent({
   name: 'ObDropdownItem',
   props: {
-    name: String
+    name: String,
+    active: Boolean
   },
   setup(props) {
     const dropdownStore = useDropdownStore()
@@ -32,9 +21,22 @@ export default defineComponent({
       dropdownStore.setCommand(String(props.name))
     }
 
-    return { handleClick }
+    return {
+      handleClick,
+      itemClasses: computed(() => {
+        return {
+          'block cursor-pointer hover:bg-ob-trans my-1 px-4 py-1 font-medium hover:text-ob-bright':
+            true,
+          active: !!props.active
+        }
+      })
+    }
   }
 })
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.active {
+  @apply bg-ob-trans;
+}
+</style>
diff --git a/src/components/Dropdown/src/DropdownMenu.vue b/src/components/Dropdown/src/DropdownMenu.vue
@@ -2,40 +2,22 @@
   <transition name="dropdown-content">
     <div
       v-if="!expand && active"
-      class="
-        origin-top-right
-        absolute
-        right-0
-        mt-2
-        w-48
-        bg-ob-deep-900
-        rounded-lg
-        py-2
-        shadow-md
-      "
+      class="origin-top-right absolute right-0 mt-2 w-48 bg-ob-deep-900 rounded-lg py-2 shadow-md"
     >
       <slot />
     </div>
     <div
       v-else-if="expand && active"
-      class="
-        flex flex-col
-        justify-center
-        items-center
-        mt-2
-        w-48
-        bg-ob-deep-900
-        rounded-lg
-        py-2
-      "
+      class="flex flex-col justify-center items-center mt-2 w-48 bg-ob-deep-900 rounded-lg py-2"
     >
       <slot />
     </div>
   </transition>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject } from 'vue'
+import { useDropdownStore } from '@/stores/dropdown'
+import { computed, defineComponent, inject, watch } from 'vue'
 
 export default defineComponent({
   name: 'ObDropdownMenu',
@@ -46,9 +28,19 @@ export default defineComponent({
     }
   },
   setup() {
+    const dropdownStore = useDropdownStore()
     const sharedState = inject('sharedState', { active: false })
     const active = computed(() => sharedState.active)
 
+    watch(
+      () => dropdownStore.commandName,
+      (newValue, oldValue) => {
+        if (oldValue !== newValue) {
+          sharedState.active = false
+        }
+      }
+    )
+
     return {
       active
     }

diff --git a/src/components/Header/src/Controls.vue b/src/components/Header/src/Controls.vue
@@ -16,7 +16,11 @@
         height="2rem"
       />
     </span>
-    <Dropdown v-if="enableMultiLanguage" @command="handleClick">
+    <Dropdown
+      v-if="enableMultiLanguage"
+      @command="handleClick"
+      :value="currentLocale"
+    >
       <span class="ob-drop-shadow" data-dia="language">
         <SvgIcon
           icon-class="globe"
@@ -28,8 +32,12 @@
         <span v-if="$i18n.locale == 'en'">EN</span>
       </span>
       <DropdownMenu>
-        <DropdownItem name="en">English</DropdownItem>
-        <DropdownItem name="cn">中文</DropdownItem>
+        <DropdownItem name="en" :active="currentLocale === 'en'">
+          English
+        </DropdownItem>
+        <DropdownItem name="cn" :active="currentLocale === 'cn'">
+          中文
+        </DropdownItem>
       </DropdownMenu>
     </Dropdown>
     <span no-hover-effect class="ob-drop-shadow" data-dia="light-switch">
@@ -75,6 +83,7 @@ export default defineComponent({
     return {
       handleOpenModal,
       handleClick,
+      currentLocale: computed(() => appStore.locale),
       enableMultiLanguage: computed(
         () => appStore.themeConfig.site.multi_language
       )