89 lines
3.6 KiB
Vue
89 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
const route = useRoute()
|
|
const localePath = useLocalePath()
|
|
const { signOut } = useAuth()
|
|
|
|
const userData = useState<{
|
|
activeTeam?: { name?: string | null }
|
|
firstName?: string | null
|
|
} | null>('me', () => null)
|
|
|
|
const navItems = [
|
|
{ label: 'Orders', path: '/manager/orders', icon: 'lucide:package' },
|
|
{ label: 'Quotations', path: '/manager/quotations', icon: 'lucide:file-text' },
|
|
{ label: 'Tariffs', path: '/manager/tariffs', icon: 'lucide:waypoints' },
|
|
]
|
|
|
|
function isActive(path: string) {
|
|
const localized = localePath(path)
|
|
return route.path === localized || route.path.startsWith(`${localized}/`)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="manager-logistics-shell text-[#2f2418]">
|
|
<div class="sticky top-0 z-50 px-3 pt-3 md:px-4">
|
|
<div class="mx-auto max-w-[1440px]">
|
|
<header class="rounded-[30px] border border-[#e1d7c7] bg-[#efe6d8]/95 px-4 py-4 shadow-[0_18px_40px_rgba(47,36,24,0.08)] backdrop-blur">
|
|
<div class="flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<NuxtLink
|
|
:to="localePath('/')"
|
|
class="flex h-12 min-w-[88px] items-center justify-center rounded-full bg-[#2f2418] px-5 text-sm font-black uppercase tracking-[0.2em] text-white"
|
|
>
|
|
Optovia
|
|
</NuxtLink>
|
|
<div>
|
|
<p class="text-[11px] font-bold uppercase tracking-[0.18em] text-[#8a7761]">Logistics manager</p>
|
|
<h1 class="text-xl font-black leading-tight text-[#2f2418] md:text-2xl">Control tower</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="flex flex-wrap items-center gap-2">
|
|
<NuxtLink
|
|
v-for="item in navItems"
|
|
:key="item.path"
|
|
:to="localePath(item.path)"
|
|
class="inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-bold transition"
|
|
:class="isActive(item.path) ? 'bg-[#2f2418] text-white shadow-[0_10px_24px_rgba(47,36,24,0.16)]' : 'bg-white text-[#5f4b33] hover:bg-[#f8f3ec]'"
|
|
>
|
|
<Icon :name="item.icon" size="16" />
|
|
<span>{{ item.label }}</span>
|
|
</NuxtLink>
|
|
</nav>
|
|
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<div class="rounded-full bg-white px-4 py-2 text-sm font-semibold text-[#5f4b33]">
|
|
{{ userData?.activeTeam?.name || userData?.firstName || 'Active workspace' }}
|
|
</div>
|
|
<NuxtLink
|
|
:to="localePath('/clientarea/orders')"
|
|
class="inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-bold text-[#5f4b33] transition hover:bg-[#f8f3ec]"
|
|
>
|
|
<Icon name="lucide:arrow-left" size="16" />
|
|
<span>Client area</span>
|
|
</NuxtLink>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center gap-2 rounded-full bg-[#2f2418] px-4 py-2 text-sm font-bold text-white transition hover:bg-[#493824]"
|
|
@click="signOut()"
|
|
>
|
|
<Icon name="lucide:log-out" size="16" />
|
|
<span>Sign out</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="px-3 pb-5 pt-3 md:px-4 md:pb-6">
|
|
<div class="mx-auto max-w-[1440px]">
|
|
<section class="rounded-[34px] bg-[#f3eee6] px-4 py-4 shadow-[0_24px_72px_rgba(3,8,20,0.18)] md:px-5 md:py-5 lg:px-6 lg:py-6">
|
|
<slot />
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|