From 94ca2a8a2aa94c5ce76a7778faf8399f6108b429 Mon Sep 17 00:00:00 2001
From: Alexander Daichendt <alexander.daichendt@tum.de>
Date: Tue, 26 Jul 2022 11:03:31 +0200
Subject: [PATCH] feat: moveup fab

---
 src/components/MoveUpButton.svelte | 38 ++++++++++++++++++++++++++++++
 modules.d.ts => src/modules.d.ts   |  0
 src/routes/__layout.svelte         |  2 ++
 3 files changed, 40 insertions(+)
 create mode 100644 src/components/MoveUpButton.svelte
 rename modules.d.ts => src/modules.d.ts (100%)

diff --git a/src/components/MoveUpButton.svelte b/src/components/MoveUpButton.svelte
new file mode 100644
index 0000000..9198846
--- /dev/null
+++ b/src/components/MoveUpButton.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { mdiChevronDoubleUp } from '@mdi/js';
+	import Icon from 'mdi-svelte';
+	let y: number = 0;
+
+	$: enabled = y > 100;
+
+	function onClick() {
+		window.scrollTo({ top: 0, behavior: 'smooth' });
+	}
+</script>
+
+<svelte:window bind:scrollY={y} />
+
+{#if enabled}
+	<button on:click={onClick}><Icon path={mdiChevronDoubleUp} /></button>
+{/if}
+
+<style>
+	button:focus {
+		box-shadow: 0 0 5px var(--special-shadow-color);
+	}
+	button {
+		border-radius: 35px;
+		width: 48px;
+		height: 48px;
+		position: fixed;
+		bottom: 32px;
+		right: 32px;
+		color: var(--text-soft-color);
+		border: 2px solid var(--border-color);
+		background-color: var(--light-color);
+	}
+	button:hover {
+		color: var(--special-color);
+		border: 4px solid var(--border-color);
+	}
+</style>
diff --git a/modules.d.ts b/src/modules.d.ts
similarity index 100%
rename from modules.d.ts
rename to src/modules.d.ts
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 656ed0b..7e22897 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -9,6 +9,7 @@
 	import Icon from 'mdi-svelte';
 	import '@fontsource/ubuntu-mono/400.css';
 	import Link from '../components/Link.svelte';
+	import MoveUpButton from '../components/MoveUpButton.svelte';
 
 	const NAV_ITEMS = [
 		{ href: '/blog', label: 'Blog' },
@@ -46,6 +47,7 @@
 		<slot />
 	</div>
 </div>
+<MoveUpButton />
 <footer>
 	<div class="container">
 		<p>Copyright <Icon path={mdiCopyright} size="1rem" /> {year} Alexander Daichendt</p>