144 lines
2.8 KiB
Text
144 lines
2.8 KiB
Text
<nav :aria-label="label" webc:root="override">
|
|
<label for="nav-toggle">
|
|
<icon icon="fa6-solid:bars"></icon>
|
|
</label>
|
|
<input type="checkbox" id="nav-toggle" />
|
|
<template
|
|
webc:nokeep
|
|
@html="eleventyNavigationToHtml(eleventyNavigation($data.collections[collection]), {
|
|
listClass: 'list',
|
|
listItemClass: 'item',
|
|
listItemHasChildrenClass: 'hasChildren',
|
|
activeListItemClass: 'item-active',
|
|
|
|
anchorClass: 'link',
|
|
activeAnchorClass: 'link-active',
|
|
|
|
activeKey: $data.eleventyNavigation.key,
|
|
|
|
showExcerpt: false
|
|
})"
|
|
></template>
|
|
</nav>
|
|
|
|
<style webc:scoped="character-nav">
|
|
:host {
|
|
--nav-spacing: 1em;
|
|
--nav-background-color: var(--clr-nav-background);
|
|
--nav-border: var(--border-thin) solid var(--clr-box-border);
|
|
|
|
position: sticky;
|
|
top: 0;
|
|
|
|
display: grid;
|
|
justify-items: end;
|
|
|
|
background-color: var(--nav-background-color);
|
|
|
|
border-block-end: var(--nav-border);
|
|
|
|
z-index: 2;
|
|
|
|
@media (min-width: 35em) {
|
|
--nav-spacing: 1.5em;
|
|
--nav-background-color: transparent;
|
|
--nav-border: none;
|
|
}
|
|
|
|
@media (min-width: 64em) {
|
|
--nav-spacing: 2em;
|
|
}
|
|
}
|
|
|
|
:host:has(#nav-toggle:checked) .list {
|
|
opacity: 1;
|
|
}
|
|
|
|
:host:has(#nav-toggle:checked) .item {
|
|
height: 100%;
|
|
}
|
|
|
|
:host label[for='nav-toggle'] {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
margin-block: 0.75em;
|
|
margin-inline: 1em;
|
|
|
|
@media (min-width: 35em) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
:host label[for='nav-toggle']:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
:host #nav-toggle {
|
|
display: none;
|
|
}
|
|
|
|
:host .list {
|
|
--nav-items-position: absolute;
|
|
--nav-items-orientation: column nowrap;
|
|
|
|
position: var(--nav-items-position);
|
|
top: 3em;
|
|
|
|
display: flex;
|
|
flex-flow: var(--nav-items-orientation);
|
|
|
|
text-align: end;
|
|
list-style: none;
|
|
|
|
background-color: var(--clr-nav-background);
|
|
|
|
margin: 0;
|
|
border: var(--border-thin) solid var(--clr-nav-border);
|
|
border-block-start: none;
|
|
border-inline-end: none;
|
|
border-end-start-radius: 0.75em;
|
|
padding-inline: var(--nav-spacing);
|
|
|
|
z-index: 3;
|
|
opacity: 0;
|
|
transition: opacity 0.4s ease-in-out;
|
|
|
|
@media (min-width: 35em) {
|
|
--nav-items-position: static;
|
|
--nav-items-orientation: row nowrap;
|
|
align-items: start;
|
|
gap: 1em;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
:host .item {
|
|
overflow: hidden;
|
|
height: 0;
|
|
transition: height 0.4s ease-in-out;
|
|
|
|
@media (min-width: 35em) {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
:host .link {
|
|
display: block;
|
|
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
color: var(--clr-nav-link, inherit);
|
|
|
|
padding-block: calc(var(--nav-spacing) / 2);
|
|
|
|
transition: color 0.4s ease;
|
|
}
|
|
|
|
:host .link:hover {
|
|
color: var(--clr-nav-link-hover);
|
|
}
|
|
|
|
:host .link-active {
|
|
color: var(--clr-nav-link-active);
|
|
}
|
|
</style>
|