interface for newsletter

assets/scss/_util.scss

@@ -0,0 +1,3 @@
+.subtle-box-shadow{
+  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
+}

assets/scss/styles.scss

@@ -1,6 +1,7 @@
 @import "vars";
 @import "animations";
 @import "transitions";
+@import "util";
 // Import Bulma and Buefy styles
 @import "~bulma";
 @import "~buefy/src/scss/buefy";

components/SubscribeForm.vue

@@ -0,0 +1,82 @@
+<template>
+  <article
+    :class="
+      `subscribe-form-wrapper message is-dark subtle-box-shadow ${
+        active ? 'active' : ''
+      }`
+    "
+  >
+    <div class="message-header">
+      <font-awesome-icon
+        :icon="active ? 'times' : 'envelope'"
+        :aria-label="active ? 'close' : 'open'"
+        class="close"
+        @click="toggle()"
+      />
+      <p>Subscribe to Our Newsletter</p>
+    </div>
+    <div class="message-body">
+      <div class="field has-addons">
+        <p class="control has-icons-left has-icons-right">
+          <input class="input" type="email" placeholder="Email" />
+          <span class="icon is-small is-left">
+            <font-awesome-icon icon="envelope" />
+            <i class="fas fa-envelope"></i>
+          </span>
+        </p>
+        <div class="control">
+          <a class="button is-primary">
+            Subscribe
+          </a>
+        </div>
+      </div>
+    </div>
+  </article>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      active: true
+    }
+  },
+  methods: {
+    toggle() {
+      this.active = !this.active
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.subscribe-form-wrapper {
+  position: fixed;
+  bottom: 20px;
+  right: 0;
+  width: 350px;
+  transform: translateX(calc(100% - 42px));
+  transition: 0.6s ease all;
+  .message-header {
+    justify-content: start;
+    .close {
+      margin-right: 16px;
+    }
+  }
+
+  .message-body {
+    height: 0;
+    transition: 0.4s ease all;
+    transition-delay: 0.6s;
+    overflow: hidden;
+    padding: 0;
+  }
+  &.active {
+    transform: translateX(0);
+    .message-body {
+      height: 80px;
+      padding: 20px;
+    }
+  }
+}
+</style>

components/search.vue

@@ -19,7 +19,7 @@
         @keyup.enter="search"
       />
 
-      <ul v-if="matches" class="search-results">
+      <ul v-if="matches" class="search-results subtle-box-shadow">
         <div v-if="matches.length">
           <li
             v-for="match in matches"
@@ -166,7 +166,6 @@ export default {
   top: 100%;
   right: 0;
   width: 250px;
-  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);
 }
 .match-snippet {
   font-size: 0.7em;

layouts/default.vue

@@ -2,6 +2,7 @@
   <div>
     <nav-bar />
     <nuxt />
+    <subscribe-form></subscribe-form>
     <site-footer></site-footer>
   </div>
 </template>
@@ -10,8 +11,9 @@
 import 'animate.css/animate.min.css'
 import NavBar from '~/components/navbar'
 import SiteFooter from '~/components/footer'
+import SubscribeForm from '~/components/SubscribeForm'
 export default {
-  components: { NavBar, SiteFooter },
+  components: { NavBar, SiteFooter, SubscribeForm },
   transition: 'slide-fade',
   data() {
     return {