Merge pull request #4 from jjs15102/navigationtransformation

added better nav, new bark logo in assets

src/App.vue

@@ -1,14 +1,17 @@
 <template>
   <div id="app">
-      <div class="col-md-3" > 
+      <div sm="3" class="col-md-4" > 
           <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>
+            <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 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 class="col-md-9">
+      <div id="othervues" sm="7" class="col-md-7" >
           <router-view/>
       </div>
   </div>
@@ -39,22 +42,40 @@ export default {
 <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;
-  display:flex;
-  flex-direction: column;
+  padding-left: 1.4em;
+  padding-top: 2em;
+  font-size: 22pt;
   a {
     font-weight: bold;
     color: #2c3e50;
     &.router-link-exact-active {
-      color: #0d5c9c;
+      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>

src/views/Home.vue

@@ -2,7 +2,7 @@
     <div class="motherfont">
         <h2>Compose a Bark</h2>
 
-         <img alt="Bark Logo" src="../assets/dog.png" width="200px">
+         <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 />

src/views/Login.vue

@@ -56,3 +56,9 @@ export default {
   }
 }
 </script>
+<style scoped lang="scss">
+template{
+  padding-top: 70px;
+}
+
+</style>