LGCC
/
cdrdpyj
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

only click desktop share news

This commit is contained in:
David Ascanio 2026-03-03 14:19:08 -03:00
parent 1df0b024bc
commit 75cca7e48f
1 changed files with 46 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
src/components/ShareSticky.vue
View File

@ -1,129 +1,79 @@
<template> <template>
<!-- DESKTOP --> <!-- 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 <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"> <li class="border-b pb-3">
<a :href="twitterUrl" target="_blank"> <a :href="twitterUrl" target="_blank">
<Icon icon="ph:x-logo-thin" class="text-2xl" /> <Icon icon="ph:x-logo-thin" class="text-2xl" />
</a> </a>
</li> </li>
<li class="border-b pb-3"> <li class="border-b pb-3">
<a :href="facebookUrl" target="_blank"> <a :href="facebookUrl" target="_blank">
<Icon icon="ph:facebook-logo-thin" class="text-2xl" /> <Icon icon="ph:facebook-logo-thin" class="text-2xl" />
</a> </a>
</li> </li>
<li class="border-b pb-3"> <li class="border-b pb-3">
<a :href="instagramUrl" target="_blank"> <a :href="instagramUrl" target="_blank">
<Icon icon="ph:instagram-logo-thin" class="text-2xl" /> <Icon icon="ph:instagram-logo-thin" class="text-2xl" />
</a> </a>
</li> </li>
<li class="border-b pb-3"> <li class="border-b pb-3">
<a :href="whatsappUrl" target="_blank"> <a :href="whatsappUrl" target="_blank">
<Icon icon="ph:whatsapp-logo-thin" class="text-2xl" /> <Icon icon="ph:whatsapp-logo-thin" class="text-2xl" />
</a> </a>
</li> </li>
<li class="border-b pb-3"> <li class="border-b pb-3">
<a :href="linkedinUrl" target="_blank"> <a :href="linkedinUrl" target="_blank">
<Icon icon="ph:linkedin-logo-thin" class="text-2xl" /> <Icon icon="ph:linkedin-logo-thin" class="text-2xl" />
</a> </a>
</li> </li>
<li> <li>
<button @click="copyLink" class="cursor-pointer"> <button @click="copyLink" class="cursor-pointer">
<Icon :icon="copied ? 'ph:check-thin' : 'ph:link-thin'" class="text-2xl" /> <Icon :icon="copied ? 'ph:check-thin' : 'ph:link-thin'" class="text-2xl" />
</button> </button>
</li> </li>
</ul> </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> </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">
<div class="flex flex-col items-end gap-2 mb-3"> <transition name="fade">
<div
<transition name="fade"> v-if="open"
<div class="flex flex-col gap-3 bg-white/90 backdrop-blur-md p-3 rounded-2xl shadow-xl border border-gray-200"
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">
> <Icon icon="ph:x-logo-thin" class="text-2xl" />
</a>
<!-- X --> <a :href="facebookUrl" target="_blank" class="text-gray-600 hover:text-blue-600 transition border-b pb-3">
<a <Icon icon="ph:facebook-logo-thin" class="text-2xl" />
:href="twitterUrl" </a>
target="_blank" <a :href="instagramUrl" target="_blank" class="text-gray-600 hover:text-pink-600 transition border-b pb-3">
class="text-gray-600 hover:text-black transition border-b pb-3" <Icon icon="ph:instagram-logo-thin" class="text-2xl" />
> </a>
<Icon icon="ph:x-logo-thin" class="text-2xl" /> <a :href="whatsappUrl" target="_blank" class="text-gray-600 hover:text-green-600 transition border-b pb-3">
</a> <Icon icon="ph:whatsapp-logo-thin" class="text-2xl" />
</a>
<!-- Facebook --> <a :href="linkedinUrl" target="_blank" class="text-gray-600 hover:text-blue-700 transition border-b pb-3">
<a <Icon icon="ph:linkedin-logo-thin" class="text-2xl" />
:href="facebookUrl" </a>
target="_blank" <button @click="copyLink" class="text-gray-600 hover:text-emerald-600 transition">
class="text-gray-600 hover:text-blue-600 transition border-b pb-3" <Icon :icon="copied ? 'ph:check-thin' : 'ph:link-thin'" class="text-2xl" />
> </button>
<Icon icon="ph:facebook-logo-thin" class="text-2xl" /> </div>
</a> </transition>
<!-- 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"
>
<Icon icon="ph:whatsapp-logo-thin" class="text-2xl" />
</a>
<!-- 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>
<!-- Copiar -->
<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> </div>
<!-- FAB PRINCIPAL --> <!-- FAB PRINCIPAL -->
@ -131,59 +81,44 @@
@click="toggle" @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" 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> </button>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, computed } from "vue" import { ref, computed } from "vue"
import { Icon } from "@iconify/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 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 copied = ref(false)
const copyLink = async () => { const copyLink = async () => {
try { try {
await navigator.clipboard.writeText(props.url) await navigator.clipboard.writeText(props.url)
copied.value = true copied.value = true
setTimeout(() => copied.value = false, 1500) setTimeout(() => (copied.value = false), 1500)
} catch (err) { } catch {
console.error("No se pudo copiar") console.error("No se pudo copiar")
} }
} }
const BASE_URL = typeof window !== "undefined" const BASE_URL = typeof window !== "undefined"
? `${window.location.protocol}//${window.location.host}` ? `${window.location.protocol}//${window.location.host}`
: ""; : ""
const fullUrl = computed(() => { const fullUrl = computed(() => {
if (props.url.startsWith("http")) { if (props.url.startsWith("http")) {
const url = new URL(props.url) const url = new URL(props.url)
return `${BASE_URL}${url.pathname}` return `${BASE_URL}${url.pathname}`
} }
return `${BASE_URL}${props.url}` 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 twitterUrl = computed(() => `https://twitter.com/intent/tweet?url=${encodedUrl.value}`)
const facebookUrl = computed(() => `https://www.facebook.com/sharer/sharer.php?u=${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}`) const whatsappUrl = computed(() => `https://api.whatsapp.com/send?text=${encodedUrl.value}`)