<script>
    export let active = "";
    import { getContext } from "svelte";
    const user = getContext("user");
    let logged = user?.id ?  true : false;
    let menuItems = [
        {
            name: "Account",
            link: "/profile",
            auth: true,
            guest: false,
        },
        {
            name: "Login",
            link: "/login",
            auth: false,
            guest: true,
        },
        {
            name: "Register",
            link: "/register",
            auth: false,
            guest: true,
        },
    ];
</script>



<ul class="nav justify-content-center mt-4 mb-5">
    {#each menuItems as item}
        {#if item.auth == logged || item.guest == !logged}
            <li class="nav-item">
                <a
                    class="nav-link"
                    class:active={active == item.name}
                    href={item.link}>{item.name}</a
                >
            </li>
        {/if}
    {/each}
</ul>
<style>
    .nav-item a.active{
        font-weight: bold;
    }
</style>
