From e1355108521ac24f96d5cdb3069ba6e7f7b25e08 Mon Sep 17 00:00:00 2001
From: Julien Rousseau <julrousseau20@gmail.com>
Date: Thu, 30 Jan 2025 14:35:15 -0500
Subject: [PATCH] added back to top arrow

---
 packages/web/src/components/TopArrow.astro | 29 ++++++++++++++++++++++
 packages/web/src/layouts/Layout.astro      |  2 ++
 2 files changed, 31 insertions(+)
 create mode 100644 packages/web/src/components/TopArrow.astro
diff --git a/packages/web/src/components/TopArrow.astro b/packages/web/src/components/TopArrow.astro
new file mode 100644
index 0000000..2cb6041
--- /dev/null
+++ b/packages/web/src/components/TopArrow.astro
@@ -0,0 +1,29 @@
+<a
+  href="#"
+  id="back-to-top"
+  title="Retour en haut"
+  class="fixed flex items-center justify-center w-10 h-10 bottom-6 right-6 group/back-to-top opacity-0 invisible data-[show=true]:visible data-[show=true]:opacity-100 transition-all select-none"
+  data-show="false"
+>
+  <div class="absolute w-full h-full bg-black rounded-full opacity-80"></div>
+  <span
+    class="text-4xl text-slate-100 z-10 group-hover/back-to-top:-translate-y-1 transition-all material-symbols-outlined"
+  >
+    keyboard_arrow_up
+  </span>
+</a>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const arrow = document.getElementById("back-to-top")!;
+
+    arrow.addEventListener("click", function (e) {
+      e.preventDefault();
+      window.scrollTo({ top: 0, behavior: "smooth" });
+    });
+
+    window.addEventListener("scroll", function () {
+      arrow.dataset.show = (window.scrollY >= 200).toString();
+    });
+  });
+</script>
diff --git a/packages/web/src/layouts/Layout.astro b/packages/web/src/layouts/Layout.astro
index 8eefaae..1e15447 100644
--- a/packages/web/src/layouts/Layout.astro
+++ b/packages/web/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
+import TopArrow from "../components/TopArrow.astro";
 ---
 
 <!doctype html>
@@ -39,6 +40,7 @@ import Footer from "../components/Footer.astro";
       <slot />
     </main>
     <Footer />
+    <TopArrow />
   </body>
 </html>
 
