HAM!DREZA
123 lines
3.2 KiB
Vue
123 lines
3.2 KiB
Vue
<template>
|
|
<header class="header-desktop">
|
|
<router-link to="/">
|
|
<img src="/images/anahitaLogo.webp" alt="Asan Market" />
|
|
</router-link>
|
|
<AppDesktopHeaderNavigation />
|
|
<div>
|
|
<router-link v-if="!logged" :to="{ path: '/auth/login' }" class="w-40">
|
|
<Button v-bind="btns.login.props" class="not-logged" />
|
|
</router-link>
|
|
<Button
|
|
v-else
|
|
v-bind="btns.account.props"
|
|
@click="overlay($event, btns.account.component)"
|
|
class="text-[#333333] min-w-36"
|
|
/>
|
|
<Button
|
|
v-bind="btns.cart.props"
|
|
@click="overlay($event, btns.cart.component)"
|
|
class="text-[#333333] w-16 basket"
|
|
/>
|
|
</div>
|
|
<!-- <router-link v-if="!logged" :to="{ path: '/auth/login' }">
|
|
<Button v-bind="btns.login.props" />
|
|
</router-link>
|
|
<div v-else>
|
|
<template v-for="({ props, component }, key) in btns.logged" :key="key">
|
|
<Button v-bind="props" @click="overlay($event, component)" />
|
|
</template>
|
|
</div> -->
|
|
</header>
|
|
</template>
|
|
|
|
<script setup>
|
|
import init from '../../../../initialize/header'
|
|
const { btns } = init()
|
|
|
|
const logged = useCookie('token')
|
|
const { popup } = inject('service')
|
|
|
|
const overlay = (event, is) => {
|
|
popup.value.is = is
|
|
popup.value.toggle(event)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.header-desktop {
|
|
box-shadow: 0px 2px 20px rgba(0.22, 75.27, 129.62, 0.14);
|
|
@apply w-full h-[3.3rem] lg:h-24 bg-white shadow border-b pl-3 lg:px-3 2xl:p-6 flex items-center justify-between;
|
|
@apply sticky top-0 z-10 xl:gap-4;
|
|
|
|
&>a>img {
|
|
@apply text-center w-[180px];
|
|
}
|
|
|
|
&>a {
|
|
@apply shrink-0;
|
|
|
|
&>button {
|
|
@apply flex items-center text-white;
|
|
|
|
.p-button-icon {
|
|
@apply text-2xl;
|
|
}
|
|
|
|
.p-button-label {
|
|
@apply font-bold font-iran-sans tracking-widest whitespace-nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
&>div {
|
|
@apply flex items-center gap-6 2xl:gap-12 relative;
|
|
|
|
&::after {
|
|
@apply content-['_'] w-0.5 h-[1.3rem] bg-[#DCDCDC] absolute left-[3.6rem] 2xl:left-[4.4rem];
|
|
}
|
|
|
|
button {
|
|
@apply border-[#CCCCCC] h-12 rounded-[0.6rem] #{!important};
|
|
|
|
.p-button-label {
|
|
@apply text-lg font-medium font-vazir whitespace-nowrap;
|
|
}
|
|
|
|
.p-button-icon {
|
|
@apply text-[#333333] text-2xl;
|
|
}
|
|
|
|
&:first-child {
|
|
@apply pl-6 #{!important};
|
|
|
|
.p-button-icon {
|
|
@apply ml-2.5;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
@apply w-12 p-2 relative;
|
|
|
|
.p-badge {
|
|
@apply absolute w-4 h-4 bg-[#B3261E] top-0.5 right-0.5 flex items-center justify-center;
|
|
@apply text-white text-[0.7em] font-medium leading-none tracking-wide;
|
|
}
|
|
}
|
|
}
|
|
|
|
.not-logged {
|
|
@apply w-40 text-white p-2 #{!important};
|
|
.p-button-icon {
|
|
@apply text-white text-2xl;
|
|
}
|
|
}
|
|
|
|
.p-blockui-container {
|
|
@apply absolute;
|
|
}
|
|
}
|
|
}
|
|
</style>
|