3 files changed, 55 insertions, 11 deletions
diff --git a/src/App.vue b/src/App.vue
index dae6356..083edd3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,16 +1,28 @@
 <template>
   <div id="app">
-    <NavBar />
+    <NavBar
+      :routes="routes"
+      :externalRoutes="externalRoutes"
+      title="19 PDH Puszcza"
+      logoPath="../assets/krajka-logo.svg"
+    />
     <router-view></router-view>
   </div>
 </template>
 
 <script>
 import NavBar from "./components/NavBar.vue";
+import { routes, externalRoutes } from "./router/index";
 
 export default {
   name: "app",
-  components: { NavBar }
+  components: { NavBar },
+  data() {
+    return {
+      routes,
+      externalRoutes
+    };
+  }
 };
 </script>
 
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index c48dced..0cae182 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,8 +1,8 @@
 <template>
   <nav class="navbar">
     <div class="title">
-      <img class="logo" src="../assets/krajka-logo.svg" />
-      <NavLink class="title-name" link="/" name="19 PDH Puszcza"></NavLink>
+      <img class="logo" :src="logoPath" />
+      <router-link class="title-name" to="/">{{ title }}</router-link>
     </div>
     <div class="space"></div>
     <button @click="toggleMenu" class="menu-toggler">Menu</button>
@@ -22,16 +22,19 @@
 
 <script>
 import NavLink from "./NavLink.vue";
-import { routes, externalRoutes } from "../router/index";
 
 export default {
   components: {
     NavLink
   },
+  props: {
+    routes: Array,
+    externalRoutes: Array,
+    title: String,
+    logoPath: String
+  },
   data: function() {
     return {
-      routes,
-      externalRoutes,
       menuCollapsed: true
     };
   },
@@ -72,6 +75,9 @@ export default {
 
 .title-name {
   margin-left: 120px;
+  text-decoration: none;
+  color: #181818;
+  padding: 10px;
 }
 
 .links {
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;