src/App.vue

@@ -1,8 +1,58 @@
 <script setup lang="ts">
+
+import {ref} from "vue";
+
+const toolbar = ref<boolean>(false);
+const canGoForward = ref<boolean>(false);
+const canGoBack = ref<boolean>(false);
+
+function activateToolbar() {
+  toolbar.value = !toolbar.value;
+}
+
+function goBack() {
+  canGoBack.value = window.history.length <= 1;
+  history.back();
+}
+
+function goForward() {
+  canGoForward.value = window.history.length <= 1;
+  history.forward();
+}
+
 </script>
 
 <template>
   <div class="flex flex-col min-h-screen bg-var_background">
+
+    <div v-if="toolbar">
+      <div class="w-full py-small bg-ancient_highlight shadow-xl"></div>
+      <div class="w-full py-small bg-ancient_shadow"></div>
+      <div class="flex justify-center bg-ancient">
+        <div class="w-full max-w-screen-lg px-4">
+          <button @click="goBack" v-if="canGoBack">
+            <img  src="/public/Icons/toolbar/Back.avif" width="32px" height="32px" class="mx-2" alt="Ancient looking back button">
+          </button>
+
+          <button @click="goBack" v-if="!canGoBack" disabled>
+            <img src="/public/Icons/toolbar/Back_Gray.avif" width="32px" height="32px" class="mx-2" alt="Ancient looking back button">
+          </button>
+
+          <button @click="goForward" v-if="canGoForward">
+            <img src="/public/Icons/toolbar/Forward.avif" width="32px" height="32px" class="mx-2" alt="Ancient looking forward button">
+          </button>
+
+          <button @click="goForward" v-if="!canGoForward" disabled>
+            <img src="/public/Icons/toolbar/Forward_Gray.avif" width="32px" height="32px" class="mx-2" alt="Ancient looking forward button">
+          </button>
+
+          <button><img src="/public/Icons/toolbar/Refresh.avif" width="20px" height="32px" class="mx-2" alt="Ancient looking forward button"></button>
+        </div>
+      </div>
+      <div class="w-full py-small bg-ancient_highlight shadow-xl"></div>
+      <div class="w-full py-small bg-ancient_shadow"></div>
+    </div>
+
     <header class="flex justify-center">
       <nav class="pt-10 text-2xl flex place-items-center">
         <RouterLink class="mx-1" to="/">Home</RouterLink> |
@@ -20,7 +70,8 @@
     </main>
 
     <footer class="flex justify-center pt-10 mt-10 pb-2">
-      Author: Still under construction
+      <h5>Author: Still under construction</h5>
+      <button @click="activateToolbar">Time travel</button>
     </footer>
   </div>
 

src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import {createRouter, createWebHistory} from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 import './index.css'
 import './styles.css'
 import App from './App.vue'
@@ -27,8 +27,6 @@ const router = createRouter({
 
 
         {path: '/Lisp', name: 'Lisp', component: LispIndex}
-
-
     ]
 })
 

tailwind.config.js

@@ -10,6 +10,14 @@ export default {
   ],
   theme: {
     extend: {
+      colors: {
+        'ancient': '#d3d0c9',
+        'ancient_highlight': '#fcf8f5',
+        'ancient_shadow': '#bababa',
+      },
+      padding: {
+        'small': '0.075rem',
+      }
     },
   },
   plugins: [],