Merge pull request #15 from thuongtruong1009/parent-main

add Footer and SideBar component

src/components/Footer.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="container">
+    <div class="decorate">
+      <img
+        src="https://media.giphy.com/media/26BREDkItN0Yy3i6Y/giphy.gif"
+        width="30px"
+        height="30px"
+        v-for="index in footerDecorates"
+        :key="index"
+      />
+    </div>
+    <p>View on: {{ this.time }}</p>
+  </div>
+</template>
+
+<script>
+import { eventBus } from "../main.js";
+export default {
+  data() {
+    return {
+      footerDecorates: Array(36),
+      time: "",
+    };
+  },
+  created() {
+    eventBus.$on("childSendTime", (transfer) => {
+      this.time = transfer;
+    });
+  },
+};
+</script>
+
+<style scoped>
+.container > p {
+  border-top-left-radius: 9px;
+  border-top-right-radius: 9px;
+  background: rgba(0, 0, 255, 0.192);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.decorate {
+  display: flex;
+  justify-content: center;
+}
+</style>

src/components/SideBar.vue

@@ -0,0 +1,27 @@
+<template>
+  <section>
+    <a :href="this.author"><img src="../assets/logo.png" /></a>
+  </section>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      author: "https://github.com/thuongtruong1009",
+    };
+  },
+};
+</script>
+
+<style scoped>
+section > a > img {
+  position: absolute;
+  width: 130px;
+  height: 130px;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  filter: hue-rotate(240deg);
+}
+</style>