feat(ui): copy logistics header/theme one-to-one
This commit is contained in:
Ruslan Bakiev
@@ -1,133 +1,275 @@
|
||||
<script setup lang="ts">
|
||||
interface MenuLink {
|
||||
label: string
|
||||
to: string
|
||||
icon: 'home' | 'catalog' | 'orders' | 'profile'
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
isAssistantOpen?: boolean
|
||||
profileLabel?: string
|
||||
isAuthenticated?: boolean
|
||||
showLogistics?: boolean
|
||||
hideSearchCapsule?: boolean
|
||||
}>(), {
|
||||
isAssistantOpen: false,
|
||||
profileLabel: '',
|
||||
isAuthenticated: false,
|
||||
showLogistics: false,
|
||||
hideSearchCapsule: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:isAssistantOpen': [value: boolean]
|
||||
}>()
|
||||
|
||||
const route = useRoute()
|
||||
const localePath = useLocalePath()
|
||||
const switchLocalePath = useSwitchLocalePath()
|
||||
const { locale, locales } = useI18n()
|
||||
const { signIn, signOut, loggedIn, user } = useAuth()
|
||||
const auth = useAuth()
|
||||
const { basePath, isBasePathActive, navigateToLocalized, toLocalized } = useLocalizedNavigation()
|
||||
const { draft: calcDraft, hydrateFromQuery, buildQuery: buildCalcQuery } = useCalcSearchDraft()
|
||||
const isLandingPage = computed(() => basePath.value === '/')
|
||||
const isAuthPage = computed(() => basePath.value === '/auth' || route.path === '/sign-in' || basePath.value === '/callback')
|
||||
const isCalcPage = computed(() => basePath.value.startsWith('/catalog'))
|
||||
const isManagerStagePage = computed(() => basePath.value.startsWith('/manager'))
|
||||
const isDarkHeaderScene = computed(() => isLandingPage.value || isManagerStagePage.value)
|
||||
const isAuthenticated = computed(() => props.isAuthenticated || auth.isAuthenticated.value)
|
||||
const profileLabel = computed(() => props.profileLabel || (auth.user.value?.id ?? 'Профиль'))
|
||||
const showLogistics = computed(() => props.showLogistics || Boolean((auth.user.value as any)?.isAdmin))
|
||||
const landingSearchScrollY = ref(0)
|
||||
const landingSearchTopStart = ref(450)
|
||||
const landingSearchTopStop = ref(16)
|
||||
const LANDING_SEARCH_TOP_FALLBACK_START = 450
|
||||
const LANDING_SEARCH_TOP_STOP = 16
|
||||
const LANDING_SEARCH_BOTTOM_GAP = 30
|
||||
|
||||
const { productLabel, hubLabel, supplierLabel, quantity, canSearch } = useCatalogSearch()
|
||||
const logisticsSearch = reactive({
|
||||
from: '',
|
||||
to: '',
|
||||
cargo: '',
|
||||
})
|
||||
|
||||
function syncSearchFromRoute() {
|
||||
hydrateFromQuery(route.query)
|
||||
logisticsSearch.from = typeof route.query.from === 'string' ? route.query.from : isCalcPage.value ? calcDraft.value.from : ''
|
||||
logisticsSearch.to = typeof route.query.to === 'string' ? route.query.to : isCalcPage.value ? calcDraft.value.to : ''
|
||||
logisticsSearch.cargo = typeof route.query.cargo === 'string' ? route.query.cargo : isCalcPage.value ? calcDraft.value.cargo : ''
|
||||
}
|
||||
|
||||
function inferCountryIso(value: string, fallback: string) {
|
||||
const normalized = value.trim().toLowerCase()
|
||||
if (!normalized) return fallback
|
||||
if (/(china|китай|guangzhou|shenzhen|yiwu|ningbo|beijing|shanghai|гуанчжоу|шанхай)/.test(normalized)) return 'CN'
|
||||
if (/(russia|россия|moscow|москва|kazan|казань|saint petersburg|novosibirsk|екатеринбург)/.test(normalized)) return 'RU'
|
||||
return fallback
|
||||
}
|
||||
|
||||
function isoToFlag(iso: string) {
|
||||
const normalized = iso.trim().toUpperCase()
|
||||
if (!/^[A-Z]{2}$/.test(normalized)) return '🏳️'
|
||||
return String.fromCodePoint(...[...normalized].map(char => 127397 + char.charCodeAt(0)))
|
||||
}
|
||||
|
||||
const fromIso = computed(() => inferCountryIso(logisticsSearch.from, 'CN'))
|
||||
const toIso = computed(() => inferCountryIso(logisticsSearch.to, 'RU'))
|
||||
const fromFlag = computed(() => isoToFlag(fromIso.value))
|
||||
const toFlag = computed(() => isoToFlag(toIso.value))
|
||||
const showAdminDock = computed(() => Boolean(showLogistics.value) && !isAuthPage.value)
|
||||
// Fullscreen menu
|
||||
const isMenuOpen = ref(false)
|
||||
|
||||
const isAuthenticated = computed(() => loggedIn.value || Boolean(user.value?.id))
|
||||
const profileLabel = computed(() => {
|
||||
return user.value?.id || (locale.value === 'en' ? 'Profile' : 'Профиль')
|
||||
})
|
||||
|
||||
const isHomePage = computed(() => route.path === localePath('/'))
|
||||
const isCatalogPage = computed(() => route.path.startsWith(localePath('/catalog')))
|
||||
const isClientAreaPage = computed(() => route.path.startsWith(localePath('/clientarea')))
|
||||
const isAuthPage = computed(() => {
|
||||
return route.path === localePath('/auth')
|
||||
|| route.path === localePath('/sign-in')
|
||||
|| route.path === localePath('/callback')
|
||||
})
|
||||
|
||||
const showSearchCapsule = computed(() => {
|
||||
if (props.hideSearchCapsule || isAuthPage.value) return false
|
||||
return isHomePage.value || isCatalogPage.value
|
||||
})
|
||||
|
||||
const headerBackdropClass = computed(() => {
|
||||
if (isHomePage.value) return 'header-glass-backdrop--landing'
|
||||
return 'header-glass-backdrop--default'
|
||||
})
|
||||
|
||||
const menuLinks = computed<MenuLink[]>(() => {
|
||||
const links: MenuLink[] = [
|
||||
{ label: locale.value === 'en' ? 'Home' : 'Главная', to: '/', icon: 'home' },
|
||||
{ label: locale.value === 'en' ? 'Catalog' : 'Каталог', to: '/catalog', icon: 'catalog' },
|
||||
{ label: locale.value === 'en' ? 'Orders' : 'Заказы', to: '/clientarea/orders', icon: 'orders' },
|
||||
const menuLinks = computed(() => {
|
||||
return [
|
||||
{ label: 'Мои заказы', to: '/clientarea/orders', icon: 'orders' },
|
||||
]
|
||||
|
||||
if (isAuthenticated.value) {
|
||||
links.push({ label: locale.value === 'en' ? 'Profile' : 'Профиль', to: '/clientarea/profile', icon: 'profile' })
|
||||
}
|
||||
|
||||
return links
|
||||
})
|
||||
|
||||
const searchProductLabel = computed(() => productLabel.value || (locale.value === 'en' ? 'Product' : 'Товар'))
|
||||
const searchDestinationLabel = computed(() => {
|
||||
return hubLabel.value || supplierLabel.value || (locale.value === 'en' ? 'Destination' : 'Точка назначения')
|
||||
})
|
||||
const searchQuantityLabel = computed(() => {
|
||||
return quantity.value ? `${quantity.value} t` : (locale.value === 'en' ? 'Volume' : 'Объем')
|
||||
})
|
||||
|
||||
function isBasePathActive(path: string, exact = false) {
|
||||
const localized = localePath(path)
|
||||
if (exact) return route.path === localized
|
||||
return route.path === localized || route.path.startsWith(`${localized}/`)
|
||||
}
|
||||
|
||||
async function openStep(step: 'product' | 'destination' | 'quantity') {
|
||||
await navigateTo(localePath(`/catalog/${step}`))
|
||||
}
|
||||
|
||||
async function submitHeaderSearch() {
|
||||
if (canSearch.value) {
|
||||
await navigateTo(localePath('/catalog/results'))
|
||||
return
|
||||
}
|
||||
await navigateTo(localePath('/catalog/product'))
|
||||
}
|
||||
|
||||
async function handleAuthAction() {
|
||||
if (isAuthenticated.value) {
|
||||
await signOut()
|
||||
return
|
||||
}
|
||||
await signIn()
|
||||
}
|
||||
|
||||
watch(() => route.fullPath, () => {
|
||||
isMenuOpen.value = false
|
||||
syncSearchFromRoute()
|
||||
nextTick(() => {
|
||||
syncLandingSearchScroll()
|
||||
syncLandingSearchAnchor()
|
||||
})
|
||||
})
|
||||
|
||||
function menuIconBg(icon: string) {
|
||||
const map: Record<string, string> = {
|
||||
orders: 'from-amber-400 to-orange-500',
|
||||
apps: 'from-pink-500 to-rose-600',
|
||||
logistics: 'from-cyan-500 to-blue-600',
|
||||
map: 'from-emerald-400 to-teal-600',
|
||||
consultation: 'from-sky-400 to-blue-600',
|
||||
referral: 'from-fuchsia-500 to-pink-600',
|
||||
}
|
||||
return map[icon] || 'from-gray-400 to-gray-600'
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
syncSearchFromRoute()
|
||||
syncLandingSearchScroll()
|
||||
syncLandingSearchAnchor()
|
||||
if (import.meta.client) {
|
||||
window.addEventListener('scroll', syncLandingSearchScroll, { passive: true })
|
||||
window.addEventListener('resize', syncLandingSearchAnchor)
|
||||
requestAnimationFrame(syncLandingSearchAnchor)
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (import.meta.client) {
|
||||
window.removeEventListener('scroll', syncLandingSearchScroll)
|
||||
window.removeEventListener('resize', syncLandingSearchAnchor)
|
||||
}
|
||||
})
|
||||
|
||||
function syncLandingSearchScroll() {
|
||||
if (!import.meta.client) return
|
||||
landingSearchScrollY.value = Math.max(0, window.scrollY || 0)
|
||||
}
|
||||
|
||||
function syncLandingSearchAnchor() {
|
||||
if (!import.meta.client) return
|
||||
const headerShell = document.querySelector<HTMLElement>('[data-header-shell]')
|
||||
const headerPill = document.querySelector<HTMLElement>('[data-header-pill]')
|
||||
|
||||
if (headerShell && headerPill) {
|
||||
landingSearchTopStop.value = Math.max(
|
||||
0,
|
||||
Math.round(headerPill.getBoundingClientRect().top - headerShell.getBoundingClientRect().top),
|
||||
)
|
||||
}
|
||||
else {
|
||||
landingSearchTopStop.value = LANDING_SEARCH_TOP_STOP
|
||||
}
|
||||
|
||||
if (!isLandingPage.value) {
|
||||
landingSearchTopStart.value = LANDING_SEARCH_TOP_FALLBACK_START
|
||||
return
|
||||
}
|
||||
|
||||
const anchor = document.querySelector<HTMLElement>('[data-landing-search-anchor]')
|
||||
if (!anchor) {
|
||||
landingSearchTopStart.value = LANDING_SEARCH_TOP_FALLBACK_START
|
||||
return
|
||||
}
|
||||
|
||||
const anchorBottom = anchor.getBoundingClientRect().bottom + window.scrollY
|
||||
landingSearchTopStart.value = Math.max(
|
||||
landingSearchTopStop.value,
|
||||
Math.round(anchorBottom + LANDING_SEARCH_BOTTOM_GAP),
|
||||
)
|
||||
}
|
||||
|
||||
const landingSearchTop = computed(() => {
|
||||
if (!isLandingPage.value) return landingSearchTopStop.value
|
||||
return Math.max(
|
||||
landingSearchTopStop.value,
|
||||
landingSearchTopStart.value - landingSearchScrollY.value,
|
||||
)
|
||||
})
|
||||
|
||||
const searchCapsuleWidthClass = 'w-full max-w-[1120px]'
|
||||
const searchCapsuleBaseClass = `pill-glass h-16 min-w-0 rounded-full px-2.5 py-2.5 ${searchCapsuleWidthClass}`
|
||||
|
||||
const searchCapsuleClass = computed(() => {
|
||||
if (isLandingPage.value) {
|
||||
return `${searchCapsuleBaseClass} pointer-events-auto shadow-2xl`
|
||||
}
|
||||
return `${searchCapsuleBaseClass} pointer-events-auto`
|
||||
})
|
||||
|
||||
const searchCapsuleWrapperClass = computed(() => {
|
||||
if (isLandingPage.value) {
|
||||
return 'pointer-events-none absolute inset-x-0 z-10 hidden justify-center lg:flex'
|
||||
}
|
||||
|
||||
return 'pointer-events-none absolute inset-x-0 top-1/2 z-10 hidden -translate-y-1/2 justify-center lg:flex'
|
||||
})
|
||||
|
||||
const searchCapsuleWrapperStyle = computed(() => {
|
||||
if (!isLandingPage.value) return undefined
|
||||
|
||||
return {
|
||||
top: `${landingSearchTop.value}px`,
|
||||
}
|
||||
})
|
||||
|
||||
const headerBackdropClass = computed(() => {
|
||||
if (isManagerStagePage.value) {
|
||||
return 'header-glass-backdrop--manager'
|
||||
}
|
||||
|
||||
if (isLandingPage.value) {
|
||||
return 'header-glass-backdrop--landing'
|
||||
}
|
||||
|
||||
return 'header-glass-backdrop--default'
|
||||
})
|
||||
|
||||
function buildHeaderSearchQuery(from: string, to: string, cargo: string) {
|
||||
const currentQuery = route.query || {}
|
||||
const patch = {
|
||||
from,
|
||||
to,
|
||||
cargo,
|
||||
}
|
||||
|
||||
if (isCalcPage.value) {
|
||||
return {
|
||||
...currentQuery,
|
||||
...buildCalcQuery(patch),
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...currentQuery,
|
||||
...(from ? { from } : {}),
|
||||
...(to ? { to } : {}),
|
||||
...(cargo ? { cargo } : {}),
|
||||
}
|
||||
}
|
||||
|
||||
async function submitHeaderSearch() {
|
||||
const from = logisticsSearch.from.trim()
|
||||
const to = logisticsSearch.to.trim()
|
||||
const cargo = logisticsSearch.cargo.trim()
|
||||
await navigateToLocalized({
|
||||
path: '/catalog',
|
||||
query: buildHeaderSearchQuery(from, to, cargo),
|
||||
})
|
||||
}
|
||||
|
||||
type StepRoute = 'from' | 'to' | 'cargo'
|
||||
|
||||
async function openStep(step: StepRoute) {
|
||||
const from = logisticsSearch.from.trim()
|
||||
const to = logisticsSearch.to.trim()
|
||||
const cargo = logisticsSearch.cargo.trim()
|
||||
const stepPath = step === 'from'
|
||||
? '/catalog/product'
|
||||
: step === 'to'
|
||||
? '/catalog/destination'
|
||||
: '/catalog/quantity'
|
||||
await navigateToLocalized({
|
||||
path: stepPath,
|
||||
query: buildHeaderSearchQuery(from, to, cargo),
|
||||
})
|
||||
}
|
||||
|
||||
async function goToSignIn() {
|
||||
await auth.signIn()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header class="header-glass fixed inset-x-0 top-0 z-50 border-0">
|
||||
<header
|
||||
class="header-glass fixed inset-x-0 top-0 z-50 border-0"
|
||||
>
|
||||
<div class="header-glass-backdrop" :class="headerBackdropClass" aria-hidden="true" />
|
||||
|
||||
<div class="relative z-10 mx-auto max-w-[2200px] px-4 py-4">
|
||||
<div class="relative z-10 mx-auto max-w-[2200px] px-4 py-4" data-header-shell>
|
||||
<div class="grid items-center gap-2 lg:grid-cols-[auto_1fr_auto]">
|
||||
<div class="pill-glass relative z-20 hidden h-16 items-center rounded-full px-2.5 py-2.5 lg:flex">
|
||||
<NuxtLink :to="localePath('/')" class="btn h-11 min-h-0 rounded-full border-0 bg-transparent px-4 shadow-none text-sm font-black tracking-wide">
|
||||
optovia
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Left pill: GL + hamburger (desktop only) -->
|
||||
<div class="pill-glass relative z-20 hidden h-16 items-center rounded-full px-2.5 py-2.5 lg:flex" data-header-pill>
|
||||
<NuxtLink :to="toLocalized('/')" class="btn h-11 min-h-0 rounded-full border-0 bg-transparent px-4 shadow-none">Optovia</NuxtLink>
|
||||
<div class="h-6 w-px shrink-0 bg-base-300/85" />
|
||||
|
||||
<div class="flex items-center rounded-full bg-white/55 p-1">
|
||||
<NuxtLink
|
||||
v-for="lang in locales"
|
||||
:key="lang.code"
|
||||
:to="switchLocalePath(lang.code)"
|
||||
class="rounded-full px-3 py-1 text-xs font-semibold transition-colors"
|
||||
:class="locale === lang.code ? 'bg-white text-[#2f2418]' : 'text-[#6f6250] hover:text-[#2f2418]'"
|
||||
>
|
||||
{{ lang.code.toUpperCase() }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<AppLocaleCurrencySelector />
|
||||
<div class="h-6 w-px shrink-0 bg-base-300/85" />
|
||||
|
||||
<button
|
||||
class="btn h-11 w-11 min-h-0 min-w-0 rounded-full border-0 bg-transparent p-0 shadow-none text-base-content/70"
|
||||
:aria-label="locale === 'en' ? 'Menu' : 'Меню'"
|
||||
:aria-label="$t('ui.menu')"
|
||||
@click="isMenuOpen = !isMenuOpen"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||||
@@ -138,76 +280,57 @@ watch(() => route.fullPath, () => {
|
||||
|
||||
<div class="hidden lg:block" aria-hidden="true" />
|
||||
|
||||
<div class="lg:hidden">
|
||||
<div v-if="!props.hideSearchCapsule" class="lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary h-10 min-h-0 w-full rounded-full text-sm font-semibold"
|
||||
@click="openStep('product')"
|
||||
@click="openStep('from')"
|
||||
>
|
||||
{{ locale === 'en' ? 'Start Search' : 'Начать поиск' }}
|
||||
{{ $t('ui.calculate') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Right pill: profile (desktop only) -->
|
||||
<div class="pill-glass relative z-20 hidden h-16 items-center rounded-full px-2.5 py-2.5 lg:flex">
|
||||
<NuxtLink :to="localePath('/catalog')" class="btn h-11 min-h-0 rounded-full border-0 bg-transparent px-4 shadow-none">
|
||||
{{ locale === 'en' ? 'Catalog' : 'Каталог' }}
|
||||
<NuxtLink :to="toLocalized('/clientarea/orders')" class="btn h-11 min-h-0 rounded-full border-0 bg-transparent px-4 shadow-none">
|
||||
{{ $t('ui.my_orders') }}
|
||||
</NuxtLink>
|
||||
|
||||
<div class="h-6 w-px shrink-0 bg-base-300/85" />
|
||||
|
||||
<NuxtLink :to="localePath('/clientarea/orders')" class="btn h-11 min-h-0 rounded-full border-0 bg-transparent px-4 shadow-none">
|
||||
{{ locale === 'en' ? 'Orders' : 'Заказы' }}
|
||||
</NuxtLink>
|
||||
|
||||
<div class="h-6 w-px shrink-0 bg-base-300/85" />
|
||||
|
||||
<NuxtLink
|
||||
v-if="isAuthenticated"
|
||||
:to="localePath('/clientarea/profile')"
|
||||
class="btn h-11 min-h-0 gap-2 rounded-full border-0 bg-transparent pl-2 pr-4 shadow-none"
|
||||
>
|
||||
<UserAvatar :seed="profileLabel" :label="profileLabel" :size="34" />
|
||||
<NuxtLink v-if="isAuthenticated" :to="toLocalized('/clientarea/profile')" class="btn h-11 min-h-0 gap-2 rounded-full border-0 bg-transparent pl-2 pr-4 shadow-none">
|
||||
<UserAvatar :seed="profileLabel" :label="profileLabel" :size="36" />
|
||||
{{ profileLabel }}
|
||||
</NuxtLink>
|
||||
<button
|
||||
v-else
|
||||
class="btn h-11 min-h-0 rounded-full border-0 bg-transparent px-4 shadow-none"
|
||||
@click="handleAuthAction"
|
||||
>
|
||||
{{ locale === 'en' ? 'Log in' : 'Войти' }}
|
||||
</button>
|
||||
<button v-else class="btn h-11 min-h-0 rounded-full border-0 bg-transparent px-4 shadow-none" @click="goToSignIn">{{ $t('ui.log_in') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showSearchCapsule" class="pointer-events-none absolute inset-x-0 z-10 hidden justify-center lg:flex" style="top: 16px;">
|
||||
<div class="pill-glass h-16 min-w-0 w-full max-w-[1120px] rounded-full px-2.5 py-2.5 pointer-events-auto shadow-2xl">
|
||||
<div v-if="!props.hideSearchCapsule" :class="searchCapsuleWrapperClass" :style="searchCapsuleWrapperStyle">
|
||||
<div :class="searchCapsuleClass">
|
||||
<form class="flex min-w-0 flex-wrap items-center gap-2 rounded-full" @submit.prevent="submitHeaderSearch">
|
||||
<label class="search-arch input flex h-11 min-h-0 min-w-[170px] flex-1 items-center gap-3 rounded-full shadow-none">
|
||||
<span class="shrink-0 text-base leading-none">🛒</span>
|
||||
<span class="shrink-0 text-base leading-none">{{ fromFlag }}</span>
|
||||
<input
|
||||
:value="searchProductLabel"
|
||||
:value="logisticsSearch.from"
|
||||
type="text"
|
||||
class="w-full cursor-pointer"
|
||||
:placeholder="locale === 'en' ? 'Product' : 'Товар'"
|
||||
:placeholder="$t('ui.from')"
|
||||
readonly
|
||||
@focus.prevent="openStep('product')"
|
||||
@click.prevent="openStep('product')"
|
||||
>
|
||||
@focus.prevent="openStep('from')"
|
||||
@click.prevent="openStep('from')"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="search-arch input flex h-11 min-h-0 min-w-[170px] flex-1 items-center gap-3 rounded-full shadow-none">
|
||||
<span class="shrink-0 text-base leading-none">📍</span>
|
||||
<span class="shrink-0 text-base leading-none">{{ toFlag }}</span>
|
||||
<input
|
||||
:value="searchDestinationLabel"
|
||||
:value="logisticsSearch.to"
|
||||
type="text"
|
||||
class="w-full cursor-pointer"
|
||||
:placeholder="locale === 'en' ? 'Destination' : 'Назначение'"
|
||||
:placeholder="$t('ui.to')"
|
||||
readonly
|
||||
@focus.prevent="openStep('destination')"
|
||||
@click.prevent="openStep('destination')"
|
||||
>
|
||||
@focus.prevent="openStep('to')"
|
||||
@click.prevent="openStep('to')"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="search-arch input flex h-11 min-h-0 min-w-[190px] flex-[1.4] items-center gap-3 rounded-full shadow-none">
|
||||
<svg viewBox="0 0 24 24" fill="none" class="h-4 w-4 shrink-0 text-base-content/60" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
|
||||
@@ -215,79 +338,180 @@ watch(() => route.fullPath, () => {
|
||||
<path d="M12 22V12" />
|
||||
</svg>
|
||||
<input
|
||||
:value="searchQuantityLabel"
|
||||
:value="logisticsSearch.cargo"
|
||||
type="text"
|
||||
class="w-full cursor-pointer"
|
||||
:placeholder="locale === 'en' ? 'Volume' : 'Объем'"
|
||||
:placeholder="$t('ui.cargo')"
|
||||
readonly
|
||||
@focus.prevent="openStep('quantity')"
|
||||
@click.prevent="openStep('quantity')"
|
||||
>
|
||||
@focus.prevent="openStep('cargo')"
|
||||
@click.prevent="openStep('cargo')"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<button type="submit" class="btn btn-secondary h-11 min-h-0 rounded-full px-5">
|
||||
{{ locale === 'en' ? 'Find' : 'Найти' }}
|
||||
</button>
|
||||
<button type="submit" class="btn btn-secondary h-11 min-h-0 rounded-full px-5">{{ $t('ui.find') }}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<nav v-if="!isAuthPage" class="dock-glass fixed inset-x-0 bottom-0 z-50 flex items-center justify-around px-2 py-2 lg:hidden">
|
||||
<NuxtLink :to="localePath('/')" class="dock-item" :class="isBasePathActive('/', true) ? 'dock-item--active' : ''" aria-label="Home">
|
||||
<nav v-if="showAdminDock" class="admin-dock-shell" :aria-label="$t('ui.manager_navigation')">
|
||||
<div class="admin-dock-glass">
|
||||
<NuxtLink
|
||||
:to="toLocalized('/manager/orders')"
|
||||
class="admin-dock-item"
|
||||
:class="isBasePathActive('/manager/orders') ? 'admin-dock-item--active' : ''"
|
||||
:aria-label="$t('ui.orders')"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 7h11v10H3z" />
|
||||
<path d="M14 10h4l3 3v4h-7z" />
|
||||
<circle cx="7.5" cy="18" r="1.5" />
|
||||
<circle cx="18.5" cy="18" r="1.5" />
|
||||
</svg>
|
||||
<span class="admin-dock-label">{{ $t('ui.orders') }}</span>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink
|
||||
:to="toLocalized('/manager/quotations')"
|
||||
class="admin-dock-item"
|
||||
:class="isBasePathActive('/manager/quotations') || isBasePathActive('/manager/tariffs') ? 'admin-dock-item--active' : ''"
|
||||
:aria-label="$t('ui.quotations')"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M7 3h8l4 4v14H5V3z" />
|
||||
<path d="M15 3v5h5" />
|
||||
<path d="M8 12h8" />
|
||||
<path d="M8 16h8" />
|
||||
</svg>
|
||||
<span class="admin-dock-label">{{ $t('ui.quotations') }}</span>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink
|
||||
:to="toLocalized('/manager')"
|
||||
class="admin-dock-item"
|
||||
:class="isBasePathActive('/manager') ? 'admin-dock-item--active' : ''"
|
||||
:aria-label="$t('ui.hubs')"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="6" cy="17" r="2" />
|
||||
<circle cx="18" cy="7" r="2" />
|
||||
<circle cx="18" cy="17" r="2" />
|
||||
<path d="M7.5 15.5 16.5 8.5" />
|
||||
<path d="M8 17h8" />
|
||||
</svg>
|
||||
<span class="admin-dock-label">{{ $t('ui.hubs') }}</span>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink
|
||||
:to="toLocalized('/manager')"
|
||||
class="admin-dock-item"
|
||||
:class="isBasePathActive('/manager') ? 'admin-dock-item--active' : ''"
|
||||
:aria-label="$t('ui.users')"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="9.5" cy="7" r="3" />
|
||||
<path d="M21 21v-2a4 4 0 0 0-3-3.87" />
|
||||
<path d="M16 3.13a3 3 0 0 1 0 5.74" />
|
||||
</svg>
|
||||
<span class="admin-dock-label">{{ $t('ui.users') }}</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Mobile dock bar (bottom) -->
|
||||
<nav v-else-if="!isAuthPage" class="dock-glass fixed inset-x-0 bottom-0 z-50 flex items-center justify-around px-2 py-2 lg:hidden">
|
||||
<NuxtLink
|
||||
:to="toLocalized('/')"
|
||||
class="dock-item"
|
||||
:class="isBasePathActive('/', true) ? 'dock-item--active' : ''"
|
||||
aria-label="Optovia"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||
<polyline points="9 22 9 12 15 12 15 22" />
|
||||
</svg>
|
||||
<span class="dock-label">{{ locale === 'en' ? 'Home' : 'Домой' }}</span>
|
||||
<span class="dock-label">Optovia</span>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink :to="localePath('/catalog')" class="dock-item" :class="isBasePathActive('/catalog') ? 'dock-item--active' : ''" aria-label="Catalog">
|
||||
<svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="3" width="7" height="7" rx="1.5" />
|
||||
<rect x="14" y="3" width="7" height="7" rx="1.5" />
|
||||
<rect x="3" y="14" width="7" height="7" rx="1.5" />
|
||||
<rect x="14" y="14" width="7" height="7" rx="1.5" />
|
||||
<button
|
||||
class="dock-item"
|
||||
:class="isMenuOpen ? 'dock-item--active' : ''"
|
||||
:aria-label="$t('ui.menu')"
|
||||
@click="isMenuOpen = !isMenuOpen"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||||
<rect x="3" y="3" width="7" height="7" rx="1.5" /><rect x="14" y="3" width="7" height="7" rx="1.5" /><rect x="3" y="14" width="7" height="7" rx="1.5" /><rect x="14" y="14" width="7" height="7" rx="1.5" />
|
||||
</svg>
|
||||
<span class="dock-label">{{ locale === 'en' ? 'Catalog' : 'Каталог' }}</span>
|
||||
</NuxtLink>
|
||||
<span class="dock-label">{{ $t('ui.menu') }}</span>
|
||||
</button>
|
||||
|
||||
<NuxtLink :to="localePath('/clientarea/orders')" class="dock-item" :class="isBasePathActive('/clientarea/orders') ? 'dock-item--active' : ''" aria-label="Orders">
|
||||
<NuxtLink
|
||||
v-if="showLogistics"
|
||||
:to="toLocalized('/manager')"
|
||||
class="dock-item"
|
||||
:class="isBasePathActive('/manager') ? 'dock-item--active' : ''"
|
||||
:aria-label="$t('ui.manager')"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 7h11v10H3z" />
|
||||
<path d="M14 10h4l3 3v4h-7z" />
|
||||
<circle cx="7.5" cy="18" r="1.5" />
|
||||
<circle cx="18.5" cy="18" r="1.5" />
|
||||
</svg>
|
||||
<span class="dock-label">{{ locale === 'en' ? 'Orders' : 'Заказы' }}</span>
|
||||
<span class="dock-label">{{ $t('ui.manager') }}</span>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink
|
||||
:to="toLocalized('/clientarea/orders')"
|
||||
class="dock-item"
|
||||
:class="isBasePathActive('/clientarea/orders') ? 'dock-item--active' : ''"
|
||||
:aria-label="$t('ui.orders')"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 7h11v10H3z" />
|
||||
<path d="M14 10h4l3 3v4h-7z" />
|
||||
<circle cx="7.5" cy="18" r="1.5" />
|
||||
<circle cx="18.5" cy="18" r="1.5" />
|
||||
</svg>
|
||||
<span class="dock-label">{{ $t('ui.orders') }}</span>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink
|
||||
v-if="isAuthenticated"
|
||||
:to="localePath('/clientarea/profile')"
|
||||
:to="toLocalized('/clientarea/profile')"
|
||||
class="dock-item"
|
||||
:class="isBasePathActive('/clientarea/profile') ? 'dock-item--active' : ''"
|
||||
aria-label="Profile"
|
||||
:class="isBasePathActive('/clientarea/profile') || isBasePathActive('/clientarea/team') ? 'dock-item--active' : ''"
|
||||
:aria-label="$t('ui.profile')"
|
||||
>
|
||||
<UserAvatar :seed="profileLabel" :label="profileLabel" :size="24" />
|
||||
<span class="dock-label">{{ locale === 'en' ? 'Profile' : 'Профиль' }}</span>
|
||||
<span class="dock-label">{{ $t('ui.profile') }}</span>
|
||||
</NuxtLink>
|
||||
|
||||
<button v-else class="dock-item" aria-label="Auth" @click="handleAuthAction">
|
||||
<button
|
||||
v-else
|
||||
class="dock-item"
|
||||
:aria-label="$t('ui.login')"
|
||||
@click="goToSignIn"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" /><circle cx="12" cy="7" r="4" />
|
||||
</svg>
|
||||
<span class="dock-label">{{ locale === 'en' ? 'Log in' : 'Войти' }}</span>
|
||||
<span class="dock-label">{{ $t('ui.log_in') }}</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<!-- Fullscreen nav menu -->
|
||||
<Teleport to="body">
|
||||
<Transition name="menu-overlay">
|
||||
<div v-if="isMenuOpen" class="fixed inset-0 z-[100] flex flex-col overflow-y-auto bg-[#0b0b0d]">
|
||||
<div
|
||||
v-if="isMenuOpen"
|
||||
class="fixed inset-0 z-[100] flex flex-col overflow-y-auto bg-[#0b0b0d]"
|
||||
>
|
||||
<div class="flex justify-end px-5 pt-5">
|
||||
<button class="flex h-12 w-12 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20" @click="isMenuOpen = false">
|
||||
<button
|
||||
class="flex h-12 w-12 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20"
|
||||
@click="isMenuOpen = false"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" class="h-6 w-6" stroke="currentColor" stroke-width="2" stroke-linecap="round">
|
||||
<path d="M18 6 6 18M6 6l12 12" />
|
||||
</svg>
|
||||
@@ -298,53 +522,41 @@ watch(() => route.fullPath, () => {
|
||||
<NuxtLink
|
||||
v-for="(link, i) in menuLinks"
|
||||
:key="link.to"
|
||||
:to="localePath(link.to)"
|
||||
:to="toLocalized(link.to)"
|
||||
class="menu-item group flex items-center gap-4 rounded-2xl px-5 py-5 transition-all duration-200 hover:bg-white/8 hover:pl-7"
|
||||
:class="isBasePathActive(link.to) ? 'bg-white/8' : ''"
|
||||
:style="{ animationDelay: `${i * 60}ms` }"
|
||||
@click="isMenuOpen = false"
|
||||
>
|
||||
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 shadow-lg transition-transform duration-200 group-hover:scale-110">
|
||||
<svg v-if="link.icon === 'home'" viewBox="0 0 24 24" fill="none" class="h-5 w-5 text-white" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||
<polyline points="9 22 9 12 15 12 15 22" />
|
||||
<div
|
||||
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br shadow-lg transition-transform duration-200 group-hover:scale-110"
|
||||
:class="menuIconBg(link.icon)"
|
||||
>
|
||||
<svg v-if="link.icon === 'orders'" viewBox="0 0 24 24" fill="none" class="h-5 w-5 text-white" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="3" width="7" height="7" rx="1.5" /><rect x="14" y="3" width="7" height="7" rx="1.5" /><rect x="3" y="14" width="7" height="7" rx="1.5" /><rect x="14" y="14" width="7" height="7" rx="1.5" />
|
||||
</svg>
|
||||
<svg v-else-if="link.icon === 'catalog'" viewBox="0 0 24 24" fill="none" class="h-5 w-5 text-white" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="3" width="7" height="7" rx="1.5" />
|
||||
<rect x="14" y="3" width="7" height="7" rx="1.5" />
|
||||
<rect x="3" y="14" width="7" height="7" rx="1.5" />
|
||||
<rect x="14" y="14" width="7" height="7" rx="1.5" />
|
||||
</svg>
|
||||
<svg v-else-if="link.icon === 'orders'" viewBox="0 0 24 24" fill="none" class="h-5 w-5 text-white" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<svg v-else-if="link.icon === 'logistics'" viewBox="0 0 24 24" fill="none" class="h-5 w-5 text-white" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 7h11v10H3z" />
|
||||
<path d="M14 10h4l3 3v4h-7z" />
|
||||
<circle cx="7.5" cy="18" r="1.5" />
|
||||
<circle cx="18.5" cy="18" r="1.5" />
|
||||
</svg>
|
||||
<svg v-else viewBox="0 0 24 24" fill="none" class="h-5 w-5 text-white" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
||||
<circle cx="12" cy="7" r="4" />
|
||||
<svg v-else-if="link.icon === 'apps'" viewBox="0 0 24 24" fill="none" class="h-5 w-5 text-white" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="13.5" cy="6.5" r="2" /><circle cx="17.5" cy="10.5" r="2" /><circle cx="8.5" cy="7.5" r="2" /><circle cx="6.5" cy="12" r="2" />
|
||||
<path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.9 0 1.5-.7 1.5-1.5 0-.4-.1-.7-.4-1-.3-.3-.4-.7-.4-1.1 0-.8.7-1.5 1.5-1.5H16c3.3 0 6-2.7 6-6 0-5.5-4.5-9.9-10-9.9Z" />
|
||||
</svg>
|
||||
<svg v-else-if="link.icon === 'map'" viewBox="0 0 24 24" fill="none" class="h-5 w-5 text-white" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" /><circle cx="12" cy="10" r="3" />
|
||||
</svg>
|
||||
<svg v-else-if="link.icon === 'referral'" viewBox="0 0 24 24" fill="none" class="h-5 w-5 text-white" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0">
|
||||
<p class="text-xl font-semibold text-white">{{ link.label }}</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
|
||||
<button
|
||||
class="menu-item mt-6 flex items-center gap-3 rounded-2xl px-5 py-4 text-left text-white/80 transition hover:bg-white/8"
|
||||
@click="handleAuthAction"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" class="h-5 w-5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
|
||||
<path d="M16 17l5-5-5-5" />
|
||||
<path d="M21 12H9" />
|
||||
<span class="text-lg font-bold text-white md:text-xl">{{ link.label }}</span>
|
||||
<svg viewBox="0 0 24 24" fill="none" class="ml-auto h-5 w-5 shrink-0 text-white/0 transition-all duration-200 group-hover:translate-x-1 group-hover:text-white/50" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m9 18 6-6-6-6" />
|
||||
</svg>
|
||||
<span class="text-base font-medium">
|
||||
{{ isAuthenticated ? (locale === 'en' ? 'Log out' : 'Выйти') : (locale === 'en' ? 'Log in' : 'Войти') }}
|
||||
</span>
|
||||
</button>
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
</div>
|
||||
</Transition>
|
||||
@@ -377,6 +589,10 @@ watch(() => route.fullPath, () => {
|
||||
background: linear-gradient(180deg, rgba(11, 26, 47, 0.78) 0%, rgba(11, 26, 47, 0.38) 36%, rgba(11, 26, 47, 0) 100%);
|
||||
}
|
||||
|
||||
.header-glass-backdrop--manager {
|
||||
background: linear-gradient(180deg, rgba(8, 17, 29, 0.84) 0%, rgba(8, 17, 29, 0.48) 36%, rgba(8, 17, 29, 0) 100%);
|
||||
}
|
||||
|
||||
.pill-glass {
|
||||
position: relative;
|
||||
background: rgba(243, 238, 230, 0.94);
|
||||
@@ -404,22 +620,25 @@ watch(() => route.fullPath, () => {
|
||||
color: rgba(107, 114, 128, 0.62);
|
||||
}
|
||||
|
||||
.nav-pill {
|
||||
transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
opacity 0.2s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.menu-overlay-enter-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.menu-overlay-enter-active .menu-item {
|
||||
animation: menu-item-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
.menu-overlay-leave-active {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.menu-overlay-leave-active .menu-item {
|
||||
animation: menu-item-out 0.2s ease both;
|
||||
}
|
||||
|
||||
.menu-overlay-enter-from,
|
||||
.menu-overlay-leave-to {
|
||||
opacity: 0;
|
||||
@@ -450,6 +669,71 @@ watch(() => route.fullPath, () => {
|
||||
padding-bottom: env(safe-area-inset-bottom, 0px);
|
||||
}
|
||||
|
||||
.admin-dock-shell {
|
||||
position: fixed;
|
||||
inset-inline: 0;
|
||||
bottom: 0;
|
||||
z-index: 50;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.admin-dock-glass {
|
||||
pointer-events: auto;
|
||||
display: inline-flex;
|
||||
height: 4rem;
|
||||
width: fit-content;
|
||||
max-width: min(100%, calc(100vw - 2rem));
|
||||
gap: 0.3rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(219, 208, 191, 0.78);
|
||||
background: rgba(243, 238, 230, 0.9);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(180%);
|
||||
backdrop-filter: blur(18px) saturate(180%);
|
||||
box-shadow:
|
||||
0 20px 44px rgba(52, 40, 24, 0.2),
|
||||
0 6px 16px rgba(52, 40, 24, 0.1);
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.admin-dock-item {
|
||||
display: flex;
|
||||
height: 3rem;
|
||||
min-width: 0;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.45rem;
|
||||
border-radius: 999px;
|
||||
padding: 0 0.9rem;
|
||||
color: rgba(52, 40, 24, 0.72);
|
||||
transition:
|
||||
background-color 0.16s ease,
|
||||
color 0.16s ease,
|
||||
transform 0.16s ease;
|
||||
}
|
||||
|
||||
.admin-dock-item:hover {
|
||||
background: rgba(255, 255, 255, 0.64);
|
||||
color: rgba(33, 25, 15, 0.88);
|
||||
}
|
||||
|
||||
.admin-dock-item--active {
|
||||
background: #2f2416;
|
||||
color: #fff8ef;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.admin-dock-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.02em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dock-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -463,7 +747,7 @@ watch(() => route.fullPath, () => {
|
||||
}
|
||||
|
||||
.dock-item--active {
|
||||
color: #2f2416;
|
||||
color: oklch(var(--s));
|
||||
}
|
||||
|
||||
.dock-label {
|
||||
|
||||
107
app/components/AppLocaleCurrencySelector.vue
Normal file
107
app/components/AppLocaleCurrencySelector.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<script setup lang="ts">
|
||||
import type { AppLocale } from '~/composables/useLocaleCurrency'
|
||||
|
||||
const {
|
||||
locale,
|
||||
currency,
|
||||
localeOptions,
|
||||
currencyOptions,
|
||||
languageCode,
|
||||
currencyCode,
|
||||
ratesProviderUrl,
|
||||
setLocale,
|
||||
setCurrency,
|
||||
t,
|
||||
} = useLocaleCurrency()
|
||||
|
||||
const isOpen = ref(false)
|
||||
const switchLocalePath = useSwitchLocalePath()
|
||||
|
||||
function closeSelector() {
|
||||
isOpen.value = false
|
||||
}
|
||||
|
||||
async function changeLocale(code: AppLocale) {
|
||||
const nextPath = switchLocalePath(code)
|
||||
await setLocale(code)
|
||||
if (nextPath) {
|
||||
await navigateTo(nextPath)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<button
|
||||
type="button"
|
||||
class="btn h-11 min-h-0 gap-2 rounded-full border-0 bg-transparent px-3 text-xs font-black uppercase tracking-[0.08em] shadow-none transition hover:bg-white/70"
|
||||
:aria-label="t('settings.open')"
|
||||
:aria-expanded="String(isOpen)"
|
||||
@click="isOpen = !isOpen"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" class="h-4 w-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M2 12h20" />
|
||||
<path d="M12 2a15.3 15.3 0 0 1 0 20" />
|
||||
<path d="M12 2a15.3 15.3 0 0 0 0 20" />
|
||||
</svg>
|
||||
<span>{{ languageCode }} · {{ currencyCode }}</span>
|
||||
</button>
|
||||
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="absolute left-0 top-[calc(100%+0.7rem)] z-[110] w-[292px] rounded-[28px] bg-[#f3eee6] p-3 text-[#2f2418] shadow-[0_24px_60px_rgba(35,30,25,0.22)]"
|
||||
>
|
||||
<div class="rounded-[22px] bg-white p-3">
|
||||
<p class="px-2 text-[11px] font-black uppercase tracking-[0.16em] text-[#8a7761]">{{ t('settings.language') }}</p>
|
||||
<div class="mt-2 grid grid-cols-2 gap-1.5">
|
||||
<button
|
||||
v-for="item in localeOptions"
|
||||
:key="item.code"
|
||||
type="button"
|
||||
class="rounded-2xl px-3 py-2 text-left text-sm font-bold transition"
|
||||
:class="locale === item.code ? 'bg-[#2f2418] text-white' : 'bg-[#f6f1ea] text-[#5f4b33] hover:bg-[#eee6dc]'"
|
||||
@click="changeLocale(item.code)"
|
||||
>
|
||||
<span class="block">{{ item.nativeLabel }}</span>
|
||||
<span class="mt-0.5 block text-[11px] opacity-65">{{ item.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 rounded-[22px] bg-white p-3">
|
||||
<p class="px-2 text-[11px] font-black uppercase tracking-[0.16em] text-[#8a7761]">{{ t('settings.currency') }}</p>
|
||||
<div class="mt-2 grid grid-cols-2 gap-1.5">
|
||||
<button
|
||||
v-for="item in currencyOptions"
|
||||
:key="item.code"
|
||||
type="button"
|
||||
class="rounded-2xl px-3 py-2 text-left text-sm font-bold transition"
|
||||
:class="currency === item.code ? 'bg-[#2f2418] text-white' : 'bg-[#f6f1ea] text-[#5f4b33] hover:bg-[#eee6dc]'"
|
||||
@click="setCurrency(item.code)"
|
||||
>
|
||||
<span class="block">{{ item.code }}</span>
|
||||
<span class="mt-0.5 block text-[11px] opacity-65">{{ item.symbol }} · {{ item.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="mt-2 h-10 w-full rounded-full bg-[#2f2418] text-sm font-black text-white transition hover:bg-[#493823]"
|
||||
@click="closeSelector"
|
||||
>
|
||||
{{ t('settings.apply') }}
|
||||
</button>
|
||||
|
||||
<a
|
||||
:href="ratesProviderUrl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="mt-2 block px-2 text-center text-[10px] font-bold uppercase tracking-[0.12em] text-[#8a7761] transition hover:text-[#2f2418]"
|
||||
>
|
||||
{{ t('settings.ratesBy') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user