Merge pull request #1 from pniedzwiedzinski/develop

Add navigation and files

11 files changed, 355 insertions, 10 deletions

diff --git a/src/App.vue b/src/App.vue
index ac76592..0497a35 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,27 +1,44 @@
 <template>
   <div id="app">
-    <h1>19 PDH Puszcza</h1>
-    <img alt="Work in progress" src="./assets/wip.png" />
-    <h3>Strona w trakcie budowy</h3>
+    <NavBar :routes="routes" :externalRoutes="externalRoutes" title="19 PDH Puszcza" />
+    <!-- logo="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: {}
+  components: { NavBar },
+  data() {
+    return {
+      routes,
+      externalRoutes: []
+    };
+  }
 };
 </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/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index f3d2503..0000000
--- a/src/assets/logo.png
+++ /dev/null
Binary files differdiff --git a/src/assets/wip.png b/src/assets/wip.png
deleted file mode 100644
index 945e984..0000000
--- a/src/assets/wip.png
+++ /dev/null
Binary files differdiff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
new file mode 100644
index 0000000..11503c7
--- /dev/null
+++ b/src/components/NavBar.vue
@@ -0,0 +1,204 @@
+<template>
+  <nav :class="navbarClass">
+    <div class="title">
+      <img v-if="logo" class="logo" :src="logo" alt="ZHR" />
+      <router-link :class="titleClass" to="/">{{ title }}</router-link>
+    </div>
+    <div class="space"></div>
+    <button @click="toggleMenu" class="menu-toggler">Menu</button>
+    <ul :class="linksClass" @click="toggleMenu">
+      <!-- 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>
+    </ul>
+  </nav>
+</template>
+
+<script>
+import NavLink from "./NavLink.vue";
+
+export default {
+  components: {
+    NavLink
+  },
+  props: {
+    routes: Array,
+    externalRoutes: Array,
+    title: String,
+    logo: String
+  },
+  computed: {
+    titleClass() {
+      if (this.logo) {
+        return "title-name margin";
+      }
+      return "title-name";
+    },
+    navbarClass() {
+      if (this.menuCollapsed) {
+        return "navbar";
+      }
+      return "navbar menu-open";
+    },
+    linksClass() {
+      if (this.menuCollapsed) {
+        return "links";
+      }
+      return "links show";
+    }
+  },
+  data: function() {
+    return {
+      menuCollapsed: true
+    };
+  },
+  methods: {
+    toggleMenu() {
+      this.menuCollapsed = !this.menuCollapsed;
+    },
+    linksClick() {
+      this.toggleMenu();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.navbar {
+  font-family: "Roboto Slab", serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #181818;
+
+  box-sizing: border-box;
+  width: 100vw;
+  height: 80px;
+
+  background: #ffffff;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+
+  padding: 0 200px 0 200px;
+
+  display: flex;
+  align-items: center;
+}
+
+.space {
+  flex: 1;
+}
+
+.title {
+  font-size: 30px;
+  flex-shrink: 0;
+
+  display: flex;
+}
+
+.title-name {
+  text-decoration: none;
+  color: #181818;
+  padding: 10px;
+}
+
+.title-name.margin {
+  margin-left: 120px;
+}
+
+.links {
+  display: flex;
+  flex-direction: row;
+  padding: 0;
+}
+
+.logo {
+  position: absolute;
+  top: 0;
+  z-index: 1;
+}
+
+.menu-toggler {
+  display: none;
+}
+
+@media (max-width: 1300px) {
+  .navbar {
+    padding: 0 50px 0 50px;
+  }
+}
+
+@media (max-width: 900px) {
+  .navbar.menu-open {
+    box-shadow: none;
+  }
+
+  .title {
+    font-size: 24px;
+  }
+
+  .links {
+    position: absolute;
+    /* width: 100vw; */
+
+    margin-top: 80px;
+
+    flex-direction: column;
+    display: none;
+  }
+
+  .menu-toggler {
+    display: block;
+  }
+
+  .links.show {
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
+    left: 0;
+    top: 0;
+
+    background: #fff;
+  }
+
+  .links.show li {
+    padding: 2vh;
+    font-size: 30px;
+  }
+}
+
+@media (max-width: 720px) {
+  .navbar {
+    margin-bottom: 40px;
+  }
+}
+
+@media (max-width: 500px) {
+  .navbar {
+    padding: 0 10px 0 10px;
+  }
+
+  .logo {
+    width: 85px;
+  }
+
+  .title-name {
+    font-size: 20px;
+  }
+
+  .title-name.margin {
+    margin-left: 80px;
+  }
+
+  .links.show {
+    height: calc(100% - 80px);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/NavLink.vue b/src/components/NavLink.vue
new file mode 100644
index 0000000..8915585
--- /dev/null
+++ b/src/components/NavLink.vue
@@ -0,0 +1,53 @@
+<template>
+  <li class="navlink">
+    <a v-if="external" class="link" target="_blank" rel="”noopener”" :href="link">{{ name }}</a>
+    <router-link v-else class="link" :to="link">{{ name }}</router-link>
+  </li>
+</template>
+
+<script>
+export default {
+  props: {
+    link: String,
+    name: String,
+    external: { type: Boolean, default: false }
+  }
+};
+</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;
+
+  margin: 10px;
+}
+
+.router-link-exact-active {
+  background-color: #ececec !important;
+}
+
+@media (max-width: 1300px) {
+  .navlink {
+    margin: 0;
+  }
+}
+</style>
\ 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..532747a
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,25 @@
+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";
+
+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, { path: "*", component: PageNotFoundView }]
+});
diff --git a/src/views/DownloadView.vue b/src/views/DownloadView.vue
new file mode 100644
index 0000000..dd6b507
--- /dev/null
+++ b/src/views/DownloadView.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="container">
+    <h1>Do pobrania</h1>
+    <a class="link" href="/files/Karta_próby_na_sprawność.pdf">Karta próby na sprawność</a>
+    <a class="link" href="/files/Próba_Harcerza.pdf">Próba Harcerza</a>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.link {
+  margin: 5px;
+}
+</style>
\ 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..1b73240
--- /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