refactor: remove unnecessary headerLayoutInjectionKey references and optimize navigation container references of HorizontalMenu component

src/injection/index.ts

@@ -1,4 +1,4 @@
-import type { MediaQueryProvider, LayoutProvider, HeaderLayoutProvider } from './interface'
+import type { MediaQueryProvider, LayoutProvider } from './interface'
 import type { InjectionKey } from 'vue'
 
 export const mediaQueryInjectionKey: InjectionKey<MediaQueryProvider> =
@@ -6,8 +6,4 @@ export const mediaQueryInjectionKey: InjectionKey<MediaQueryProvider> =
 
 export const layoutInjectionKey: InjectionKey<LayoutProvider> = Symbol('layoutInjectionKey')
 
-export const headerLayoutInjectionKey: InjectionKey<HeaderLayoutProvider> = Symbol(
-  'headerLayoutInjectionKey',
-)
-
 export * from './interface'

src/layout/header/navigation/HorizontalMenu.vue

@@ -5,8 +5,6 @@ import { NDropdown } from 'naive-ui'
 import { storeToRefs } from 'pinia'
 import { h, computed, ref, watch, onBeforeUnmount, reactive, useTemplateRef, onMounted } from 'vue'
 
-import { useInjection } from '@/composables'
-import { headerLayoutInjectionKey } from '@/injection'
 import router from '@/router'
 import { useUserStore } from '@/stores'
 
@@ -22,11 +20,10 @@ const MENU = {
 
 const { menuList } = storeToRefs(useUserStore())
 
-const { navigationContainerElement } = useInjection(headerLayoutInjectionKey)
+const navigationContainerRef = ref<HTMLElement | null>(null)
 
-const { width: containerWidth, stop: stopObserveContainerSize } = useElementSize(
-  navigationContainerElement,
-)
+const { width: containerWidth, stop: stopObserveContainerSize } =
+  useElementSize(navigationContainerRef)
 
 const menuActiveKey = ref('')
 
@@ -128,6 +125,9 @@ watchThrottled(
 )
 
 onMounted(() => {
+  navigationContainerRef.value = navigationWrapperRef.value?.closest(
+    '[data-navigation-container]',
+  ) as HTMLElement
   calculateMenuRightBound()
 })
 

src/layout/header/navigation/index.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { defineAsyncComponent, provide, useTemplateRef } from 'vue'
+import { defineAsyncComponent } from 'vue'
 
 import { CollapseTransition } from '@/components'
-import { headerLayoutInjectionKey } from '@/injection'
 import { useToRefsPreferences } from '@/stores'
 
 defineOptions({
@@ -14,16 +13,10 @@ const AsyncHorizontalMenu = defineAsyncComponent(() => import('./HorizontalMenu.
 const AsyncBreadcrumb = defineAsyncComponent(() => import('./Breadcrumb.vue'))
 
 const { showNavigationButton, showBreadcrumb, navigationMode } = useToRefsPreferences()
-
-const navigationContainerRef = useTemplateRef<HTMLElement>('navigationContainer')
-
-provide(headerLayoutInjectionKey, {
-  navigationContainerElement: navigationContainerRef,
-})
 </script>
 <template>
   <nav
-    ref="navigationContainer"
+    data-navigation-container
     class="flex h-9 flex-1 items-center"
   >
     <CollapseTransition :display="showNavigationButton && navigationMode === 'sidebar'">