forked from cybrespace/pinafore
Nolan Lawson
92d2dbddfc
* perf(virtuallist): add contain:content to virtual list items * add a few more contain:contents
58 lines
No EOL
1,022 B
HTML
58 lines
No EOL
1,022 B
HTML
<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>
|
|
|
|
<style>
|
|
.main-nav {
|
|
border-bottom: 1px solid var(--nav-border);
|
|
background: var(--nav-bg);
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 10;
|
|
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 { store } from '../_store/store'
|
|
|
|
export default {
|
|
store: () => store,
|
|
components: {
|
|
NavItem
|
|
}
|
|
}
|
|
</script> |