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;

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>

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%;

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>

pages/stories.vue

@@ -2,4 +2,6 @@
 useTitle("Stories");
 </script>
 
-<template></template>
+<template>
+  <main class="flex grow">hello</main>
+</template>