Throw in a simple navbar

market-simulator/src/App.vue

@@ -4,19 +4,12 @@
 import HelloWorld from './components/HelloWorld.vue'
 import LoginExample from './components/LoginExample.vue'
 import Simulator from './components/Simulator.vue'
+import Header from './components/Header.vue'
 </script>
 
 <template>
+  <Header />
   <Simulator />
 </template>
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+<style></style>

market-simulator/src/components/Header.vue

@@ -0,0 +1,39 @@
+<template>
+  <nav
+    class="
+      relative
+      mx-auto
+      flex
+      items-center
+      justify-between
+      px-12
+      bg-blue-gray-700
+      h-16
+    "
+    aria-label="Global"
+  >
+    <div class="flex items-center flex-1">
+      <div class="flex items-center justify-between w-full md:w-auto">
+        <a href="#">
+          <span class="text-white font-mono">Mantic Markets</span>
+        </a>
+      </div>
+      <div class="space-x-8 md:flex md:ml-10">
+        <a
+          v-for="item in [
+            {
+              name: 'About',
+              href: 'https://mantic.notion.site/About-Mantic-Markets-09bdde9044614e62a27477b4b1bf77ea',
+            },
+            { name: 'Simulator', href: 'https://simulator.mantic.markets' },
+          ]"
+          :key="item.name"
+          :href="item.href"
+          class="text-base font-medium text-white hover:text-gray-300"
+        >
+          {{ item.name }}
+        </a>
+      </div>
+    </div>
+  </nav>
+</template>

market-simulator/src/components/Simulator.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-x-auto px-12">
+  <div class="overflow-x-auto px-12 mt-8">
     <!-- Two-column layout (on large screen sizes) -->
     <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
       <!-- Left column -->
@@ -125,6 +125,13 @@
 .clickable {
   cursor: pointer;
 }
+
+div {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+}
 </style>
 
 <script setup lang="ts">