70 lines
1.3 KiB
HTML
70 lines
1.3 KiB
HTML
<nav id="main-nav" class="main-nav">
|
|
<ul class="main-nav-ul">
|
|
{#each $navPages as navPage (navPage.href)}
|
|
<li class="main-nav-li">
|
|
<NavItem
|
|
{page}
|
|
name={navPage.name}
|
|
href={navPage.href}
|
|
svg={navPage.svg}
|
|
label={navPage.label}
|
|
/>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</nav>
|
|
{#await importNavShortcuts}
|
|
<!-- awaiting nav shortcuts promise -->
|
|
{:then component}
|
|
<svelte:component this={component}/>
|
|
{:catch error}
|
|
<!-- nav shortcuts {error} -->
|
|
{/await}
|
|
|
|
<style>
|
|
.main-nav {
|
|
border-bottom: 1px solid var(--nav-border);
|
|
background: var(--nav-bg);
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 100;
|
|
contain: content; /* see https://www.w3.org/TR/2018/CR-css-contain-1-20181108/#valdef-contain-content */
|
|
}
|
|
|
|
.main-nav-ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
display: flex;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.main-nav-li {
|
|
display: flex;
|
|
}
|
|
|
|
@media (max-width: 991px) {
|
|
.main-nav-li {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
import NavItem from './NavItem'
|
|
import { importNavShortcuts } from '../_utils/asyncModules'
|
|
import { store } from '../_store/store'
|
|
|
|
export default {
|
|
store: () => store,
|
|
components: {
|
|
NavItem
|
|
},
|
|
data: () => ({
|
|
importNavShortcuts: importNavShortcuts()
|
|
})
|
|
}
|
|
</script>
|