Merge pull request #516 from monarch-initiative/banner

add banner pointing to new site

src/App.vue

@@ -1,5 +1,11 @@
 <template>
   <div id="app" class="page-wrapper">
+    <monarch-banner
+      >This site will soon be replaced by a
+      <a href="https://next.monarchinitiative.org/" target="_blank"
+        >new version</a
+      >, re-built and re-imagined. Check it out!</monarch-banner
+    >
     <monarch-navbar />
     <div class="content-wrapper">
       <router-view />
@@ -15,6 +21,7 @@ import Vue from "vue";
 import { sanitizeText } from "@/lib/utils";
 import Navbar from "@/components/Navbar.vue";
 import Footer from "@/components/Footer.vue";
+import Banner from "./components/Banner.vue";
 
 Vue.prototype.$sanitizeText = sanitizeText;
 
@@ -23,6 +30,7 @@ export default {
   name: "App",
   components: {
     "monarch-navbar": Navbar,
+    "monarch-banner": Banner,
   },
   data() {
     return {

src/components/Banner.vue

@@ -0,0 +1,35 @@
+<template>
+  <aside v-if="open" class="banner">
+    <div>
+      <slot />
+    </div>
+    <button class="banner-button" @click="open = false">Close</button>
+  </aside>
+</template>
+
+<script>
+export default {
+  data() {
+    return { open: true };
+  },
+};
+</script>
+
+<style lang="scss">
+.banner {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  gap: 20px;
+  background: hsl(185, 75%, 80%);
+  text-align: center;
+}
+
+.banner-button {
+  background: #00000020;
+  border: none;
+}
+</style>