102 lines
1.8 KiB
Vue
102 lines
1.8 KiB
Vue
<script>
|
||
import {mapState} from "vuex";
|
||
|
||
export default {
|
||
props: ["toggleModal", "modal"],
|
||
|
||
data: function () {
|
||
return {
|
||
linkStyle: "block text-left text-xl " +
|
||
"text-white " +
|
||
"hover:text-accent transition-colors duration-400 " +
|
||
"sm:mx-3 md:mx-4 sm:pt-2 mb-2"
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
...mapState(["socialProfiles"]),
|
||
|
||
isMobileMenuOpened() {
|
||
return this.$store.state.isMobileMenuOpened
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
onMobileMenuLinkClick() {
|
||
this.$store.commit('toggleMobileMenu', false)
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<!-- App header navigation links -->
|
||
<div
|
||
:class="isMobileMenuOpened ? 'block' : 'hidden'"
|
||
class="
|
||
font-general-regular
|
||
|
||
m-0
|
||
mt-5
|
||
p-5
|
||
py-12
|
||
|
||
backdrop-blur-lg
|
||
justify-center
|
||
items-center
|
||
animate-slide-down-fast
|
||
|
||
sm:backdrop-filter-none
|
||
sm:animate-none
|
||
sm:mt-0
|
||
sm:flex
|
||
sm:p-0
|
||
"
|
||
>
|
||
<NuxtLink
|
||
:to="{path: '/', hash: '#portfolio'}"
|
||
:class="linkStyle"
|
||
aria-label="Portfolio"
|
||
@click.native="onMobileMenuLinkClick"
|
||
>
|
||
Портфолио
|
||
</NuxtLink>
|
||
|
||
<NuxtLink
|
||
:to="{path: '/', hash: '#about'}"
|
||
:class="linkStyle"
|
||
class="
|
||
border-t-2
|
||
pt-3
|
||
sm:pt-2 sm:border-t-0
|
||
border-primary-light
|
||
|
||
"
|
||
aria-label="About Me"
|
||
@click.native="onMobileMenuLinkClick"
|
||
>
|
||
Обо мне
|
||
</NuxtLink>
|
||
|
||
<NuxtLink
|
||
:to="{path: '/', hash: '#contact'}"
|
||
:class="linkStyle"
|
||
class="
|
||
border-t-2
|
||
pt-3
|
||
sm:pt-2 sm:border-t-0
|
||
border-primary-light
|
||
|
||
"
|
||
aria-label="Contact"
|
||
@click.native="onMobileMenuLinkClick"
|
||
>
|
||
Контакты
|
||
</NuxtLink>
|
||
</div>
|
||
</template>
|
||
|
||
<style>
|
||
|
||
</style>
|