refactor: optimize the menu order and navigation container reference of the HorizontalMenu component

src/layout/header/navigation/HorizontalMenu.vue

@@ -95,7 +95,9 @@ function isMenuVisibleByKey(key: Key) {
 function calculateMenuRightBound() {
   const wrapperElementBoundLeft = navigationWrapperRef.value?.getBoundingClientRect().left ?? 0
 
-  menuRefsList.value.forEach((menuElement) => {
+  const reverseMenuRefsList = [...menuRefsList.value].reverse()
+
+  reverseMenuRefsList.forEach((menuElement) => {
     const menuElementBoundRight =
       menuElement.getBoundingClientRect().right - wrapperElementBoundLeft
     const menuElementKey = menuElement.dataset.key
@@ -126,7 +128,7 @@ watchThrottled(
 
 onMounted(() => {
   navigationContainerRef.value = navigationWrapperRef.value?.closest(
-    '[data-navigation-container]',
+    'nav',
   ) as HTMLElement
   calculateMenuRightBound()
 })

src/layout/header/navigation/index.vue

@@ -2,7 +2,7 @@
 import { defineAsyncComponent } from 'vue'
 
 import { CollapseTransition } from '@/components'
-import { useToRefsPreferences } from '@/stores'
+import { toRefsPreferencesStore } from '@/stores'
 
 defineOptions({
   name: 'Navigation',
@@ -12,11 +12,10 @@ const AsyncNavigationButton = defineAsyncComponent(() => import('./NavigationBut
 const AsyncHorizontalMenu = defineAsyncComponent(() => import('./HorizontalMenu.vue'))
 const AsyncBreadcrumb = defineAsyncComponent(() => import('./Breadcrumb.vue'))
 
-const { showNavigationButton, showBreadcrumb, navigationMode } = useToRefsPreferences()
+const { showNavigationButton, showBreadcrumb, navigationMode } = toRefsPreferencesStore()
 </script>
 <template>
   <nav
-    data-navigation-container
     class="flex h-9 flex-1 items-center"
   >
     <CollapseTransition :display="showNavigationButton && navigationMode === 'sidebar'">