work.suroh.tk/_includes/components/nav-primary.webc

131 lines
2.3 KiB
Plaintext

<nav id="primary">
<nav-link link="/" data-name="<~"><~</nav-link>
<div class="pagelinks">
<nav-link webc:for="c in categories" :category="c" :data-name="c"></nav-link>
</div>
<button class="audioToggle"></button>
</nav>
<nav id="sub" slot="subnav">
<ul webc:for="(c, pages) in categories" :data-name="c">
<li webc:for="p of pages">
<a :href="p.url" @text="p.data.title || p.fileSlug"></a>
</li>
</ul>
</nav>
<section id="menuItem" style="">
<h1 id="menuItem"></h1>
</section>
<nav id="toTop">
<span>top</span>
</nav>
<script src="nav-primary.js" type="module"></script>
<style webc:scoped>
/* => HOST */
:host {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 1em 0.25em;
margin-block: 0.5em 0.5em;
margin-inline: var(--page-margin-inline);
}
/* => CONTAINER */
nav {
display: grid;
grid-template-columns: subgrid;
grid-column: 1 / -1;
font-size: 1.5em;
}
nav-link[data-name="<~"] {
grid-column: 1 / span 1
}
.pagelinks {
display: flex;
gap: 0.25em;
}
/* => AUDIO TOGGLE */
.audioToggle {
background: none;
border: none;
margin-inline-start: auto;
transition: color ease-in-out 0.1s;
}
.audioToggle:hover {
color: #CECECE;
cursor: pointer;
transition: color ease-in-out 0.1s;
}
.audioToggle::after {
content: '🔇'
}
.audioToggle.active::after {
content: '🔉'
}
/* => SUb NAV */
#sub {
display: grid;
grid-template: subgrid / 1fr;
grid-column: 2 / -1;
margin: 0;
}
#sub > ul {
grid-row: 1 / span 1;
grid-column: 1 / span 1;
max-height: 0px;
overflow: hidden;
transition: max-height 0.5s cubic-bezier(.22,.61,.36,1);
}
ul.active {
max-height: 50vh !important;
}
/* => POPUP TITLE */
#menuItem {
position: fixed;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
width: 100vw;
height: 0px;
overflow: visible;
z-index: 100;
mix-blend-mode: difference;
}
#menuItem h1 {
position: absolute;
line-height: inherit;
bottom: -500px;
margin: 0;
padding: 0;
font-size: 33vw;
opacity: 0;
transform: translateY(100px);
transform-origin: bottom left;
mix-blend-mode: difference;
transition: opacity ease-in-out 0.1s, transform ease-in-out 0.1s;
}
#menuItem h1.active {
mix-blend-mode: difference;
opacity: 1 !important;
transform: translateY(-600px) !important;
}
</style>