From a38c4fea3a2a352b2b46dc06a17aa4f23221112f Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Thu, 2 Dec 2021 15:43:50 -0600
Subject: [PATCH] Throw in a simple navbar

---
 market-simulator/src/App.vue                  | 13 ++-----
 market-simulator/src/components/Header.vue    | 39 +++++++++++++++++++
 market-simulator/src/components/Simulator.vue |  9 ++++-
 3 files changed, 50 insertions(+), 11 deletions(-)
 create mode 100644 market-simulator/src/components/Header.vue

diff --git a/market-simulator/src/App.vue b/market-simulator/src/App.vue
index 0d3a8040..c012a76d 100644
--- a/market-simulator/src/App.vue
+++ b/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>
diff --git a/market-simulator/src/components/Header.vue b/market-simulator/src/components/Header.vue
new file mode 100644
index 00000000..3579b7dc
--- /dev/null
+++ b/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>
diff --git a/market-simulator/src/components/Simulator.vue b/market-simulator/src/components/Simulator.vue
index 8d8ae021..db55a318 100644
--- a/market-simulator/src/components/Simulator.vue
+++ b/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">