From 16039cbc1158fd76a1ef0aa111616d3c6abdb8c0 Mon Sep 17 00:00:00 2001
From: viko16 <16viko@gmail.com>
Date: Mon, 29 Apr 2019 11:41:37 +0800
Subject: [PATCH] feat: add navbar support (close #1)

---
 components/NavBar.vue | 25 +++++++++++++++++++++++++
 layouts/Layout.vue    |  8 ++++++--
 styles/index.styl     | 12 ++++++++++--
 3 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 components/NavBar.vue

diff --git a/components/NavBar.vue b/components/NavBar.vue
new file mode 100644
index 0000000..4db24b2
--- /dev/null
+++ b/components/NavBar.vue
@@ -0,0 +1,25 @@
+<template>
+  <div
+    v-if="navbar"
+    class="navbar"
+  >
+    <a
+      v-for="(url, name) in navbar"
+      :key="name"
+      :href="url"
+      target="_blank"
+      class="navbar-item"
+      rel="noopener noreferrer"
+    >{{ name }}</a>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    navbar() {
+      return this.$themeConfig.navbar || null
+    }
+  }
+}
+</script>
diff --git a/layouts/Layout.vue b/layouts/Layout.vue
index eb73e02..8117804 100644
--- a/layouts/Layout.vue
+++ b/layouts/Layout.vue
@@ -4,13 +4,15 @@
       <router-link
         to="/"
         :title="$description"
+        class="site-name"
       >
         {{ $site.title }}
       </router-link>
       <div style="clear: both" />
+      <nav-bar />
     </header>
-    <HomePage v-if="isHome" />
-    <PostPage v-else />
+    <home-page v-if="isHome" />
+    <post-page v-else />
     <footer-bar />
   </div>
 </template>
@@ -19,12 +21,14 @@
 import HomePage from "../components/Home";
 import PostPage from "../components/Post";
 import FooterBar from '../components/FooterBar';
+import NavBar from '../components/NavBar';
 
 export default {
   components: {
     HomePage,
     PostPage,
     FooterBar,
+    NavBar,
   },
   computed: {
     isHome() {
diff --git a/styles/index.styl b/styles/index.styl
index bcfe428..cd6fafd 100644
--- a/styles/index.styl
+++ b/styles/index.styl
@@ -58,15 +58,23 @@ code
 // Shared
 // -----------------------------------------
 .header
-  margin 50px auto
+  margin 50px auto 40px
   text-align center
 
-  a
+  .site-name
     font-size fontSize + 2
     letter-spacing 5px
     text-transform uppercase
     color textColor
 
+  .navbar
+    margin 10px 10px 0
+
+  .navbar-item
+    margin-right 10px
+    color metaColor
+    text-decoration underline
+
 .searchbar-input
   display block
   margin 5px auto 0