<script>
    import { storeSession } from '$/stores/global'
    import { Link } from 'svelte-navigator'

    let avatar = null;
    let persona = {}

    $: persona = $storeSession
    $: avatar = $storeSession?.avatar_img || '/avatars/avatar2.png';

    function onLogout() {
        sessionStorage.clear();
        document.location.href = '/';
    }
</script>

<li class="nav-item dropdown">
    <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href={"#"} data-bs-toggle="dropdown">
        <i class="align-middle" data-feather="settings"></i>
    </a>

    <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href={"#"} data-bs-toggle="dropdown">
        <img src={avatar} class="avatar img-fluid rounded me-1" alt={persona.nombres} />
        <span class="text-dark">{$storeSession.login}</span>
    </a>
    <div class="dropdown-menu dropdown-menu-end">
        <Link class="dropdown-item" to="/perfil">
            <i class="align-middle me-1" data-feather="user"></i> Perfil
        </Link>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item text-danger" href={"#"} on:click|preventDefault={onLogout}>
            Salir
        </a>
    </div>
</li>
