Avatar.svelte

<script>
    import { isAuthenticated } from "../../store.js";

    let isVisible = false;

    document.addEventListener("click", function () {
        isVisible = false;
    });

    function setVisible(event) {
        isVisible = true;
        event.stopPropagation();
    }
</script>

{#if $isAuthenticated}
    <div class="fixed flex flex-col top-5 right-0 w-20 z-50 text-gray-300">
        <div
            on:click={setVisible}
            class="flex items-center justify-center h-12 w-12 rounded-full bg-gray-700 shadow-2xl cursor-pointer">
            <div class="text-2xl font-bold">CT</div>
            <span class="absolute inset-0 -left-2 -top-2">
                <div
                    class="inline-flex items-center px-1 py-0.5 border-2 border-white rounded-full text-xs font-semibold leading-4 bg-green-500 text-white">
                    10
                </div>
            </span>
        </div>
    </div>
    {#if isVisible}
        <div
            class="fixed flex flex-col top-16 right-5 mt-2 w-48 rounded-md overflow-hidden shadow-2xl z-50 text-gray-300 bg-gray-700">
            <a
                href="#"
                class="block px-4 py-2 text-sm border-gray-400 border-b hover:bg-gray-500"><svg
                    class="w-4 inline mx-1"
                    viewBox="0 0 24 24">
                    <path
                        fill="currentColor"
                        d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
                </svg>Profile</a>
            <a
                href="#"
                class="block px-4 py-2 text-sm border-gray-400 border-b hover:bg-gray-500"><svg
                    class="w-4 inline mx-1"
                    viewBox="0 0 24 24">
                    <path
                        fill="currentColor"
                        d="M6,7H18A5,5 0 0,1 23,12A5,5 0 0,1 18,17C16.36,17 14.91,16.21 14,15H10C9.09,16.21 7.64,17 6,17A5,5 0 0,1 1,12A5,5 0 0,1 6,7M19.75,9.5A1.25,1.25 0 0,0 18.5,10.75A1.25,1.25 0 0,0 19.75,12A1.25,1.25 0 0,0 21,10.75A1.25,1.25 0 0,0 19.75,9.5M17.25,12A1.25,1.25 0 0,0 16,13.25A1.25,1.25 0 0,0 17.25,14.5A1.25,1.25 0 0,0 18.5,13.25A1.25,1.25 0 0,0 17.25,12M5,9V11H3V13H5V15H7V13H9V11H7V9H5Z" />
                </svg>My Games</a>
            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-500"><svg
                    class="w-4 inline mx-1"
                    viewBox="0 0 24 24">
                    <path
                        fill="currentColor"
                        d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21" />
                </svg>Notifications</a>
        </div>
    {/if}
{/if}