1

components/contact-footer.vue

@@ -1,7 +1,7 @@
 <template>
   <ul class="contact-footer">
     <li class="mr-4 box_shadow" v-for="(item,index) in contactFooter" :key="index">
-      <a :href="item.link" target="_blank">
+      <a :href="item.link"  @click="toShare(item.id)" target="_blank">
         <b-img :src="item.icon" :alt="item.alt"></b-img>
       </a>
     </li>
@@ -18,35 +18,58 @@ export default {
         {
           icon: require('../assets/image/icon/Facebook-colorful.png'),
           link: 'javascript:;',
-          alt: 'Facebook'
+          alt: 'Facebook',
+          id: 'facebook',
         },
         {
           icon: require('../assets/image/icon/X-colorful.png'),
           link: 'javascript:;',
-          alt: 'X'
+          alt: 'X',
+          id: 'x',
         },
         {
           icon: require('../assets/image/icon/in-colorful.png'),
           link: 'javascript:;',
-          alt: 'in'
+          alt: 'Linkedin',
+          id: 'linkedin'
         },
         {
           icon: require('../assets/image/icon/google-colorful.png'),
           link: 'javascript:;',
-          alt: 'google'
-        },
-        {
-          icon: require('../assets/image/icon/YouTube-colorful.png'),
-          link: 'javascript:;',
-          alt: 'YouTube'
+          alt: 'Pinterest',
+          id: 'pinterest'
         },
+
         {
           icon: require('../assets/image/icon/fax-colorful.png'),
           link: 'javascript:;',
-          alt: 'fax'
+          alt: 'Whatsapp',
+          id: 'whatsapp'
         }
       ]
     }
+  },
+  methods:{
+    toShare(id){
+      const url = encodeURIComponent(window.location.href);
+      const title = encodeURIComponent(document.title);
+
+      if (id === 'facebook') {
+        window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, '_blank');
+      }
+      if (id === 'x') {
+        window.open(`https://twitter.com/intent/tweet?url=${url}&text=${title}`, '_blank');
+      }
+      if (id === 'linkedin') {
+        window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${url}`, '_blank');
+      }
+      if (id === 'pinterest') {
+        window.open(`https://pinterest.com/pin/create/button/?url=${url}`, '_blank');
+      }
+      if (id === 'whatsapp') {
+        window.open(`https://api.whatsapp.com/send?text=${title}%20${url}`, '_blank');
+      }
+    }
   }
 }
 </script>

components/side-nav.vue

@@ -25,7 +25,7 @@ export default {
   data() {
     return {
       sideiItem: [
-        { 
+        {
           icon: require('../assets/image/icon/contact.png'),
           label: this.$t('common.Contact'),
           desc: `<div>
@@ -33,15 +33,15 @@ export default {
               <p>0086 182 5311 2969</p>
             </div>`
         },
-        { 
+        {
           icon: require('../assets/image/icon/online.png'),
           label: this.$t('common.Online'),
         },
-        { 
+        {
           icon: require('../assets/image/icon/whats.png'),
           label: this.$t('common.Whats'),
         },
-        { 
+        {
           icon: require('../assets/image/icon/email1.png'),
           label: this.$t('common.E-mail'),
         }