Update footer

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0-alpha",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.36",
+        "@fortawesome/free-brands-svg-icons": "^5.15.4",
         "@fortawesome/free-solid-svg-icons": "^5.15.4",
         "@fortawesome/vue-fontawesome": "^2.0.2",
         "bootstrap": "^5.0.2",
@@ -1648,6 +1649,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/@fortawesome/free-solid-svg-icons": {
       "version": "5.15.4",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",
@@ -19024,6 +19037,14 @@
         "@fortawesome/fontawesome-common-types": "^0.2.36"
       }
     },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.15.4",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.4.tgz",
+      "integrity": "sha512-f1witbwycL9cTENJegcmcZRYyawAFbm8+c6IirLmwbbpqz46wyjbQYLuxOc7weXFXfB7QR8/Vd2u5R3q6JYD9g==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.36"
+      }
+    },
     "@fortawesome/free-solid-svg-icons": {
       "version": "5.15.4",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
+    "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^2.0.2",
     "bootstrap": "^5.0.2",

src/App.vue

@@ -2,6 +2,7 @@
   <div id="app">
     <SiteHeader />
     <router-view />
+    <Footer />
   </div>
 </template>
 
@@ -15,12 +16,14 @@
 </style>
 
 <script>
-import SiteHeader from '@/components/SiteHeader'
+import SiteHeader from './components/SiteHeader'
+import Footer from './components/Footer'
 
 export default {
   name: 'App',
   components: {
-    SiteHeader
+    SiteHeader,
+    Footer
   }
 }
 </script>

src/components/Footer.vue

@@ -0,0 +1,98 @@
+<template>
+  <footer class="footer">
+    <div class="container">
+      <div class="logo">Kamil<span class="logo-element">Craft</span></div>
+      <ul class="social-media">
+        <li class="social-link"
+            v-for="link in socialLinks"
+            :key="link.title.slug">
+          <a class="link"
+             :href="link.link"
+             :title="link.title"
+             target="_blank">
+            <font-awesome-icon class="icon" :icon="['fab', link.icon]" />
+            <span class="title">{{ link.title }}</span>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </footer>
+</template>
+
+<style lang="scss" scoped>
+.footer {
+  background-color: #323232;
+  padding: 35px 0;
+
+  .container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .logo {
+      padding: 14px 20px 14px 40px;
+      font-family: 'Thasadith', sans-serif;
+      font-size: 2.5em;
+      color: #D4D4D4;
+      background-color: #5B5B5B;
+
+      .logo-element {
+        color: #A2CF00;
+      }
+    }
+
+    .social-media {
+      display: flex;
+      list-style: none;
+
+      .social-link {
+        margin-right: 25px;
+        font-size: 1.1em;
+
+        a {
+          color: #A3A3A3;
+
+          .icon {
+            margin-right: 5px;
+          }
+
+          @media screen and (max-width: 790px) {
+            .title {
+              display: none;
+            }
+          }
+        }
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+
+      @media screen and (max-width: 500px) {
+        padding-right: 15px;
+      }
+    }
+    @media screen and (max-width: 500px) {
+      padding: 0;
+    }
+  }
+
+  @media screen and (max-width: 500px) {
+    padding: 15px 0;
+  }
+}
+</style>
+
+<script>
+export default {
+  name: 'Footer',
+  data () {
+    return {
+      socialLinks: [
+        { link: 'https://www.youtube.com/user/kamilniemczycki', icon: 'youtube', title: 'Oglądaj mnie na YouTube' },
+        { link: 'https://www.facebook.com/nikcamii', icon: 'facebook', title: 'Znajdź mnie na Facebooku' }
+      ]
+    }
+  }
+}
+</script>

src/main.js

@@ -6,9 +6,11 @@ import store from './store'
 import '../scss/default.scss'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
+import { fab } from '@fortawesome/free-brands-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 library.add(fas)
+library.add(fab)
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 
 Vue.config.productionTip = false