only click desktop share news

src/components/ShareSticky.vue

@@ -1,127 +1,77 @@
 <template>
   <!-- DESKTOP -->
-  <div class="hidden lg:block fixed left-0 top-1/2 -translate-y-1/2 z-[9999] group">
+  <div class="hidden md:block fixed left-0 top-1/2 -translate-y-1/2 z-[9999]">
     <div
-      class="
+      class="relative transition-all duration-300 ease-out"
-        relative
+      :class="desktopOpen ? 'translate-x-0' : '-translate-x-[70%]'"
-        -translate-x-[70%]
-        group-hover:translate-x-0
-        transition-all
-        duration-300
-        ease-out
-      "
     >
-      <ul class="flex flex-col gap-4 bg-white/90 backdrop-blur-md py-4 px-4 rounded-r-2xl shadow-xl border border-gray-200">
+      <div
+        class="absolute right-[-14px] top-1/2 -translate-y-1/2 bg-white shadow-md rounded-r-xl px-1 py-4 border border-gray-200 cursor-pointer"
+        @click="desktopOpen = !desktopOpen"
+      >
+        <div class="w-1 h-6 bg-gray-400 rounded-full"></div>
+      </div>
 
+      <ul class="flex flex-col gap-4 bg-white/90 backdrop-blur-md py-4 px-4 rounded-r-2xl shadow-xl border border-gray-200">
         <li class="border-b pb-3">
           <a :href="twitterUrl" target="_blank">
             <Icon icon="ph:x-logo-thin" class="text-2xl" />
           </a>
         </li>
-
         <li class="border-b pb-3">
           <a :href="facebookUrl" target="_blank">
             <Icon icon="ph:facebook-logo-thin" class="text-2xl" />
           </a>
         </li>
-
         <li class="border-b pb-3">
           <a :href="instagramUrl" target="_blank">
             <Icon icon="ph:instagram-logo-thin" class="text-2xl" />
           </a>
         </li>
-
         <li class="border-b pb-3">
           <a :href="whatsappUrl" target="_blank">
             <Icon icon="ph:whatsapp-logo-thin" class="text-2xl" />
           </a>
         </li>
-
         <li class="border-b pb-3">
           <a :href="linkedinUrl" target="_blank">
             <Icon icon="ph:linkedin-logo-thin" class="text-2xl" />
           </a>
         </li>
-
         <li>
           <button @click="copyLink" class="cursor-pointer">
             <Icon :icon="copied ? 'ph:check-thin' : 'ph:link-thin'" class="text-2xl" />
           </button>
         </li>
-
       </ul>
-
-      <div class="absolute right-[-14px] top-1/2 -translate-y-1/2 bg-white shadow-md rounded-r-xl px-1 py-4 border border-gray-200">
-        <div class="w-1 h-6 bg-gray-400 rounded-full"></div>
-      </div>
     </div>
   </div>
 
-    <div class="lg:hidden fixed bottom-6 right-6 z-[9999]">
+  <div class="md:hidden fixed bottom-6 right-6 z-[9999]">
-      <!-- SPEED DIAL -->
     <div class="flex flex-col items-end gap-2 mb-3">
-
       <transition name="fade">
         <div
           v-if="open"
           class="flex flex-col gap-3 bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-xl border border-gray-200"
         >
-
+          <a :href="twitterUrl" target="_blank" class="text-gray-600 hover:text-black transition border-b pb-3">
-            <!-- X -->
-            <a
-              :href="twitterUrl"
-              target="_blank"
-              class="text-gray-600 hover:text-black transition border-b pb-3"
-            >
             <Icon icon="ph:x-logo-thin" class="text-2xl" />
           </a>
-
+          <a :href="facebookUrl" target="_blank" class="text-gray-600 hover:text-blue-600 transition border-b pb-3">
-            <!-- Facebook -->
-            <a
-              :href="facebookUrl"
-              target="_blank"
-              class="text-gray-600 hover:text-blue-600 transition border-b pb-3"
-            >
             <Icon icon="ph:facebook-logo-thin" class="text-2xl" />
           </a>
