From ef78861e1648f0b37a0232f7597015ed233eaf67 Mon Sep 17 00:00:00 2001
From: eggy <eggyrules@gmail.com>
Date: Wed, 10 Aug 2022 11:05:20 -0400
Subject: [PATCH] feat: make buttontotop selective

---
 components/ButtonToTop.vue | 9 ++++++++-
 components/Navbar.vue      | 2 ++
 layouts/default.vue        | 7 -------
 pages/index.vue            | 1 +
 pages/stories.vue          | 4 +++-
 5 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/components/ButtonToTop.vue b/components/ButtonToTop.vue
index 1336489..7d4a1c6 100644
--- a/components/ButtonToTop.vue
+++ b/components/ButtonToTop.vue
@@ -1,7 +1,14 @@
 <template>
-  <a href="#" class="go-top"></a>
+  <Teleport to="body"> <a href="#" class="go-top"></a></Teleport>
 </template>
 
+<style>
+body {
+  display: grid;
+  grid-template-columns: auto 0;
+}
+</style>
+
 <style scoped>
 .go-top {
   --offset: 20rem;
diff --git a/components/Navbar.vue b/components/Navbar.vue
index 2b2ef38..2e2c63e 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import ColourPicker from "./ColourPicker.vue";
 import { navItems } from "@/data/navItems";
+
+const props = defineProps<{ activeItem?: string }>();
 </script>
 
 <template>
diff --git a/layouts/default.vue b/layouts/default.vue
index b50b00f..c37d612 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -25,7 +25,6 @@ useHead({ title: "Eggworld" });
       </p>
     </footer>
   </div>
-  <ButtonToTop />
 </template>
 
 <style>
@@ -76,12 +75,6 @@ html.dark footer {
   --footer-drop-color: black;
 }
 
-div#__nuxt {
-  /* we need an element with only one child */
-  display: grid;
-  grid-template-columns: auto 0px;
-}
-
 @media screen and (max-width: 600px) {
   main {
     width: 90%;
diff --git a/pages/index.vue b/pages/index.vue
index 20fe5c6..20b3383 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,6 +6,7 @@ useTitle("Home");
 </script>
 
 <template>
+  <ButtonToTop />
   <main class="flex flex-col items-center justify-around gap-8">
     <h1>Welcome!</h1>
     <p>What are you here to see?</p>
diff --git a/pages/stories.vue b/pages/stories.vue
index 9e82df2..31b4c58 100644
--- a/pages/stories.vue
+++ b/pages/stories.vue
@@ -2,4 +2,6 @@
 useTitle("Stories");
 </script>
 
-<template></template>
+<template>
+  <main class="flex grow">hello</main>
+</template>