122 lines
2.9 KiB
Vue
122 lines
2.9 KiB
Vue
<template>
|
|
<div class="mobile-nav-container" :class="!isOpenNav && 'hide'">
|
|
<header class="mobile-nav-links">
|
|
<RouterLink @click="closeNav" class="mobile-link" to="/categoria/ramos"
|
|
>Ramos</RouterLink
|
|
>
|
|
<RouterLink @click="closeNav" class="mobile-link" to="/categoria/plantas">
|
|
Plantas
|
|
</RouterLink>
|
|
<RouterLink @click="closeNav" class="mobile-link" to="/"
|
|
>Floranet</RouterLink
|
|
>
|
|
<RouterLink @click="closeNav" class="mobile-link" to="/">FAQs</RouterLink>
|
|
<RouterLink @click="closeNav" class="mobile-link" to="/"
|
|
>Contacta</RouterLink
|
|
>
|
|
</header>
|
|
|
|
<div class="mobile-nav-lang">
|
|
<p class="mobile-lang-paragraph">Idioma</p>
|
|
<select class="mobile-lang-select" name="lang">
|
|
<option value="">Español</option>
|
|
</select>
|
|
</div>
|
|
|
|
<footer class="mobile-nav-footer">
|
|
<RouterLink to="/" class="btn outlined rounded sm-btn">
|
|
¿Tienes dudas? hablemos <IconChatRoundedFill />
|
|
</RouterLink>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
import { useMobileStore } from 'src/stores/mobileNav';
|
|
|
|
import { storeToRefs } from 'pinia';
|
|
import { defineComponent, watch } from 'vue';
|
|
import IconChatRoundedFill from '../icons/IconChatRoundedFill.vue';
|
|
|
|
export default defineComponent({
|
|
name: 'mobile-nav',
|
|
components: { IconChatRoundedFill },
|
|
setup() {
|
|
const mobileStore = useMobileStore();
|
|
const { isOpenNav } = storeToRefs(mobileStore);
|
|
|
|
function setBodyStyle(overflow) {
|
|
document.body.style.overflow = overflow;
|
|
}
|
|
|
|
function closeNav() {
|
|
isOpenNav.value = false;
|
|
console.log('foi click');
|
|
}
|
|
|
|
watch(isOpenNav, (newValue) => {
|
|
if (newValue) {
|
|
setBodyStyle('hidden');
|
|
window.scrollTo(0, 0);
|
|
return;
|
|
}
|
|
setBodyStyle('visible');
|
|
});
|
|
|
|
return { isOpenNav, closeNav };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.mobile-nav-container {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 10;
|
|
width: 100%;
|
|
height: calc(100dvh - 66px);
|
|
margin-top: 66px;
|
|
background-color: $white;
|
|
padding: 35px 44px 16px;
|
|
|
|
& .mobile-nav-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: 70px;
|
|
& .mobile-link {
|
|
color: $text-muted;
|
|
font-family: $font-roboto;
|
|
line-height: 40px;
|
|
&:not(:last-child) {
|
|
border-bottom: 1px solid $primary-light;
|
|
}
|
|
}
|
|
}
|
|
& .mobile-nav-lang {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 28px;
|
|
margin-bottom: 42px;
|
|
& .mobile-lang-paragraph {
|
|
color: $text-muted;
|
|
}
|
|
|
|
& .mobile-lang-select {
|
|
all: unset;
|
|
padding: 2px;
|
|
border-radius: 4px;
|
|
-moz-appearance: none;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
&:focus-visible {
|
|
outline: 2px solid $primary-light;
|
|
}
|
|
}
|
|
}
|
|
& .mobile-nav-footer {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|