Merge branch 'front-styles' of ssh://git.ma-al.com:8822/goc_daniel/b2b into translate
This commit is contained in:
@@ -1,13 +1,49 @@
|
||||
<template>
|
||||
<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">
|
||||
<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 :type="'trigger'" :ui="{
|
||||
root: 'justify-center',
|
||||
list: 'gap-4'
|
||||
}" :items="menuItems" class="w-full"></UNavigationMenu>
|
||||
<div class="flex items-center gap-2">
|
||||
<CountryCurrencySwitch />
|
||||
<!-- 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>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useFetchJson } from '@/composable/useFetchJson'
|
||||
import LangSwitch from './inner/langSwitch.vue'
|
||||
import ThemeSwitch from './inner/themeSwitch.vue'
|
||||
import LangSwitch from './inner/LangSwitch.vue'
|
||||
import ThemeSwitch from './inner/ThemeSwitch.vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { computed, 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'
|
||||
import CountryCurrencySwitch from './inner/CountryCurrencySwitch.vue'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
let menu = ref()
|
||||
@@ -51,37 +87,3 @@ function transformMenu(items: TopMenuItem[], locale: string | undefined): Naviga
|
||||
}
|
||||
await getTopMenu()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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">
|
||||
<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 :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)">
|
||||
{{ $t('general.logout') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import LangSwitch from './inner/langSwitch.vue'
|
||||
import ThemeSwitch from './inner/themeSwitch.vue'
|
||||
import LangSwitch from './inner/LangSwitch.vue'
|
||||
import ThemeSwitch from './inner/ThemeSwitch.vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
|
||||
@@ -18,7 +18,7 @@ import { useFetchJson } from '@/composable/useFetchJson'
|
||||
import Default from '@/layouts/default.vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import type { TableColumn } from '@nuxt/ui'
|
||||
import CategoryMenu from '../inner/categoryMenu.vue'
|
||||
import CategoryMenu from '../inner/CategoryMenu.vue'
|
||||
import type { Product } from '@/types/product'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
@@ -46,7 +46,7 @@ import { useFetchJson } from '@/composable/useFetchJson'
|
||||
import Default from '@/layouts/default.vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import type { TableColumn } from '@nuxt/ui'
|
||||
import CategoryMenu from '../inner/categoryMenu.vue'
|
||||
import CategoryMenu from '../inner/CategoryMenu.vue'
|
||||
|
||||
interface Product {
|
||||
reference: number
|
||||
|
||||
68
bo/src/components/inner/CountryCurrencySwitch.vue
Normal file
68
bo/src/components/inner/CountryCurrencySwitch.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<p>Country: {{ currentCountry?.name }}</p>
|
||||
<p>Currency: {{ currentCountry?.ps_currency.iso_code }}</p>
|
||||
<USelectMenu v-model="country" :items="countries"
|
||||
class="w-40 bg-(--main-light) dark:bg-(--black) rounded-md shadow-sm hover:none!" valueKey="id"
|
||||
:searchInput="false">
|
||||
<template #default="{ modelValue }">
|
||||
<div class="flex items-center gap-1">
|
||||
<span class="font-medium dark:text-white text-black">{{ modelValue.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<template #item-leading="{ item }">
|
||||
<div class="flex items-center rounded-md cursor-pointer transition-colors">
|
||||
<span class="ml-2 dark:text-white text-black font-medium">{{ item.name }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { countries, currentCountry } from '@/router/langs'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useCookie } from '@/composable/useCookie'
|
||||
import { computed, watch } from 'vue'
|
||||
import { i18n } from '@/plugins/02_i18n'
|
||||
import { useFetchJson } from '@/composable/useFetchJson'
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const cookie = useCookie()
|
||||
|
||||
const country = computed({
|
||||
get() {
|
||||
return currentCountry.value
|
||||
},
|
||||
set(value: string) {
|
||||
// i18n.locale.value = value
|
||||
currentCountry.value = countries.find((x) => x.id == Number(value))
|
||||
cookie.setCookie('country_id', `${countries.find((x) => x.id == Number(value))?.id}`, { days: 60, secure: true, sameSite: 'Lax' })
|
||||
|
||||
// changeLang()
|
||||
},
|
||||
})
|
||||
|
||||
// async function changeLang() {
|
||||
// try {
|
||||
// const { items } = await useFetchJson('/api/v1/public/auth/update-choice', {
|
||||
// method: 'POST'
|
||||
// })
|
||||
|
||||
// } catch (error) {
|
||||
// console.log(error)
|
||||
// }
|
||||
// }
|
||||
|
||||
watch(
|
||||
() => country,
|
||||
(newCountry) => {
|
||||
if (newCountry) {
|
||||
console.log(newCountry.value);
|
||||
|
||||
// i18n.locale.value = newLocale
|
||||
currentCountry.value = countries.find((x) => x.id == Number(newCountry.value?.id))
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
</script>
|
||||
Reference in New Issue
Block a user