Add footer

2 files changed, 86 insertions, 3 deletions

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 {