init Alert

src/components/custom/Alert.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="alert-banner w-full fixed left-0">
+    <input
+      type="checkbox"
+      class="hidden"
+      id="banneralert"
+      v-model="bannerChecked"
+      @click="linkCopied"
+    />
+
+    <label
+      class="
+        close
+        cursor-pointer
+        flex
+        items-center
+        justify-between
+        w-full
+        p-2
+        bg-gray-500
+        shadow
+        text-white
+      "
+      title="close"
+      for="banneralert"
+    >
+      Link Copied!
+
+      <svg
+        class="fill-current text-white"
+        xmlns="http://www.w3.org/2000/svg"
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+      >
+        <path
+          d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"
+        ></path>
+      </svg>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      bannerChecked: false,
+    };
+  },
+  methods: {
+    linkCopied() {
+      this.$emit("clicked", this.bannerChecked);
+    },
+  },
+};
+</script>
+  <style scoped>
+/*Banner open/load animation*/
+.alert-banner {
+  -webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  top: 75px;
+}
+
+/*Banner close animation*/
+.alert-banner input:checked ~ * {
+  -webkit-animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53)
+    both;
+  animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
+}
+
+@-webkit-keyframes slide-in-top {
+  0% {
+    -webkit-transform: translateY(-1000px);
+    transform: translateY(-1000px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slide-in-top {
+  0% {
+    -webkit-transform: translateY(-1000px);
+    transform: translateY(-1000px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes slide-out-top {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(-1000px);
+    transform: translateY(-1000px);
+    opacity: 0;
+  }
+}
+@keyframes slide-out-top {
+  0% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateY(-1000px);
+    transform: translateY(-1000px);
+    opacity: 0;
+  }
+}
+</style>

src/templates/BlogPost.vue

@@ -2,6 +2,7 @@
   <Layout :hideHeader="true" :disableScroll="true">
     <div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-20 px-4">
       <div class="pt-8">
+        <Alert v-if="showAlert" @clicked="linkCopied" />
         <section class="post-header container mx-auto px-0 mb-4 border-b">
           <h1 class="text-5xl font-medium leading-none mt-0">
             {{ $page.blog.title }}
@@ -211,10 +212,16 @@
 
 <script>
 import PostListItem from "~/components/custom/Cards/PostListItem.vue";
-
+import Alert from "~/components/custom/Alert.vue";
 export default {
   components: {
     PostListItem,
+    Alert,
+  },
+  data() {
+    return {
+      showAlert: false,
+    };
   },
   methods: {
     copyLink() {
@@ -224,6 +231,10 @@ export default {
       el.select();
       document.execCommand("copy");
       document.body.removeChild(el);
+      this.showAlert = true;
+    },
+    linkCopied(val) {
+      this.showAlert = val;
     },
   },
   metaInfo() {