Add NavBar

4 files changed, 110 insertions, 19 deletions

diff --git a/src/App.vue b/src/App.vue
index b9c4497..dae6356 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,32 +1,36 @@
 <template>
   <div id="app">
-    <nav>
-      <NavLink link="/" name="Home"></NavLink>
-      <NavLink link="/gallery" name="Galeria"></NavLink>
-      <NavLink link="/download" name="Do pobrania"></NavLink>
-    </nav>
+    <NavBar />
     <router-view></router-view>
   </div>
 </template>
 
 <script>
-import NavLink from "./components/NavLink";
+import NavBar from "./components/NavBar.vue";
 
 export default {
   name: "app",
-  components: { NavLink }
+  components: { NavBar }
 };
 </script>
 
 <style>
 @import url("https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap");
 
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
 #app {
   font-family: "Roboto Slab", serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   color: #181818;
-  margin-top: 60px;
+  text-align: center;
+
+  display: flex;
+  flex-direction: column;
 }
 </style>
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
new file mode 100644
index 0000000..2486933
--- /dev/null
+++ b/src/components/NavBar.vue
@@ -0,0 +1,64 @@
+<template>
+  <nav class="navbar">
+    <div class="title">
+      <NavLink link="/" name="19 PDH Puszcza"></NavLink>
+    </div>
+    <div class="space"></div>
+    <div class="links">
+      <!-- Loop for generating links -->
+      <NavLink v-for="route in routes" :key="route.path" :link="route.path" :name="route.name"></NavLink>
+      <NavLink
+        v-for="route in externalRoutes"
+        :key="route.path"
+        :link="route.path"
+        :name="route.name"
+        :external="true"
+      ></NavLink>
+    </div>
+  </nav>
+</template>
+
+<script>
+import NavLink from "./NavLink.vue";
+import { routes, externalRoutes } from "../router/index";
+
+export default {
+  components: {
+    NavLink
+  },
+  data: function() {
+    return {
+      routes,
+      externalRoutes
+    };
+  }
+};
+</script>
+
+<style scoped>
+.navbar {
+  width: 100vw;
+  height: 80px;
+
+  background: #ffffff;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+
+  display: flex;
+  align-items: center;
+}
+
+.space {
+  flex: 1;
+}
+
+.title {
+  font-size: 30px;
+  margin-left: 200px;
+  flex-shrink: 0;
+}
+
+.links {
+  display: flex;
+  margin-right: 200px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/NavLink.vue b/src/components/NavLink.vue
index 6211333..7ad5088 100644
--- a/src/components/NavLink.vue
+++ b/src/components/NavLink.vue
@@ -1,6 +1,7 @@
 <template>
-  <li>
-    <router-link v-bind:to="link">{{ name }}</router-link>
+  <li class="navlink">
+    <a v-if="external" class="link" :href="link">{{name}}</a>
+    <router-link v-else class="link" :to="link">{{ name }}</router-link>
   </li>
 </template>
 
@@ -8,7 +9,22 @@
 export default {
   props: {
     link: String,
-    name: String
+    name: String,
+    external: { type: Boolean, default: false }
   }
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.link {
+  text-decoration: none;
+  color: #181818;
+}
+
+.navlink {
+  list-style-type: none;
+
+  padding: 10px;
+  margin: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 8322173..532747a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,14 +5,21 @@ import GalleryView from "../views/GalleryView";
 import DownloadView from "../views/DownloadView";
 import PageNotFoundView from "../views/PageNotFoundView";
 
-const routes = [
-  { path: "/", component: HomeView },
-  { path: "/gallery", component: GalleryView },
-  { path: "/download", component: DownloadView },
-  { path: "*", component: PageNotFoundView }
+export const routes = [
+  { path: "/", name: "Home", component: HomeView },
+  { path: "/o-nas", name: "O nas" },
+  { path: "/download", name: "Do pobrania", component: DownloadView }
+];
+
+export const externalRoutes = [
+  {
+    path: "https://kronika-puszcza.netlify.com",
+    name: "Kronika"
+  },
+  { path: "https://kronika-puszcza.netlify.com/galeria", name: "Galeria" }
 ];
 
 export const router = new VueRouter({
   mode: "history",
-  routes
+  routes: [...routes, { path: "*", component: PageNotFoundView }]
 });