144 lines
4.3 KiB
Vue
144 lines
4.3 KiB
Vue
<template>
|
|
<div class="d-flex flex-column height-100">
|
|
|
|
<Header @action="onAction" />
|
|
|
|
<v-navigation-drawer
|
|
v-model="showMenu"
|
|
v-if="showMenu"
|
|
:clipped="$vuetify.display.mdAndUp"
|
|
color="header-bg-color darken-3"
|
|
class="header-bg-color text-white pa-4 mt-6"
|
|
>
|
|
<v-row>
|
|
<v-col cols="12" class="pa-0">
|
|
<v-hover v-slot:default="{ isHovering, props }">
|
|
<router-link
|
|
v-bind="props"
|
|
:class="isHovering ? 'text-primary bg-white' : 'text-white'"
|
|
class="my-account-link d-block text-decoration-none h4 pa-2 px-6 my-1"
|
|
:to="{name:'AccountDashboard'}"
|
|
>Account Dashboard</router-link>
|
|
</v-hover>
|
|
|
|
<v-hover v-slot:default="{ isHovering, props }">
|
|
<router-link
|
|
v-bind="props"
|
|
:class="isHovering ? 'text-primary bg-white' : 'text-white'"
|
|
class="my-account-link d-block text-decoration-none h4 pa-2 px-6 my-1"
|
|
:to="basicInfo.addresses&&basicInfo.addresses.length?{name:'AddressBook'}:{name:'EditAddressBook' ,params:{addressId:'new'}}"
|
|
>Address Book</router-link>
|
|
</v-hover>
|
|
<v-hover v-slot:default="{ isHovering, props }">
|
|
<router-link
|
|
v-bind="props"
|
|
:class="isHovering ? 'text-primary bg-white' : 'text-white'"
|
|
class="my-account-link d-block text-decoration-none h4 pa-2 px-6 my-1"
|
|
:to="{name:'EditAccountInfo',params:{value:'false'}}"
|
|
>Account Information</router-link>
|
|
</v-hover>
|
|
<v-hover v-slot:default="{ isHovering, props }">
|
|
<router-link
|
|
v-bind="props"
|
|
:class="isHovering ? 'text-primary bg-white' : 'text-white'"
|
|
class="d-block text-decoration-none h4 pa-2 px-6 my-1"
|
|
to
|
|
@click.native="goToLogout()"
|
|
>Logout</router-link>
|
|
</v-hover>
|
|
</v-col>
|
|
</v-row>
|
|
</v-navigation-drawer>
|
|
|
|
<v-content class="mt-10" :class="showMenu ? 'sidebar-router-padding-open' : 'sidebar-router-padding-close'">
|
|
<router-view class="pa-4 mt-10" :class="showMenu ? 'sidebar-router-padding-open' : 'sidebar-router-padding-close'"/>
|
|
</v-content>
|
|
<FooterComponent />
|
|
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import Header from "@/components/retailer/layout/header/Header.vue";
|
|
import FooterComponent from "@/components/retailer/layout/footer/FooterComponent.vue"
|
|
import craneLogoWhite from "@/assets/Crane_Logo_white.png";
|
|
|
|
import { createHelpers } from "vuex-map-fields";
|
|
|
|
const { mapFields } = createHelpers({
|
|
getterType: "layout/getField",
|
|
mutationType: "layout/updateField"
|
|
});
|
|
|
|
export default {
|
|
name: "Layout",
|
|
|
|
components: {
|
|
Header,
|
|
FooterComponent
|
|
},
|
|
|
|
props: {
|
|
source: String
|
|
},
|
|
data: () => ({
|
|
craneLogoWhite:craneLogoWhite,
|
|
showMenu: false
|
|
}),
|
|
computed: {
|
|
isDesktop: function() {
|
|
return this.$vuetify.display.xsOnly ? true : false;
|
|
},
|
|
basicInfo: function() {
|
|
return this.$store.state.accountOne.one;
|
|
},
|
|
orderProductsList() {
|
|
return this.$store.state.meProductList.orderProductsList;
|
|
},
|
|
...mapFields(["user", "user.userVisits"])
|
|
},
|
|
methods: {
|
|
goToLogout() {
|
|
localStorage.removeItem("cr_checkOutTab");
|
|
window.open("/logout-success", "_self");
|
|
},
|
|
onScroll() {
|
|
this.offsetTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
},
|
|
onAction() {
|
|
this.showMenu = !this.showMenu;
|
|
},
|
|
OnResize() {}
|
|
},
|
|
created() {
|
|
this.$store.dispatch("userCartProduct/cartProductList");
|
|
this.$store.dispatch("headerCategoryList/fetchCategoryList");
|
|
this.$store.dispatch("layout/fetchCmsBlock");
|
|
this.$store.dispatch("layout/fetchPageContent");
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
.router-link-active.my-account-link {
|
|
color: #2850da !important;
|
|
caret-color: #2850da !important;
|
|
background-color: #fff !important;
|
|
border-color: #fff !important;
|
|
}
|
|
.header-bg-color{
|
|
background-color: #2c50da!important;
|
|
box-shadow: none !important;
|
|
}
|
|
.sidebar-router-padding-open {
|
|
/* margin:0 130px 16px 132px; */
|
|
padding: 0 0 0 250px;
|
|
}
|
|
.sidebar-router-padding-close {
|
|
margin:0 16px 16px 16px;
|
|
}
|
|
|
|
</style>
|
|
<style lang="scss">
|
|
|
|
</style> |