Add (nav): share button

resources/js/vue/front/ShareToFriends.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <button
+      type="button"
+      class="align-self-center btn btn-outline-light ms-2"
+      @click="handleShareButton"
+    >
+      <i class="bi bi-share-fill"></i>
+    </button>
+
+    <!-- Modal -->
+    <div
+      v-if="showModal"
+      class="modal fade show"
+      id="shareModal"
+      tabindex="-1"
+      aria-labelledby="shareModalLabel"
+      style="display: block"
+      aria-modal="true"
+      role="dialog"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h1
+              class="modal-title fs-5 text-black fw-bold"
+              id="shareModalLabel"
+            >
+              Share to Friends
+            </h1>
+            <button
+              type="button"
+              class="btn-close"
+              @click="showModal = false"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div class="modal-body d-grid gap-2">
+            <input
+              type="text"
+              readonly
+              class="form-control"
+              :value="shareUrl"
+            />
+            <button class="btn btn-primary w-full" @click="copyLink">
+              Copy Link
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="showModal" class="modal-backdrop fade show"></div>
+  </div>
+</template>
+
+<script>
+import { toast } from "vue3-toastify";
+export default {
+  name: "ShareToFriends",
+  data() {
+    return {
+      showModal: false,
+      shareUrl: null,
+    };
+  },
+  methods: {
+    handleShareButton() {
+      if (navigator.share) {
+        // Extracting the HTML title
+        const shareTitle = document.title;
+
+        // Extracting the meta description
+        const metaDescriptionTag = document.querySelector(
+          'meta[name="description"]',
+        );
+        const shareText = metaDescriptionTag
+          ? "Check this out: " + metaDescriptionTag.content
+          : "";
+
+        // Setting default values if not found
+        const title = shareTitle || "FutureWalker";
+        const text = shareText || "Check this AI & tech news platform out!";
+
+        navigator
+          .share({
+            title: title,
+            text: text,
+            url: this.shareUrl,
+          })
+          .then(() => console.log("Successful share"))
+          .catch((error) => {
+            this.showModal = true;
+          });
+      } else {
+        this.showModal = true;
+      }
+
+      this.showModal = true;
+    },
+    copyLink() {
+      navigator.clipboard
+        .writeText(this.shareUrl)
+        .then(() => {
+          toast("Copied!", {
+            position: "bottom-center",
+            type: "success",
+            timeout: 1500,
+            closeOnClick: true,
+            pauseOnFocusLoss: true,
+            pauseOnHover: true,
+            draggable: true,
+            draggablePercent: 0.6,
+            showCloseButtonOnHover: false,
+            hideProgressBar: false,
+            closeButton: true,
+            icon: true,
+            rtl: false,
+          });
+        })
+        .catch((err) => {
+          // Handle error
+          console.error("Error copying text: ", err);
+        });
+    },
+  },
+  mounted() {
+    this.shareUrl = window.location.href;
+  },
+};
+</script>
+
+<style scoped>
+/* Add any component-specific styles here */
+</style>

resources/views/front/layouts/partials/nav.blade.php

@@ -26,11 +26,13 @@
                     </a>
                 </div>
 
+                <div class="text-center text-md-end">
+                    <div class="d-flex d-justify-content-end">
+                        <div class="align-self-center d-none d-md-block">Important news shaping the digital future</div>
 
-                <div class="d-block d-md-none" style="width:51px; height: 38px;"></div>
+                        <share-to-friends></share-to-friends>
+                    </div>
 
-                <div class="col-12 col-md-7 col-lg-8 text-center text-md-end d-none d-md-block">
-                    <div>Important news shaping the digital future</div>
                 </div>
             </div>
         </header>

resources/views/front/partials/news_bites.blade.php

@@ -61,8 +61,8 @@ class="font-family-roboto-condensed mb-1 pb-1 d-inline badge bg-danger border-da
                 <div class="accordion-body small">
 
                     @if (!is_empty($post->bites))
-                    <div class="fw-bold">The Bite:</div>
-                    <div class="mb-3">{{ $post->bites }}</div>
+                        <div class="fw-bold">The Bite:</div>
+                        <div class="mb-3">{{ $post->bites }}</div>
                     @endif
 
                     @if (in_array($post->impact_level, ['medium', 'high']))

resources/views/front/partials/sidebar.blade.php

@@ -21,6 +21,8 @@
 </aside>
  --}}
 
-<div class="w-full text-center text-secondary">
-<small class="text-center">AI & tech news syndication site built by <a href="https://x.com/charlestehio">@charlestehio</a>. All trademarks are the property of their respective owners.</small>
-</div>
+    <div class="w-full text-center text-secondary">
+        <small class="text-center">AI & tech news syndication site built by <a
+                href="https://x.com/charlestehio">@charlestehio</a>. All trademarks are the property of their respective
+            owners.</small>
+    </div>