created footer

frontend/src/App.vue

@@ -1,14 +1,22 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link> |
-      <router-link :to="{name : 'Profile', params: {id:123}}">Profile</router-link>
-    </div>
+
     <router-view />
+   <Footer />
+
   </div>
 </template>
 
+
+<script>
+import Footer from './components/layout/Footer'
+export default {
+  name:"app",
+  components: {
+    Footer
+  }
+}
+</script>
 <style>
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

frontend/src/components/layout/Footer.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="footer">
+      <h3>Links</h3>
+      <u><router-link to="/">Home</router-link></u>
+      <br>
+      <u><router-link to="/about">About</router-link></u>
+    </div>
+</template>
+
+<script>
+export default {
+name: "Footer"
+}
+</script>
+
+<style scoped>
+.footer {
+  background: #333;
+  color: #fff;
+  text-align: center;
+  padding: 10px;
+}
+
+.footer a {
+  color: #fff;
+  padding-right: 5px;
+  text-decoration: none;
+}
+</style>