105 lines
3.3 KiB
Vue
105 lines
3.3 KiB
Vue
<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=" 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 -->
|
|
<RouterLink :to="{ name: 'home' }" class="flex items-center gap-2">
|
|
<div class="w-8 h-8 rounded-lg bg-primary text-white flex items-center justify-center">
|
|
<UIcon name="i-heroicons-clock" class="w-5 h-5" />
|
|
</div>
|
|
<span class="font-semibold text-gray-900 dark:text-white">TimeTracker</span>
|
|
</RouterLink>
|
|
|
|
<UNavigationMenu :items="menuItems" />
|
|
|
|
<!-- {{ 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> -->
|
|
<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)">
|
|
{{ $t('general.logout') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|