70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<template>
|
|
<q-header class="header-container transparent">
|
|
<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€"
|
|
class="remove-mobile"
|
|
/>
|
|
|
|
<div class="header-menu">
|
|
<div class="header-container-wrapper custom-container">
|
|
<RouterLink to="/">
|
|
<LogoWhite />
|
|
</RouterLink>
|
|
|
|
<nav-links />
|
|
|
|
<user-area />
|
|
</div>
|
|
</div>
|
|
</q-header>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue';
|
|
|
|
import { useMobileStore } from 'src/stores/mobileNav';
|
|
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-secondary',
|
|
components: { SendBanner, UserArea, NavLinks, LogoWhite },
|
|
setup() {
|
|
const mobileStore = useMobileStore();
|
|
const { handleResize } = mobileStore;
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
return;
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.header-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.header-menu {
|
|
background-color: $header;
|
|
}
|
|
|
|
& .header-container-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-block: 20px 30px;
|
|
}
|
|
|
|
@media only screen and (max-width: $med-md) {
|
|
& .header-container-wrapper {
|
|
padding-block: 21px 15px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|