feat: create scroll to top button

components/layout/navigation/sidenav/SideNavToggler.vue

@@ -3,7 +3,7 @@
 		aria-label="Toggle the menu"
 		class="focus-visible:focus-util flex h-12 w-12 items-center justify-center rounded-full border-0 bg-gradient-to-b from-primary-400 to-accent-400 p-4 shadow md:h-16 md:w-16"
 		title="Menu"
-		type="menu"
+		type="button"
 		@click="toggleSideNav"
 	>
 		<span class="sr-only">Toggle the menu</span>

components/pages/posts/navigation/page/ScrollTopButton.vue

@@ -0,0 +1,53 @@
+<template>
+	<transition name="page">
+		<button
+			v-if="visible"
+			aria-label="Go to the top of the page"
+			class="border-util focus-visible:focus-util fixed bottom-6 right-6 z-10 rounded-full bg-darkGray-500 p-3 shadow-xl"
+			type="button"
+			@click="scrollToTop"
+		>
+			<ArrowUpIcon class="icon h-6 w-6" />
+		</button>
+	</transition>
+</template>
+
+<script>
+import { ArrowUpIcon } from 'vue-feather-icons'
+
+export default {
+	components: {
+		ArrowUpIcon
+	},
+
+	data() {
+		return {
+			visible: false,
+			previousY: 0
+		}
+	},
+
+	mounted() {
+		document.addEventListener('scroll', this.onScroll, { passive: true })
+	},
+
+	beforeDestroy() {
+		document.removeEventListener('scroll', this.onScroll)
+	},
+
+	methods: {
+		onScroll() {
+			const currentY = window.scrollY
+
+			this.visible =
+				(currentY < this.previousY && currentY > 0) || window.innerHeight + currentY >= document.body.scrollHeight
+
+			this.previousY = currentY
+		},
+
+		scrollToTop() {
+			window.scrollTo(0, 0)
+		}
+	}
+}
+</script>

pages/index.vue

@@ -16,6 +16,10 @@
 			</SearchWrapper>
 		</portal>
 
+		<portal to="body">
+			<ScrollTopButton />
+		</portal>
+
 		<!-- Top menu -->
 		<nav class="flex flex-row items-center justify-between py-4">
 			<DomainSelector

pages/premium/saved-posts.vue

@@ -16,6 +16,10 @@
 			</SearchWrapper>
 		</portal>
 
+		<portal to="body">
+			<ScrollTopButton />
+		</portal>
+
 		<ContentSeparator title="Saved posts" />
 
 		<nav class="flex flex-row items-center justify-between py-4">