67 lines
1.7 KiB
Vue
67 lines
1.7 KiB
Vue
<template>
|
|
<q-header
|
|
class="header-container transparent"
|
|
:class="isOpenNav && 'mobile-nav'"
|
|
>
|
|
<send-banner
|
|
left-text="ENVÍO GRATIS a partir de 60€ | Compra el sábado hasta 14h y entrega el domingo"
|
|
right-text="Envíos 24-48 h a toda España, Portugal y sur de Francia"
|
|
mobile-text="ENVÍO GRATIS a partir de 60€"
|
|
v-if="!isOpenNav"
|
|
/>
|
|
|
|
<div class="header-container-wrapper custom-container">
|
|
<RouterLink to="/">
|
|
<LogoWhite v-if="!isOpenNav" />
|
|
<LogoGreenLight v-if="isOpenNav" />
|
|
</RouterLink>
|
|
|
|
<nav-links />
|
|
|
|
<user-area />
|
|
</div>
|
|
</q-header>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
import { defineComponent } from 'vue';
|
|
|
|
import { storeToRefs } from 'pinia';
|
|
import { useMobileStore } from 'src/stores/mobileNav';
|
|
import LogoGreenLight from '../logo/LogoGreenLight.vue';
|
|
import LogoWhite from '../logo/LogoWhite.vue';
|
|
import SendBanner from '../ui/SendBanner.vue';
|
|
import NavLinks from './NavLinks.vue';
|
|
import UserArea from './UserArea.vue';
|
|
|
|
export default defineComponent({
|
|
name: 'header-primary',
|
|
components: { SendBanner, UserArea, NavLinks, LogoWhite, LogoGreenLight },
|
|
setup() {
|
|
const mobileStore = useMobileStore();
|
|
const { isOpenNav } = storeToRefs(mobileStore);
|
|
const { handleResize } = mobileStore;
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
return { isOpenNav };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.header-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 23px;
|
|
&.mobile-nav {
|
|
background-color: $primary !important;
|
|
padding-block: 21px 15px;
|
|
}
|
|
& .header-container-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|