Переглянути джерело

fix: menu activation highlight issue

nian 1 місяць тому
батько
коміт
c7107867d6
1 змінених файлів з 12 додано та 12 видалено
  1. 12 12
      src/layout/header/HorizontalMenu.vue

+ 12 - 12
src/layout/header/HorizontalMenu.vue

@@ -48,9 +48,13 @@ const moreDropdownOptions = computed<DropdownProps['options']>(() => {
   })
 })
 
-const hasActiveChild = computed(() => {
-  if (!Array.isArray(moreDropdownOptions.value)) return false
-  const stack = [...moreDropdownOptions.value]
+const shouldShowMore = computed(
+  () => Array.isArray(moreDropdownOptions.value) && !isEmpty(moreDropdownOptions.value),
+)
+
+function hasActiveChild(children: unknown) {
+  if (!Array.isArray(children)) return false
+  const stack = [...children]
   while (stack.length) {
     const node = stack.pop()
     if (node?.key === menuActiveKey.value) return true
@@ -59,11 +63,7 @@ const hasActiveChild = computed(() => {
     }
   }
   return false
-})
-
-const shouldShowMore = computed(
-  () => Array.isArray(moreDropdownOptions.value) && !isEmpty(moreDropdownOptions.value),
-)
+}
 
 const renderIcon: DropdownProps['renderIcon'] = (option) => {
   return isFunction(option.icon)
@@ -127,9 +127,9 @@ watch(
 
 watchThrottled(
   containerWidth,
-  (width) => {
+  (containerWidth) => {
     if (!initialized) return
-    updateMenuVisibility(width)
+    updateMenuVisibility(containerWidth)
   },
   {
     throttle: 100,
@@ -162,7 +162,7 @@ onBeforeUnmount(() => {
             'relative flex items-center px-2.5 py-2': isEmpty(children),
           },
           disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer',
-          menuActiveKey === key || hasActiveChild
+          menuActiveKey === key || hasActiveChild(children)
             ? 'bg-primary/15 text-primary'
             : 'hover:bg-neutral-150 dark:hover:bg-neutral-800',
         ]"
@@ -216,7 +216,7 @@ onBeforeUnmount(() => {
         v-show="shouldShowMore"
         class="flex shrink-0 cursor-pointer items-center rounded-naive px-3 py-2 leading-4 font-medium transition-[background-color,color]"
         :class="[
-          hasActiveChild
+          hasActiveChild(moreDropdownOptions)
             ? 'bg-primary/15 text-primary'
             : 'hover:bg-neutral-150 dark:hover:bg-neutral-800',
         ]"