<script>
    import Link from './Link.svelte';
    import Icon from './Icon.svelte';

    export let position = "sticky";
</script>


<nav class="{position} top-0 bg-base-100 w-full flex justify-between items-center p-2">
    <div>
        <Link target="Home">
            <button class="btn btn-square btn-ghost align-middle">
                <Icon name="home" class="w-8 h-8 stroke-2" />
            </button>
        </Link>
    </div>

    {#if $$slots.title}
        <slot name="title"></slot>
    {/if}

    <div>
        <Link target="Settings">
            <button class="btn btn-square btn-ghost align-middle ">
                <Icon name="cog-8-tooth" class="w-8 h-8 stroke-2" />
            </button>
        </Link>
    </div>
</nav>
