<script>
    export let segment;
    export let rightComponent;
</script>

<style>
    /*
        .right {
            margin-left: auto;
            align-self: flex-end !important;
        }
     */

    a {
        font-size: 1rem;
        text-align: center;
    }
</style>
<header>
    <div class="container">
        <nav class="navbar navbar-expand-md">
            <div class="navbar-collapse order-1 order-md-0 dual-collapse2">
                <ul class="navbar-nav mr-auto">
                    <li><a aria-current="{segment === undefined ? 'page' : undefined}" href=".">Quartznet</a></li>
                    <li><a aria-current="{segment === 'about' ? 'page' : undefined}" href="about">About</a></li>

                    <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
                         the blog data when we hover over the link or tap it on a touchscreen -->
                    <li><a rel=prefetch aria-current="{segment === 'blog' ? 'page' : undefined}" href="blog">Blog</a>
                    </li>
                </ul>
            </div>
            <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
                <ul class="navbar-nav ml-auto">
                    <li>
                        <svelte:component this={rightComponent}/>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</header>