Mamalizz
102 lines
2.8 KiB
Vue
102 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
// import
|
|
|
|
import useGetAccount from "~/composables/api/account/useGetAccount";
|
|
import { useAuth } from "~/composables/api/auth/useAuth";
|
|
import useBaseUrl from "~/composables/global/useBaseUrl";
|
|
|
|
// types
|
|
|
|
type NavLink = {
|
|
title: string;
|
|
path: string;
|
|
};
|
|
|
|
// state
|
|
|
|
const { data: account } = useGetAccount();
|
|
const { logout } = useAuth();
|
|
const baseUrl = useBaseUrl();
|
|
|
|
const nav_links = ref<NavLink[]>([
|
|
{
|
|
title: "فروشگاه",
|
|
path: "#",
|
|
},
|
|
{
|
|
title: "دسته بندی ها",
|
|
path: "#",
|
|
},
|
|
{
|
|
title: "جستجو",
|
|
path: "#",
|
|
},
|
|
{
|
|
title: "ارتباط با ما",
|
|
path: "/contact-us",
|
|
},
|
|
{
|
|
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 class="flex items-center gap-16">
|
|
<div class="flex items-center justify-end gap-[1.5rem]">
|
|
<button
|
|
v-if="!!account"
|
|
:title="account.first_name + ' ' + account.last_name"
|
|
@click="() => logout(true)"
|
|
class="size-[1.5rem] relative overflow-hidden rounded-full bg-slate-300"
|
|
>
|
|
<img :src="baseUrl + account.profile_photo" alt="" />
|
|
</button>
|
|
<NuxtLink to="/signin" v-else class="flex-center">
|
|
<Icon
|
|
name="ci:profile"
|
|
size="20px"
|
|
class="**:stroke-black"
|
|
/>
|
|
</NuxtLink>
|
|
<button class="flex-center">
|
|
<Icon
|
|
name="ci:search"
|
|
size="18px"
|
|
class="**:stroke-black"
|
|
/>
|
|
</button>
|
|
<button class="flex-center">
|
|
<Icon
|
|
name="ci:cart"
|
|
size="20px"
|
|
class="**:stroke-black"
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
<nav
|
|
class="flex-center gap-[2.5rem] typo-label-sm text-slate-600"
|
|
>
|
|
<NuxtLink
|
|
v-for="(link, index) in nav_links"
|
|
:key="index"
|
|
:to="link.path"
|
|
>
|
|
{{ link.title }}
|
|
</NuxtLink>
|
|
</nav>
|
|
</div>
|
|
|
|
<div>LOGO</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style lang="scss" scoped></style>
|