84 lines
1.5 KiB
Vue
84 lines
1.5 KiB
Vue
<script>
|
|
import feather from "feather-icons";
|
|
import {mapState} from "vuex";
|
|
|
|
import SocialButton from "@/components/SocialButton.vue";
|
|
|
|
export default {
|
|
components: {SocialButton},
|
|
|
|
data() {
|
|
return {
|
|
userScrollPosition: 0,
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
...mapState(["socialProfiles"]),
|
|
|
|
isScrolled() {
|
|
return this.userScrollPosition > 200;
|
|
},
|
|
},
|
|
|
|
mounted() {
|
|
window.addEventListener("scroll", this.updateScrollPosition);
|
|
feather.replace();
|
|
},
|
|
|
|
updated() {
|
|
feather.replace();
|
|
},
|
|
|
|
beforeDestroy() {
|
|
window.removeEventListener("scroll", this.updateScrollPosition);
|
|
},
|
|
|
|
methods: {
|
|
updateScrollPosition() {
|
|
this.userScrollPosition = window.scrollY;
|
|
},
|
|
|
|
backToTop() {
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<transition name="fade">
|
|
<div
|
|
v-show="isScrolled"
|
|
class="
|
|
flex
|
|
flex-col
|
|
sm:space-y-2
|
|
mr-4
|
|
sm:mr-8
|
|
xl:mr-16
|
|
mb-6
|
|
right-0
|
|
bottom-0
|
|
z-50
|
|
fixed
|
|
items-center
|
|
">
|
|
<SocialButton class="mb-4" feather-icon="chevron-up" @click.native="backToTop()"/>
|
|
<SocialButton v-for="social in socialProfiles"
|
|
:key="social.id"
|
|
:feather-icon="social.icon"
|
|
:url="social.url"
|
|
class="hidden lg:block"
|
|
/>
|
|
</div>
|
|
</transition>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
|
|
</style>
|