Added some structure, search bar

src/App.vue

@@ -5,7 +5,7 @@
             <b-nav vertical class="w-30">
             <b-nav-item> <img src="./assets/dogbark.png" alt="DogBark logo" width="100px"></b-nav-item>
             <b-nav-item>  <router-link to="/">Home</router-link> </b-nav-item>
-            <b-nav-item> <router-link to="/about">About</router-link></b-nav-item>
+            <b-nav-item> <router-link to="/profile">Profile</router-link></b-nav-item>
             <b-nav-item id="specialpad">  <router-link to="/login" v-if="!authenticated">Log in</router-link>
               <a href="#" v-if="authenticated" @click="$store.dispatch('signOut')">Log out</a> </b-nav-item>
             </b-nav>

src/router.js

@@ -7,7 +7,7 @@ import store from './store';
  * Don't forget to import your views here:
  */
 import Home from './views/Home.vue'
-import About from './views/About.vue'
+import Profile from './views/Profile.vue'
 import Login from './views/Login.vue'
 
 
@@ -29,9 +29,9 @@ const router = new Router({
     },    
 
     {
-      path: '/about',
-      name: 'about',
-      component: About
+      path: '/Profile',
+      name: 'Profile',
+      component: Profile
     }
   ]
 });

src/views/Home.vue

@@ -1,23 +1,27 @@
 <template>
     <div class="motherfont">
         <h2>Compose a Bark</h2>
+        <input type="text" v-model="search" placeholder="search barks"/>
+         <b-list-group-item class="d-flex align-items-center">
+        <b-avatar variant="info" src="https://placekitten.com/300/300" class="mr-3"></b-avatar>
+        <span class="mr-auto">
+             <form  v-if="!submitted">
+                <textarea type="text" placeholder="Write your Bark here..." v-model.lazy="bark.content" required />
+                <button @click.prevent="post" once>Add Bark</button>
+            </form></span>
+      </b-list-group-item>
+        <b-list-group-item class="d-flex align-items-center" v-for="(bark, index) in filteredallBarks" :key=index>
+        <b-avatar variant="info" src="" class="mr-3"></b-avatar>
+        <div class="mr-auto"> <p display="inline" > {{ bark.user.displayName }} | {{ bark.createdAt }}</p>
+
+            </div>
+            <br>
+        <div > 
+            <p>{{ bark.content }}</p>
+            </div>
+      </b-list-group-item>
+
 
-         <img alt="Bark Action" src="../assets/dog.png" width="200px">
-
-        <form v-if="!submitted">
-            <input type="text" placeholder="Write your Bark here..." v-model.lazy="bark.content" required />
-            <button @click.prevent="post" once>Add Bark</button>
-        </form>
-        <div v-if="submitted">
-            <h3>Thanks for adding your post</h3>
-        </div>
-        <div>
-                 <ul>
-                 <li v-for="(bark, index) in allBarks" :key=index>
-                    {{ bark.content }} by {{ bark.user.displayName }}
-                </li>
-                </ul>
-        </div>
     </div>
 </template>
 
@@ -27,9 +31,10 @@ export default {
     data () {
         return {
             bark: {
-                content: '',
+                content: '', 
             },
             allBarks: [],
+            search: '',
             submitted: false
         }
     },
@@ -64,7 +69,15 @@ export default {
     mounted(){
         this.getBarks();
 
-
+
+    },
+    computed: {
+        filteredallBarks: function(){
+            return this.allBarks.filter((bark) => {
+                return bark.content.match(this.search)
+
+            });
+        }
     }
 }
 
@@ -78,19 +91,17 @@ export default {
 </script>
 
 <style scoped>
-#add-blog *{
-    box-sizing: border-box;
-}
-#add-blog{
-    margin: 20px auto;
-    max-width: 500px;
-}
+
 label{
     display: block;
     margin: 20px 0 10px;
 }
 input[type="text"], textarea{
-    display: block;
-    width: 100%;
-    padding: 8px;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+        font-size: 15px;
+        outline: 0px;
+        padding: 10px 20px;
+}
+textarea{
+    width: 500px;
 }

src/views/Profile.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="Pofile">
+    <h1 class="motherfont">Profile</h1>
+    <b-button variant="outline-primary">Boot</b-button>
+    <div id="biohead">
+
+
+
+
+
+
+
+    </div>
+
+  </div>
+</template>