marzban-dev
87 lines
2.1 KiB
Vue
87 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
|
|
// import
|
|
|
|
import useGetAccount from "~/composables/api/account/useGetAccount";
|
|
|
|
// types
|
|
|
|
type NavLink = {
|
|
title: string;
|
|
path: string;
|
|
};
|
|
|
|
// state
|
|
|
|
const { data: account } = useGetAccount();
|
|
const { logout } = useAuth();
|
|
|
|
const nav_links = ref<NavLink[]>([
|
|
{
|
|
title: "فروشگاه",
|
|
path: "#"
|
|
},
|
|
{
|
|
title: "دسته بندی ها",
|
|
path: "#"
|
|
},
|
|
{
|
|
title: "جستجو",
|
|
path: "#"
|
|
},
|
|
{
|
|
title: "ارتباط با ما",
|
|
path: "#"
|
|
},
|
|
{
|
|
title: "امکانات",
|
|
path: "#"
|
|
}
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<header class="w-full bg-white flex-center">
|
|
<div
|
|
class="size-full flex items-center justify-between container py-[2.25rem]"
|
|
>
|
|
<div v-if="!!account" class="w-2/12 flex items-center justify-start">
|
|
<span class="size-[2rem] bg-black rounded-full"></span>
|
|
<button @click="() => logout(true)">
|
|
خروج از وبسایت
|
|
</button>
|
|
</div>
|
|
|
|
<div v-else class="text-black">
|
|
KIR
|
|
</div>
|
|
|
|
<nav
|
|
class="flex-center gap-[2.5rem] w-8/12 typo-label-sm text-slate-500"
|
|
>
|
|
<NuxtLink
|
|
v-for="(link, index) in nav_links"
|
|
:key="index"
|
|
:to="link.path"
|
|
>
|
|
{{ link.title }}
|
|
</NuxtLink>
|
|
</nav>
|
|
|
|
<div class="w-2/12 flex items-center justify-end gap-[1.5rem]">
|
|
<button class="size-[1.5rem] flex-center">
|
|
<Icon name="ci:search" class="**:stroke-black" />
|
|
</button>
|
|
<button class="size-[1.5rem] flex-center">
|
|
<Icon name="ci:profile" class="**:stroke-black" />
|
|
</button>
|
|
<button class="size-[1.5rem] flex-center">
|
|
<Icon name="ci:cart" class="**:stroke-black" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|