somewhere
This commit is contained in:
Swift
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<aside class="mobile-menu">
|
||||
<nav class="body">
|
||||
<ul>
|
||||
<nuxt-link :to="{ name: 'index' }" exact tag="li">
|
||||
<a>استعلام گارانتی</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'warranty-terms', query: { page: 1 } }" tag="li">
|
||||
<a>شرایط گارانتی</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'download', query: { category: 'all', page: 1 } }" tag="li">
|
||||
<a>دانلود</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'about' }" tag="li">
|
||||
<a>درباره ما</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'contact' }" tag="li">
|
||||
<a>ارتباط با ما</a>
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
<div class="title">
|
||||
<!-- <span>نمایندگی</span>-->
|
||||
</div>
|
||||
<ul>
|
||||
<nuxt-link :to="{ name: 'agents' }" tag="li">
|
||||
<a>لیست نمایندگان</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'agent-benefits' }" tag="li">
|
||||
<a>مزایای نمایندگی</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'representation' }" tag="li">
|
||||
<a>اخذ نمایندگی</a>
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
<div class="title">
|
||||
<!-- <span>راهنما</span>-->
|
||||
</div>
|
||||
<ul>
|
||||
<nuxt-link :to="{ name: 'learning', query: { page: 1 } }" tag="li">
|
||||
<a>آموزش</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'FAQ' }" tag="li">
|
||||
<a>سوالات متداول</a>
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
<div class="title">
|
||||
<!-- <span>حساب کاربری</span>-->
|
||||
</div>
|
||||
<ul>
|
||||
<nuxt-link :to="isUser ? { name: 'account' } : { name: 'auth-login-register' }" tag="li">
|
||||
<a>
|
||||
<span v-if="isUser">{{ $auth.user.first_name + ' ' + $auth.user.last_name }}</span>
|
||||
<span v-else>ورود</span>
|
||||
<!-- user icon -->
|
||||
<i v-if="isUser && userHasNotification" class="notificationAnim fas fa-bell"></i>
|
||||
<i v-else class="fal fa-user"></i>
|
||||
</a>
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="bg" @click="menu(false)"></div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
mobileMenu() {
|
||||
return this.$store.state.front.mobileMenu
|
||||
},
|
||||
isUser() {
|
||||
return this.$auth.loggedIn && this.$auth.user.scope.includes('user')
|
||||
},
|
||||
userHasNotification() {
|
||||
return this.$store.state.front.unreadTickets + this.$store.state.front.agentInbox
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
$('#menu').click(() => {
|
||||
this.menu(!this.mobileMenu)
|
||||
})
|
||||
$('.mobile-menu ul li').click(() => {
|
||||
this.menu(false)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
menu(action) {
|
||||
const _DU = 0.5
|
||||
const _EASE = 'power4.inOut'
|
||||
this.$gsap
|
||||
.timeline({
|
||||
onComplete: () => {
|
||||
if (!action) $('.mobile-menu').css({ display: 'none' })
|
||||
}
|
||||
})
|
||||
.set($('.mobile-menu'), { display: 'block' })
|
||||
.fromTo(
|
||||
$('.mobile-menu .body'),
|
||||
{ left: action ? -250 : 0 },
|
||||
{ left: action ? 0 : -250, duration: _DU, ease: _EASE }
|
||||
)
|
||||
.fromTo(
|
||||
$('.mobile-menu .body li'),
|
||||
{
|
||||
x: action ? -30 : 0,
|
||||
opacity: action ? 0 : 1
|
||||
},
|
||||
{
|
||||
x: action ? 0 : -30,
|
||||
opacity: action ? 1 : 0,
|
||||
duration: _DU,
|
||||
ease: _EASE
|
||||
},
|
||||
'-=0.4'
|
||||
)
|
||||
.fromTo(
|
||||
$('.mobile-menu .bg'),
|
||||
{
|
||||
opacity: action ? 0 : 1
|
||||
},
|
||||
{
|
||||
opacity: action ? 1 : 0,
|
||||
duration: _DU
|
||||
},
|
||||
0
|
||||
)
|
||||
.to(
|
||||
$('#menu'),
|
||||
{
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
duration: _DU / 2,
|
||||
onComplete: () => {
|
||||
this.$store.commit('front/toggleMobileMenu')
|
||||
}
|
||||
},
|
||||
0
|
||||
)
|
||||
.to($('#menu'), { opacity: 1, scale: 1, duration: _DU / 2 }, _DU / 2)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<header class="site--header">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<nav class="col-6 col-lg-2 logo">
|
||||
<nuxt-link :to="{ name: 'index' }">
|
||||
<logo />
|
||||
</nuxt-link>
|
||||
</nav>
|
||||
<nav class="col-8 d-none d-lg-block">
|
||||
<ul class="links">
|
||||
<li
|
||||
class="dropDown-container help"
|
||||
:class="helpDropDownActiveClass && 'active'"
|
||||
@mouseenter="openDrop('help')"
|
||||
@mouseleave="closeDrop('help')"
|
||||
>
|
||||
<a>
|
||||
<span>راهنما</span>
|
||||
<i class="fas fa-angle-down"></i>
|
||||
</a>
|
||||
<div class="drop-down">
|
||||
<nuxt-link
|
||||
:to="{ name: 'learning', query: { page: 1 } }"
|
||||
:class="$route.name.includes('learning') && 'active'"
|
||||
>آموزش</nuxt-link
|
||||
>
|
||||
<nuxt-link :to="{ name: 'FAQ' }">سوالات متداول</nuxt-link>
|
||||
</div>
|
||||
</li>
|
||||
<nuxt-link :to="{ name: 'index' }" exact tag="li">
|
||||
<a>استعلام گارانتی</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'warranty-terms', query: { page: 1 } }" tag="li">
|
||||
<a>شرایط گارانتی</a>
|
||||
</nuxt-link>
|
||||
|
||||
<li
|
||||
class="dropDown-container agents"
|
||||
:class="agentsDropDownActiveClass && 'active'"
|
||||
@mouseenter="openDrop('agents')"
|
||||
@mouseleave="closeDrop('agents')"
|
||||
>
|
||||
<a>
|
||||
<span>نمایندگان</span>
|
||||
<i class="fas fa-angle-down"></i>
|
||||
</a>
|
||||
<div class="drop-down">
|
||||
<nuxt-link :to="{ name: 'agents' }">لیست نمایندگان</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'agent-benefits' }">مزایای نمایندگی</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'representation' }" :exact="false">اخذ نمایندگی</nuxt-link>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<nuxt-link
|
||||
:to="{ name: 'download', query: { category: 'all', page: 1 } }"
|
||||
:class="$route.name.includes('download') && 'active'"
|
||||
tag="li"
|
||||
>
|
||||
<a>دانلود</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'about' }" tag="li">
|
||||
<a>درباره ما</a>
|
||||
</nuxt-link>
|
||||
<nuxt-link :to="{ name: 'contact' }" tag="li">
|
||||
<a>ارتباط با ما</a>
|
||||
</nuxt-link>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav class="col-2 d-none d-lg-flex account">
|
||||
<nuxt-link :to="isUser ? { name: 'account' } : { name: 'auth-login-register' }">
|
||||
<span v-if="isUser" class="singleLineTxt" :title="fullName">{{ fullName }}</span>
|
||||
<span v-else>ورود</span>
|
||||
<i v-if="isUser && userHasNotification" class="notificationAnim fas fa-bell"></i>
|
||||
<i v-else class="fal fa-user"></i>
|
||||
</nuxt-link>
|
||||
</nav>
|
||||
<div class="col-6 d-flex d-lg-none align-items-center justify-content-end menu">
|
||||
<i id="menu" class="far" :class="!mobileMenu ? 'fa-bars' : 'fa-chevron-left'"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WS_User from '@/mixins/WS_User'
|
||||
import WS_Agent from '@/mixins/WS_Agent'
|
||||
export default {
|
||||
mixins: [WS_User, WS_Agent],
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
mobileMenu() {
|
||||
return this.$store.state.front.mobileMenu
|
||||
},
|
||||
isUser() {
|
||||
return this.$auth.loggedIn && this.$auth.user.scope.includes('user')
|
||||
},
|
||||
userHasNotification() {
|
||||
const store = this.$store.state.front
|
||||
return store.unreadTickets + store.agentInbox + store.newUserAnnosCount + store.newAgentAnnosCount
|
||||
},
|
||||
helpDropDownActiveClass() {
|
||||
return this.$route.name === 'learning' || this.$route.name === 'learning-post+' || this.$route.name === 'FAQ'
|
||||
},
|
||||
agentsDropDownActiveClass() {
|
||||
return this.$route.name === 'representation' || this.$route.name === 'agent-benefits'
|
||||
},
|
||||
fullName() {
|
||||
return this.$auth.user.first_name + ' ' + this.$auth.user.last_name
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
openDrop(name) {
|
||||
$(`.dropDown-container.${name}`).addClass('d-active')
|
||||
},
|
||||
closeDrop(name) {
|
||||
$(`.dropDown-container.${name}`).removeClass('d-active')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user