42 lines
1.4 KiB
Svelte
42 lines
1.4 KiB
Svelte
<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> |