<script>
    import {getContext} from 'svelte';
    import {writable} from 'svelte/store';

    const navigate = getContext('navigate');
    const navaid = getContext('navaid');

    const base = navaid && navaid.base || writable('/');
    const library = navaid && navaid.library || writable(null);
    let props;
    let href;

    export let append;

    $: {
        props = {...$$props};
        href = props.href;
        delete props.href;
        href = ($library && $library.prefix ? $library.prefix : '') + (!append ? $base : '') + href.replace(/^\//, '');
    }

    const click = () => {
        navigate(href);
    }
</script>

<style>
    span {
        text-decoration: none;
        padding: 1rem 0.5rem;
        display: block;
        color: #005de6;
    }
</style>

<span {...props} on:click={click}><slot></slot></span>
