Add router

10 files changed, 130 insertions, 8 deletions

diff --git a/src/App.vue b/src/App.vue
index ac76592..b9c4497 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,20 @@
 <template>
   <div id="app">
-    <h1>19 PDH Puszcza</h1>
-    <img alt="Work in progress" src="./assets/wip.png" />
-    <h3>Strona w trakcie budowy</h3>
+    <nav>
+      <NavLink link="/" name="Home"></NavLink>
+      <NavLink link="/gallery" name="Galeria"></NavLink>
+      <NavLink link="/download" name="Do pobrania"></NavLink>
+    </nav>
+    <router-view></router-view>
   </div>
 </template>
 
 <script>
+import NavLink from "./components/NavLink";
+
 export default {
   name: "app",
-  components: {}
+  components: { NavLink }
 };
 </script>
 
diff --git a/src/assets/krajka-logo.svg b/src/assets/krajka-logo.svg
new file mode 100644
index 0000000..2111f90
--- /dev/null
+++ b/src/assets/krajka-logo.svg
@@ -0,0 +1,36 @@
+<svg width="103" height="141" viewBox="0 0 103 141" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="10" y="-7" width="83" height="138">
+<path d="M10 -7H93V131L51.5 105.909L10 131V-7Z" fill="#14008F"/>
+</mask>
+<g mask="url(#mask0)">
+<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="10" y="0" width="83" height="135">
+<rect x="10" width="82.6794" height="135" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask1)">
+<rect x="10" width="82.6794" height="135" fill="#14008F"/>
+<rect x="17.4711" width="7.9691" height="135" fill="#EAECFF"/>
+<rect x="77.2393" width="7.9691" height="135" fill="#EAECFF"/>
+<rect width="5.76759" height="49.0245" transform="matrix(0.610633 -0.791914 0.610633 0.791914 34.4053 -0.379913)" fill="#647AC9"/>
+<rect width="5.76759" height="49.0245" transform="matrix(0.610633 0.791914 -0.610633 0.791914 64.3032 -5.16748)" fill="#647AC9"/>
+<rect width="5.76759" height="49.0245" transform="matrix(0.610633 -0.791914 0.610633 0.791914 34.4053 34.5005)" fill="#647AC9"/>
+<rect width="5.76759" height="49.0245" transform="matrix(0.610633 0.791914 -0.610633 0.791914 64.3032 29.713)" fill="#647AC9"/>
+<rect width="5.76759" height="49.0245" transform="matrix(0.610633 -0.791914 0.610633 0.791914 34.4053 68.7349)" fill="#647AC9"/>
+<rect width="5.76759" height="49.0245" transform="matrix(0.610633 0.791914 -0.610633 0.791914 64.3032 63.9473)" fill="#647AC9"/>
+<rect width="5.76759" height="49.0245" transform="matrix(0.610633 -0.791914 0.610633 0.791914 34.4053 102.969)" fill="#647AC9"/>
+<rect width="5.76759" height="49.0245" transform="matrix(0.610633 0.791914 -0.610633 0.791914 64.3032 98.1818)" fill="#647AC9"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_d" x="0" y="-10" width="102.679" height="151" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0787499 0 0 0 0 0 0 0 0 0 0.5625 0 0 0 0.3 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/assets/krajka.svg b/src/assets/krajka.svg
new file mode 100644
index 0000000..b7def23
--- /dev/null
+++ b/src/assets/krajka.svg
@@ -0,0 +1,18 @@
+<svg width="336" height="548" viewBox="0 0 336 548" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="336" height="548">
+<rect width="335.493" height="547.797" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<rect width="335.493" height="547.797" fill="#14008F"/>
+<rect x="30.3157" width="32.3367" height="547.797" fill="#EAECFF"/>
+<rect x="272.84" width="32.3367" height="547.797" fill="#EAECFF"/>
+<rect width="23.4035" height="198.929" transform="matrix(0.610633 -0.791914 0.610633 0.791914 99.0309 -1.54169)" fill="#647AC9"/>
+<rect width="23.4035" height="198.929" transform="matrix(0.610633 0.791914 -0.610633 0.791914 220.349 -20.9684)" fill="#647AC9"/>
+<rect width="23.4035" height="198.929" transform="matrix(0.610633 -0.791914 0.610633 0.791914 99.0309 139.995)" fill="#647AC9"/>
+<rect width="23.4035" height="198.929" transform="matrix(0.610633 0.791914 -0.610633 0.791914 220.349 120.568)" fill="#647AC9"/>
+<rect width="23.4035" height="198.929" transform="matrix(0.610633 -0.791914 0.610633 0.791914 99.0309 278.909)" fill="#647AC9"/>
+<rect width="23.4035" height="198.929" transform="matrix(0.610633 0.791914 -0.610633 0.791914 220.349 259.483)" fill="#647AC9"/>
+<rect width="23.4035" height="198.929" transform="matrix(0.610633 -0.791914 0.610633 0.791914 99.0309 417.825)" fill="#647AC9"/>
+<rect width="23.4035" height="198.929" transform="matrix(0.610633 0.791914 -0.610633 0.791914 220.349 398.398)" fill="#647AC9"/>
+</g>
+</svg>
diff --git a/src/components/NavLink.vue b/src/components/NavLink.vue
new file mode 100644
index 0000000..6211333
--- /dev/null
+++ b/src/components/NavLink.vue
@@ -0,0 +1,14 @@
+<template>
+  <li>
+    <router-link v-bind:to="link">{{ name }}</router-link>
+  </li>
+</template>
+
+<script>
+export default {
+  props: {
+    link: String,
+    name: String
+  }
+};
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 63eb05f..aea7de4 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,14 @@
-import Vue from 'vue'
-import App from './App.vue'
+import Vue from "vue";
+import VueRouter from "vue-router";
 
-Vue.config.productionTip = false
+import { router } from "./router/index";
+import App from "./App.vue";
+
+Vue.use(VueRouter);
+
+Vue.config.productionTip = false;
 
 new Vue({
   render: h => h(App),
-}).$mount('#app')
+  router
+}).$mount("#app");
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..8322173
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,18 @@
+import VueRouter from "vue-router";
+
+import HomeView from "../views/HomeView";
+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 router = new VueRouter({
+  mode: "history",
+  routes
+});
diff --git a/src/views/DownloadView.vue b/src/views/DownloadView.vue
new file mode 100644
index 0000000..9bb3f4f
--- /dev/null
+++ b/src/views/DownloadView.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>Do pobrania</h1>
+</template>
\ No newline at end of file
diff --git a/src/views/GalleryView.vue b/src/views/GalleryView.vue
new file mode 100644
index 0000000..3c296fe
--- /dev/null
+++ b/src/views/GalleryView.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>Galeria</h1>
+</template>
\ No newline at end of file
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
new file mode 100644
index 0000000..1a6cc4b
--- /dev/null
+++ b/src/views/HomeView.vue
@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1>19 PDH Puszcza</h1>
+    <img alt="Work in progress" src="../assets/wip.png" />
+    <h3>Strona w trakcie budowy</h3>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HomeView"
+};
+</script>
\ No newline at end of file
diff --git a/src/views/PageNotFoundView.vue b/src/views/PageNotFoundView.vue
new file mode 100644
index 0000000..3292f65
--- /dev/null
+++ b/src/views/PageNotFoundView.vue
@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>404</h1>
+    <p>Nie znaleziono strony</p>
+  </div>
+</template>
\ No newline at end of file