1 files changed, 30 insertions, 4 deletions
diff --git a/src/components/NavLink.vue b/src/components/NavLink.vue
index 5dbf609..7a9e8f8 100644
--- a/src/components/NavLink.vue
+++ b/src/components/NavLink.vue
@@ -1,7 +1,7 @@
 <template>
   <li class="navlink">
-    <a v-if="external" class="link" target="_blank" :href="link">{{name}}</a>
-    <router-link v-else class="link" :to="link">{{ name }}</router-link>
+    <a v-if="external" :class="linkClass" target="_blank" :href="link">{{ name }}</a>
+    <router-link v-else :class="linkClass" :to="link">{{ name }}</router-link>
   </li>
 </template>
 
@@ -10,24 +10,50 @@ export default {
   props: {
     link: String,
     name: String,
-    external: { type: Boolean, default: false }
+    external: { type: Boolean, default: false },
+    active: { type: Boolean, default: false }
+  },
+  computed: {
+    linkClass() {
+      if (this.active) {
+        return "link active";
+      }
+      return "link";
+    }
   }
 };
 </script>
 
 <style scoped>
+@import url("https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap");
+
 .link {
+  font-family: "Roboto Slab", serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
   text-decoration: none;
   color: #181818;
+
+  padding: 10px;
+
+  border-radius: 5px;
+}
+
+.link:hover {
+  background-color: #cfcfcf;
 }
 
 .navlink {
   list-style-type: none;
 
-  padding: 10px;
   margin: 10px;
 }
 
+.active {
+  background-color: #ececec !important;
+}
+
 @media (max-width: 1300px) {
   .navlink {
     margin: 0;