added lesson 41 code

Shaun Pelling · Shaun Pelling · commit f77eb4d4c931 · 2017-04-03T17:41:36.000+01:00
diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        <app-header></app-header>
         <router-view></router-view>
     </div>
 </template>
@@ -8,11 +9,11 @@
 // Imports
 import showBlogs from './components/showBlogs.vue';
 import listBlogs from './components/listBlogs.vue';
+import header from './components/header.vue';
 
 export default {
     components: {
-        'show-blogs': showBlogs,
-        'list-blogs': listBlogs
+        'app-header': header
     },
     data () {
         return {
diff --git a/src/components/header.vue b/src/components/header.vue
@@ -0,0 +1,39 @@
+<template>
+    <nav>
+        <ul>
+            <li><router-link to="/" exact>Blog</router-link></li>
+            <li><router-link to="/add" exact>Add a new blog</router-link></li>
+        </ul>
+    </nav>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+ul{
+    list-style-type: none;
+    text-align: center;
+    margin: 0;
+}
+li{
+    display: inline-block;
+    margin: 0 10px;
+}
+a{
+    color: #fff;
+    text-decoration: none;
+    padding: 6px 8px;
+    border-radius: 10px;
+}
+nav{
+    background: #444;
+    padding: 14px 0;
+    margin-bottom: 40px;
+}
+.router-link-active{
+    background: #eee;
+    color: #444;
+}
+</style>
