fix: menu and routing

bo/src/components/TopBar.vue

@@ -3,10 +3,11 @@ import { useFetchJson } from '@/composable/useFetchJson'
 import LangSwitch from './inner/langSwitch.vue'
 import ThemeSwitch from './inner/themeSwitch.vue'
 import { useAuthStore } from '@/stores/auth'
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { currentLang } from '@/router/langs'
 import type { LabelTrans, TopMenuItem } from '@/types'
 import type { NavigationMenuItem } from '@nuxt/ui'
+import { useRoute, useRouter } from 'vue-router'
 
 const authStore = useAuthStore()
 let menu = ref()
@@ -19,30 +20,43 @@ async function getTopMenu() {
   }
 }
 
+const router = useRouter()
+const route = useRoute()
 const menuItems = computed(() => transformMenu(menu.value[0].children, currentLang.value?.iso_code))
 function transformMenu(items: TopMenuItem[], locale: string | undefined): NavigationMenuItem[] {
+
   return items.map((item) => {
-    let route = {
-      icon: 'i-lucide-house',
+    const route: NavigationMenuItem = {
+      icon: item.label.icon ? item.label.icon : 'i-lucide-house',
       label: item.label.trans[locale as keyof LabelTrans].label,
-      children: item.children ? transformMenu(item.children, locale) : undefined,
+      children: item.children
+        ? transformMenu(item.children, locale)
+        : undefined,
+    }
+
+    route.onSelect = () => {
+      const query = {
+        name: item.params.route.name,
+        params: {
+          ...(item.params.route.params || {}),
+          locale: currentLang.value?.iso_code
+        }
+      }
+
+      router.push(query)
     }
-    if (item.params?.route) {
-      route = { ...route, ...{ to: { name: item.params.route.name, params: { locale: locale } } } }
-    } 
 
     return route
   })
 }
-
 await getTopMenu()
 </script>
 
 <template>
-  {{ menuItems }}
-  <!-- fixed top-0 left-0 right-0 z-50 -->
-  <header class="bg-white/80 dark:bg-(--black) backdrop-blur-md border-b border-(--border-light) dark:border-(--border-dark)">
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
+  <header
+    class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-(--black) backdrop-blur-md border-b border-(--border-light) dark:border-(--border-dark)">
+    <!-- px-4 sm:px-6 lg:px-8 -->
+    <div class="container mx-auto px-4">
       <div class="flex items-center justify-between h-14">
         <!-- Logo -->
         <RouterLink :to="{ name: 'home' }" class="flex items-center gap-2">
@@ -52,49 +66,18 @@ await getTopMenu()
           <span class="font-semibold text-gray-900 dark:text-white">TimeTracker</span>
         </RouterLink>
 
-        <UNavigationMenu :items="menuItems" class="w-full" />
-
-        <!-- {{ router }} -->
-        <!-- <RouterLink :to="{ name: 'admin-products' }">
-          products list
-        </RouterLink>
-        <RouterLink :to="{ name: 'admin-product-detail' }">
-          product detail
-        </RouterLink>
-        <RouterLink :to="{
-          name: 'customer-product', params: {
-            product_id: '51'
-          }
-        }">
-          Product (51)
-        </RouterLink>
-        <RouterLink :to="{ name: 'addresses' }">
-          Addresses
-        </RouterLink>
-        <RouterLink :to="{ name: 'profile-details' }">
-          Customer Data
-        </RouterLink>
-        <RouterLink :to="{ name: 'cart' }">
-          Cart
-        </RouterLink>
-        <RouterLink :to="{
-          name: 'cart-details', params: {
-            cart_id: '1'
-          }
-        }">
-          Cart details (1)
-        </RouterLink> -->
+        <UNavigationMenu :type="'trigger'" :ui="{
+          root: 'justify-center',
+          list: 'gap-4'
+        }" :items="menuItems" class="w-full"></UNavigationMenu>
         <div class="flex items-center gap-2">
           <!-- Language Switcher -->
           <LangSwitch />
           <!-- Theme Switcher -->
           <ThemeSwitch />
           <!-- Logout Button (only when authenticated) -->
-          <button
-            v-if="authStore.isAuthenticated"
-            @click="authStore.logout()"
-            class="px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark)"
-          >
+          <button v-if="authStore.isAuthenticated" @click="authStore.logout()"
+            class="px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark)">
             {{ $t('general.logout') }}
           </button>
         </div>