From 0185c0656f884acd2dc333bef8c6d25d7532501c Mon Sep 17 00:00:00 2001
From: Vincent Rubinetti <vince.rubinetti@gmail.com>
Date: Wed, 30 Aug 2023 11:26:03 -0600
Subject: [PATCH] add banner pointing to new site

---
 src/App.vue               |  8 ++++++++
 src/components/Banner.vue | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 src/components/Banner.vue

diff --git a/src/App.vue b/src/App.vue
index af45a97f..a5ebdbfb 100644
--- a/src/App.vue
+++ b/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 {
diff --git a/src/components/Banner.vue b/src/components/Banner.vue
new file mode 100644
index 00000000..71067637
--- /dev/null
+++ b/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>