-
+          <a :href="instagramUrl" target="_blank" class="text-gray-600 hover:text-pink-600 transition border-b pb-3">
-            <!-- Instagram -->
-            <a
-              :href="instagramUrl"
-              target="_blank"
-              class="text-gray-600 hover:text-pink-600 transition border-b pb-3"
-            >
             <Icon icon="ph:instagram-logo-thin" class="text-2xl" />
           </a>
-            <!-- WhatsApp -->
+          <a :href="whatsappUrl" target="_blank" class="text-gray-600 hover:text-green-600 transition border-b pb-3">
-            <a
-              :href="whatsappUrl"
-              target="_blank"
-              class="text-gray-600 hover:text-green-600 transition border-b pb-3"
-            >
             <Icon icon="ph:whatsapp-logo-thin" class="text-2xl" />
           </a>
-
+          <a :href="linkedinUrl" target="_blank" class="text-gray-600 hover:text-blue-700 transition border-b pb-3">
-            <!-- LinkedIn -->
-            <a
-              :href="linkedinUrl"
-              target="_blank"
-              class="text-gray-600 hover:text-blue-700 transition border-b pb-3"
-            >
             <Icon icon="ph:linkedin-logo-thin" class="text-2xl" />
           </a>
-
+          <button @click="copyLink" class="text-gray-600 hover:text-emerald-600 transition">
-            <!-- Copiar -->
+            <Icon :icon="copied ? 'ph:check-thin' : 'ph:link-thin'" class="text-2xl" />
-            <button
-              @click="copyLink"
-              class="text-gray-600 hover:text-emerald-600 transition"
-            >
-              <Icon
-                :icon="copied ? 'ph:check-thin' : 'ph:link-thin'"
-                class="text-2xl"
-              />
           </button>
-
         </div>
       </transition>
     </div>
@@ -131,10 +81,7 @@
       @click="toggle"
       class="bg-white/90 backdrop-blur-md border border-gray-200 shadow-xl rounded-full p-3 text-gray-700 hover:text-black transition"
     >
-      <Icon
+      <Icon :icon="open ? 'ph:x-thin' : 'ph:share-network-thin'" class="text-2xl" />
-        :icon="open ? 'ph:x-thin' : 'ph:share-network-thin'"
-        class="text-2xl"
-      />
     </button>
   </div>
 </template>
@@ -143,47 +90,35 @@
 import { ref, computed } from "vue"
 import { Icon } from "@iconify/vue"
 
-const props = defineProps({
+const props = defineProps({ url: { type: String, required: true } })
-  url: {
-    type: String,
-    required: true
-  }
-})
 const open = ref(false)
+const toggle = () => (open.value = !open.value)
 
-const toggle = () => {
+const desktopOpen = ref(false) // controla el panel desktop
-  open.value = !open.value
-}
 
 const copied = ref(false)
-
-
-
 const copyLink = async () => {
   try {
     await navigator.clipboard.writeText(props.url)
     copied.value = true
-    setTimeout(() => copied.value = false, 1500)
+    setTimeout(() => (copied.value = false), 1500)
-  } catch (err) {
+  } catch {
     console.error("No se pudo copiar")
   }
 }
 const BASE_URL = typeof window !== "undefined"
   ? `${window.location.protocol}//${window.location.host}`
-  : "";
+  : ""
 
 const fullUrl = computed(() => {
   if (props.url.startsWith("http")) {
     const url = new URL(props.url)
     return `${BASE_URL}${url.pathname}`
   }
-
   return `${BASE_URL}${props.url}`
 })
 
-const encodedUrl = computed(() =>
+const encodedUrl = computed(() => encodeURIComponent(fullUrl.value))
-  encodeURIComponent(fullUrl.value)
-)
 const twitterUrl = computed(() => `https://twitter.com/intent/tweet?url=${encodedUrl.value}`)
 const facebookUrl = computed(() => `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl.value}`)
 const whatsappUrl = computed(() => `https://api.whatsapp.com/send?text=${encodedUrl.value}`)