Add footer

6 files changed, 125 insertions, 24 deletions

diff --git a/src/App.vue b/src/App.vue
index 0497a35..1016a3f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,22 +1,35 @@
 <template>
   <div id="app">
-    <NavBar :routes="routes" :externalRoutes="externalRoutes" title="19 PDH Puszcza" />
-    <!-- logo="assets/krajka-logo.svg" -->
-    <router-view></router-view>
+    <NavBar
+      :routes="routes"
+      :externalRoutes="externalRoutes"
+      title="19 PDH Puszcza"
+      logo="assets/krajka-logo.svg"
+    />
+    <router-view id="content"></router-view>
+    <Footer :routes="routes" :specialRoutes="specialRoutes" />
   </div>
 </template>
 
 <script>
 import NavBar from "./components/NavBar.vue";
+import Footer from "./components/Footer.vue";
+
 import { routes, externalRoutes } from "./router/index";
 
 export default {
   name: "app",
-  components: { NavBar },
+  components: { NavBar, Footer },
   data() {
     return {
       routes,
-      externalRoutes: []
+      externalRoutes: [],
+      specialRoutes: [
+        // {
+        //   name: 'Akcja "Ratujmy pszczoły"',
+        //   path: "/ratujmy-pszczoly"
+        // }
+      ]
     };
   }
 };
@@ -40,5 +53,10 @@ body {
 
   display: flex;
   flex-direction: column;
+  min-height: 100vh;
+}
+
+#content {
+  flex: 1;
 }
 </style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
new file mode 100644
index 0000000..3cf81a5
--- /dev/null
+++ b/src/components/Footer.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="footer">
+    <div class="map">
+      <div class="routes">
+        <router-link v-for="route in routes" :key="route.name" :to="route.path">{{route.name}}</router-link>
+      </div>
+      <div class="routes">
+        <router-link
+          v-for="route in specialRoutes"
+          :key="route.name"
+          :to="route.path"
+        >{{route.name}}</router-link>
+      </div>
+    </div>
+    <div class="space"></div>
+    <div>19 Poznańska Drużyna Harcerzy Puszcza</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    routes: Array,
+    specialRoutes: Array
+  }
+};
+</script>
+
+<style scoped>
+.footer {
+  background-color: #507b34;
+  color: #ffffff;
+  height: 175px;
+
+  display: flex;
+  flex-direction: row;
+
+  align-items: center;
+  justify-content: center;
+
+  padding: 0 15vw 0 15vw;
+}
+
+.map {
+  display: flex;
+  flex-direction: row;
+
+  text-align: left;
+
+  /* margin-right: 100px; */
+}
+
+.map a {
+  text-decoration: none;
+  color: #ffffff;
+  margin: 5px;
+}
+
+.routes {
+  display: flex;
+  flex-direction: column;
+}
+
+.space {
+  flex: 1;
+  max-width: 500px;
+}
+
+@media (max-width: 900px) {
+  .footer {
+    padding: 20px 10vw 20px 10vw;
+    flex-direction: column;
+
+    justify-content: center;
+  }
+
+  .map {
+    text-align: center;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 11503c7..28a48c3 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -87,10 +87,12 @@ export default {
 
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .space {
   flex: 1;
+  max-width: 500px;
 }
 
 .title {
@@ -107,7 +109,7 @@ export default {
 }
 
 .title-name.margin {
-  margin-left: 120px;
+  margin-left: 100px;
 }
 
 .links {
@@ -186,7 +188,7 @@ export default {
   }
 
   .logo {
-    width: 85px;
+    width: 65px;
   }
 
   .title-name {
@@ -194,7 +196,7 @@ export default {
   }
 
   .title-name.margin {
-    margin-left: 80px;
+    margin-left: 70px;
   }
 
   .links.show {
diff --git a/src/router/index.js b/src/router/index.js
index 532747a..e70642d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,25 +1,25 @@
-import VueRouter from "vue-router";
+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";
+import HomeView from '../views/HomeView';
+import AboutView from '../views/AboutView';
+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 }
+  { path: '/', name: 'Home', component: HomeView },
+  { path: '/o-nas', name: 'O nas', component: AboutView },
+  { path: '/download', name: 'Do pobrania', component: DownloadView }
 ];
 
 export const externalRoutes = [
   {
-    path: "https://kronika-puszcza.netlify.com",
-    name: "Kronika"
+    path: 'https://kronika-puszcza.netlify.com',
+    name: 'Kronika'
   },
-  { path: "https://kronika-puszcza.netlify.com/galeria", name: "Galeria" }
+  { path: 'https://kronika-puszcza.netlify.com/galeria', name: 'Galeria' }
 ];
 
 export const router = new VueRouter({
-  mode: "history",
-  routes: [...routes, { path: "*", component: PageNotFoundView }]
+  mode: 'history',
+  routes: [...routes, { path: '*', component: PageNotFoundView }]
 });
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
new file mode 100644
index 0000000..2455cec
--- /dev/null
+++ b/src/views/AboutView.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>O nas</h1>
+</template>
\ No newline at end of file
diff --git a/src/views/GalleryView.vue b/src/views/GalleryView.vue
deleted file mode 100644
index 3c296fe..0000000
--- a/src/views/GalleryView.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <h1>Galeria</h1>
-</template>
\ No newline at end of file