Add (nav): share button

resources/js/vue/front/ShareToFriends.vue

@@ -1,12 +1,21 @@
 <template>
   <div>
     <button
+      v-if="isMobileDevice"
       type="button"
-      class="align-self-center btn btn-outline-light ms-2"
+      class="align-self-center btn btn-link text-white ms-2"
       @click="handleShareButton"
     >
       <i class="bi bi-share-fill"></i>
     </button>
+    <button
+      v-else
+      type="button"
+      class="align-self-center btn btn-light ms-2"
+      @click="handleShareButton"
+    >
+      <i class="bi bi-share-fill"></i> Share
+    </button>
 
     <!-- Modal -->
     <div
@@ -63,6 +72,18 @@ export default {
       shareUrl: null,
     };
   },
+  computed: {
+    isMobileDevice() {
+      if (
+        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+          navigator.userAgent,
+        )
+      ) {
+        return true;
+      }
+      return false;
+    },
+  },
   methods: {
     handleShareButton() {
       if (navigator.share) {
@@ -89,12 +110,13 @@ export default {
           })
           .then(() => console.log("Successful share"))
           .catch((error) => {
-            this.showModal = true;
+            // this.showModal = true;
           });
       } else {
         this.showModal = true;
       }
     },
+
     copyLink() {
       navigator.clipboard
         .writeText(this.shareUrl)