bpd01001 · jjs15102 · Apr 12, 2020 · Apr 26, 2020 · Apr 26, 2020 · Apr 26, 2020
diff --git a/.env b/.env
@@ -1,7 +1,7 @@
-VUE_APP_API_KEY="AIzaSyBi03NBONZ2ncp4PSvjbAplWm6pC5XnjTw"
-VUE_APP_AUTH_DOMAIN="dmd-4470.firebaseapp.com"
-VUE_APP_DATABASE_URL="https://dmd-4470.firebaseio.com"
-VUE_APP_PROJECT_ID="dmd-4470"
-VUE_APP_STORAGE_BUCKET="dmd-4470.appspot.com"
-VUE_APP_MESSAGE_SENDER_ID="159373794744"
-VUE_APP_APP_ID="1:159373794744:web:ca93db7d63c296b472834d"
+VUE_APP_API_KEY="AIzaSyCpmOxx4oge2EIn1VJ6bPECvyfBsyTdTjk"
+VUE_APP_AUTH_DOMAIN="dmd4470-50f92.firebaseapp.com"
+VUE_APP_DATABASE_URL="https://dmd4470-50f92.firebaseio.com"
+VUE_APP_PROJECT_ID="dmd4470-50f92"
+VUE_APP_STORAGE_BUCKET="dmd4470-50f92.appspot.com"
+VUE_APP_MESSAGE_SENDER_ID="855212958962"
+VUE_APP_APP_ID="1:855212958962:web:e183ab5246ec3a27271c6b"
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,10 +7,16 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "bootstrap": "^4.4.1",
+    "bootstrap-vue": "^2.13.0",
     "core-js": "^3.6.4",
-    "firebase": "^7.13.1",
+    "firebase": "^7.14.2",
     "firebaseui": "^4.5.0",
+    "jquery": "^3.5.0",
+    "moment": "^2.25.3",
+    "popper.js": "^1.16.1",
     "vue": "^2.6.11",
+    "vue-resource": "^1.5.1",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
   },

diff --git a/public/index.html b/public/index.html
@@ -5,12 +5,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link href="https://fonts.googleapis.com/css?family=Vollkorn:400,400i,700,900&display=swap" rel="stylesheet">
     <title>web-three-twitter-boilerplate</title>
   </head>
   <body>
-    <noscript>
-      <strong>We're sorry but web-three-twitter-boilerplate doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
+ <script src="main.js"></script>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>

diff --git a/src/App.vue b/src/App.vue
@@ -1,16 +1,30 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link> |
-      <router-link to="/login" v-if="!authenticated">Log in</router-link>
-      <a href="#" v-if="authenticated" @click="$store.dispatch('signOut')">Log out</a>
-    </div>
-    <router-view/>
+      <div sm="3" class="col-md-4" > 
+          <div id="nav">
+            <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="/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>
+          </div>
+      </div>
+      <div id="othervues" sm="7" class="col-md-7" >
+          <router-view/>
+      </div>
   </div>
+
+
 </template>
 
 <script>
+import Vue from 'vue'
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
+Vue.use(BootstrapVue)
+Vue.use(IconsPlugin)
+
 
 export default {
   name: 'app',
@@ -26,21 +40,42 @@ export default {
 </script>
 
 <style lang="scss">
+
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  display: flex;
+
 }
 #nav {
-  padding: 30px;
+  padding-left: 1.4em;
+  padding-top: 2em;
+  font-size: 22pt;
   a {
     font-weight: bold;
     color: #2c3e50;
     &.router-link-exact-active {
-      color: #42b983;
+      color: #db4337;
     }
+
   }
+  border-right: 2px grey solid;
+  height: 100vh;
 }
+a.nav-link {
+  padding-bottom: 40px;
+}
+ #specialpad{
+  padding-top: 40vh;
+   }
+router-view {
+  padding-top: 70px;
+}
+#othervues{
+  padding-top: 70px;
+}
+
 </style>
diff --git a/src/assets/app.scss b/src/assets/app.scss
@@ -0,0 +1,7 @@
+@import 'node_modules/bootstrap/scss/bootstrap';
+@import 'node_modules/bootstrap-vue/src/index.scss';
+
+
+.motherfont {
+    font-family: 'Vollkorn', serif;
+}
diff --git a/src/assets/barkbutton.png b/src/assets/barkbutton.png
diff --git a/src/assets/barksend-03.png b/src/assets/barksend-03.png
diff --git a/src/assets/dog.png b/src/assets/dog.png
diff --git a/src/assets/dogbark.png b/src/assets/dogbark.png
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/main.js b/src/main.js
@@ -1,10 +1,17 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import store from './store';
 
-import firebase from '@/plugins/firebase-init'
-import ui from '@/plugins/firebaseui-init'
+import VueResource from'vue-resource'
+Vue.use(VueResource);
+
+import firebase from '@/plugins/firebase-init';
+import ui from '@/plugins/firebaseui-init';
+
+import 'bootstrap';
+import './assets/app.scss';
+import 'moment';
 
 Vue.config.productionTip = false;
 

diff --git a/src/router.js b/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
     }
   ]
 });

diff --git a/src/sample.js b/src/sample.js
@@ -0,0 +1,35 @@
+const store = {
+    data: {
+        search: '',
+        feed: [
+            {
+                body: 'My parents fumbled the bag by not moving to UK. I should be shouting innit left and right but instead I’m shouting litt',
+                date: '1m',
+                author: 'Franz Kafka',
+                avatar: '/assets/barksend-03.png'
+            },
+            {
+                body: 'See how one chef is passing out meals to those who need them.',
+                date: '2m',
+                author: 'Naguib Mahfouz',
+                avatar: '/assets/barksend-03.png'
+            },
+            {
+                body: 'Trumbull superintendent Iassogna presents budget cut list; includes freshman sports.',
+                date: '6m',
+                author: 'Vladimir Nabokov',
+                avatar: '/assets/barksend-03.png'
+            },
+            {
+                body: 'Many years later, as he faced the firing squad, Colonel Aureliano Buendía was to remember that distant afternoon when his father took him to discover ice.',
+                date: '11m',
+                author: 'Gabriel Garcia Marquez',
+                avatar: '/assets/barksend-03.png'
+            }
+        ]
+    },
+
+    addBarkAction (bark) {
+        this.data.feed.unshift(bark);
+    }
+}
diff --git a/src/views/About.vue b/src/views/About.vue