From ecf33373c741c5b58b2399a2df75150bd7b63ee6 Mon Sep 17 00:00:00 2001
From: Arthur DANJOU <arthurdanjou@outlook.fr>
Date: Wed, 3 Nov 2021 18:02:15 +0100
Subject: [PATCH] Add scroller arrow

---
 src/components/Scroller.vue | 52 +++++++++++++++++++++++++++++++++++++
 src/layouts/default.vue     |  3 ++-
 2 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Scroller.vue

diff --git a/src/components/Scroller.vue b/src/components/Scroller.vue
new file mode 100644
index 0000000..3595100
--- /dev/null
+++ b/src/components/Scroller.vue
@@ -0,0 +1,52 @@
+<template>
+  <transition name="fade" mode="in-out">
+    <div
+      @click.prevent="scrollToTop"
+      data-blobity
+      data-blobity-radius="24"
+      data-blobity-magnetic="false"
+      class="z-index-5 fixed bottom-4 right-4 duration-300 hidden md:block"
+      v-show="scrollPosition > 150"
+    >
+      <ArrowUpIcon />
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import {defineComponent, onMounted, onUnmounted, ref, useRouter} from "@nuxtjs/composition-api";
+
+export default defineComponent({
+  name: "Scroller",
+  setup() {
+    const scrollPosition = ref(0)
+
+    const scrollToTop = () => {
+      window.scrollTo({top: 0, behavior: 'smooth'});
+    }
+
+    const updateScroll = () => {
+      scrollPosition.value = window.scrollY
+    }
+
+    onMounted(() => {
+      window.addEventListener('scroll', updateScroll);
+    })
+
+    onUnmounted(() => {
+      window.removeEventListener('scroll', updateScroll)
+    })
+
+    return {
+      scrollPosition,
+      scrollToTop
+    }
+  }
+})
+</script>
+
+<style lang="scss">
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index a155c80..1f254af 100755
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -14,6 +14,7 @@
         >
           <Announce />
           <Header />
+          <Scroller />
           <Nuxt class="pt-16 content"/>
           <Footer />
         </div>
@@ -45,7 +46,7 @@ export default {
       }, 500)
     }
 
-    const blobity = useBlobity(options)
+    useBlobity(options)
 
     return {
       opened: computed(() => store.state.opened),