<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>