fix: routing/data table

bo/src/components/TopBar.vue

@@ -1,14 +1,50 @@
 <script setup lang="ts">
+import { useFetchJson } from '@/composable/useFetchJson'
 import LangSwitch from './inner/langSwitch.vue'
 import ThemeSwitch from './inner/themeSwitch.vue'
 import { useAuthStore } from '@/stores/auth'
+import type { ApiResponse } from '@/types'
+import { computed, ref } from 'vue'
+import { currentLang } from '@/router/langs'
 
 const authStore = useAuthStore()
+let menu = ref()
+async function getTopMenu() {
+  try {
+    const { items } = await useFetchJson<ApiResponse>('/api/v1/restricted/menu/get-top-menu')
+    menu.value = items
+
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+const menuItems = computed(() =>
+  transformMenu(menu.value[0].children, currentLang.value?.iso_code)
+)
+function transformMenu(items, locale: string | undefined) {
+  return items.map((item) => {
+    const parsedLabel = JSON.parse(item.label)
+
+    return {
+      icon: 'i-lucide-house',
+      label: parsedLabel.trans[locale] || parsedLabel.name,
+      to: { name: parsedLabel.name },
+      children: item.children
+        ? transformMenu(item.children, locale)
+        : undefined,
+    }
+  })
+}
+
+await getTopMenu()
 </script>
 
 <template>
+  {{ menuItems }}
+  <!-- fixed top-0 left-0 right-0 z-50 -->
   <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)">
+    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">
       <div class="flex items-center justify-between h-14">
         <!-- Logo -->
@@ -18,28 +54,39 @@ const authStore = useAuthStore()
           </div>
           <span class="font-semibold text-gray-900 dark:text-white">TimeTracker</span>
         </RouterLink>
-        <!-- Right Side Actions -->
-        <RouterLink :to="{ name: 'products-list' }">
+
+        <UNavigationMenu :items="menuItems" />
+
+        <!-- {{ router }} -->
+        <!-- <RouterLink :to="{ name: 'admin-products' }">
           products list
         </RouterLink>
-        <RouterLink :to="{ name: 'product-detail' }">
+        <RouterLink :to="{ name: 'admin-product-detail' }">
           product detail
         </RouterLink>
-        <RouterLink :to="{ name: 'product-card-full' }">
-          ProductCardFull
+        <RouterLink :to="{
+          name: 'customer-product', params: {
+            product_id: '51'
+          }
+        }">
+          Product (51)
         </RouterLink>
         <RouterLink :to="{ name: 'addresses' }">
           Addresses
         </RouterLink>
-        <RouterLink :to="{ name: 'customer-data' }">
+        <RouterLink :to="{ name: 'profile-details' }">
           Customer Data
         </RouterLink>
         <RouterLink :to="{ name: 'cart' }">
           Cart
         </RouterLink>
-        <RouterLink :to="{ name: 'cart1' }">
-          Cart1
-        </RouterLink>
+        <RouterLink :to="{
+          name: 'cart-details', params: {
+            cart_id: '1'
+          }
+        }">
+          Cart details (1)
+        </RouterLink> -->
         <div class="flex items-center gap-2">
           <!-- Language Switcher -->
           <LangSwitch />