<script>
    import { onMount } from 'svelte'
    import { storeMessages } from '$/stores/global'
    let count = 0
    let classBell = '';
    storeMessages.subscribe(val => count = val.length || 0)

    $: if (count) {
        classBell = ' bell'
        setTimeout(() => classBell = '', 6000);
    }

    onMount(() => {
        return () => {
            count = 0
            storeMessages.set([])
        }
    })
</script>

<li class="nav-item dropdown">
    <a class="nav-icon dropdown-toggle" href={"#"} data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
        <div class="position-relative">
            {#if count}
                <i class={"align-middle bi bi-bell-fill text-danger" + classBell}></i>
                <span class="indicator">{count}</span>
            {:else}
                <i class="align-middle bi bi-bell"></i>
            {/if}
        </div>
    </a>
</li>
