{% if not mobile %}

{# da valutare attentamente il CLS #}
<div class="sticky top-28" 
     x-data="{ 
         isHeroVisible: true,
         init() {
             const heroImage = document.querySelector('.hero_image');
             if (heroImage) {
                 const observer = new IntersectionObserver((entries) => {
                     entries.forEach(entry => {
                         this.isHeroVisible = entry.isIntersecting;
                     });
                 }, { threshold: 0 });
                 observer.observe(heroImage);
             }
         }
     }">
    <div class="-left-24 h-36 w-20 p-0 -mb-4"
         :class="isHeroVisible ? 'absolute' : 'relative'">
        <ul class="flex flex-col items-end gap-1.5 text-xs font-default">
            <li>
                <a 
                class="bg-[#3d76b4] inline-block text-center text-white px-2 py-1.5 hover:pr-4 transition-all"
                onclick="window.open(this.href, 'targetWindow', 'toolbar=no, location=no, status=no, menubar=no, scrollbars=yes, resizable=yes, top=400, left=400, width=600, height=300' ); return false;"
                href="https://www.facebook.com/sharer/sharer.php?u={{ post.link }}/&amp;quote={{ post.title|e }}"
                title="Condividi su Facebook">Mi piace</a>
            </li>
            <li>
                <a class="bg-[#30caf2] inline-block text-center text-white px-2 py-1.5 hover:pr-4 transition-all"
                href="//twitter.com/share?text={{ post.title|e }}&amp;url={{ post.link }}&amp;via=HDblog">Tweet</a>
            </li>
            <li>
                <a class="bg-[#f0594d] inline-block text-center text-white px-2 py-1.5 hover:pr-4 transition-all"
                href="https://share.flipboard.com/bookmarklet/popout?v=2&title={{ post.title|e }}&url={{ post.link }}">Flipboard</a>
            </li>
            <li>
                <a class="bg-[#9ca3a6] hover:bg-[#239ed3] inline-block text-center text-white px-2 py-1.5 hover:pr-4 transition-all"
                href="#comments">Commenta</a>
            </li>
        </ul>
    </div>

</div>
{% endif %}


