134 lines
2.9 KiB
Plaintext
134 lines
2.9 KiB
Plaintext
|
<nav id="primary">
|
||
|
|
<nav-link link="/" data-name="~"><~</nav-link>
|
||
|
|
<nav-link webc:for="c in categories" :category="c" :data-name="c"></nav-link>
|
||
|
|
|
||
|
|
<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 style="position: fixed; bottom: 0; left: 0; margin: 0; padding: 0; width: 100vw; height: 0px; overflow: visible; z-index: 100;mix-blend-mode: difference;">
|
||
|
|
<h1 id="menuItem"></h1>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<nav id="toTop">
|
||
|
|
<span>top</span>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<script type="module">
|
||
|
|
class NavPrimary extends HTMLElement {
|
||
|
|
categories = []
|
||
|
|
subs = []
|
||
|
|
|
||
|
|
connectedCallback() {
|
||
|
|
this.categories = this.querySelectorAll('nav-link')
|
||
|
|
this.subs = this.querySelectorAll('ul')
|
||
|
|
|
||
|
|
this.activate()
|
||
|
|
|
||
|
|
window.addEventListener('popstate', (evt) => {
|
||
|
|
this.activate()
|
||
|
|
})
|
||
|
|
|
||
|
|
this.categories.forEach(n => {
|
||
|
|
n.addEventListener('click',() => {
|
||
|
|
const category = n.attributes.getNamedItem('category')
|
||
|
|
const link = n.attributes.getNamedItem('link')
|
||
|
|
|
||
|
|
if (link) {
|
||
|
|
history.pushState({}, '', link.value)
|
||
|
|
location.pathname = link.value
|
||
|
|
} else if (category) {
|
||
|
|
location.hash = category.value
|
||
|
|
}
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
activate() {
|
||
|
|
this.categories.forEach(i => {
|
||
|
|
const { value } = i.attributes.getNamedItem('category') || i.attributes.getNamedItem('link')
|
||
|
|
|
||
|
|
if (value != '/' && (value == location.hash.replace('#', '') || value == location.pathname)) {
|
||
|
|
i.classList.add('active')
|
||
|
|
} else {
|
||
|
|
i.classList.remove('active')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
this.subs.forEach(s => {
|
||
|
|
const { name } = s.dataset
|
||
|
|
|
||
|
|
if (name == location.hash.replace('#', '') || name == location.pathname) {
|
||
|
|
s.classList.add('active')
|
||
|
|
} else {
|
||
|
|
s.classList.remove('active')
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define('nav-primary', NavPrimary)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style webc:scoped>
|
||
|
|
/* => CONTAINER */
|
||
|
|
nav {
|
||
|
|
display: flex;
|
||
|
|
margin: 1em var(--page-margin-inline) 0.5em;
|
||
|
|
font-size: 1.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* => LINKS */
|
||
|
|
nav-link {
|
||
|
|
padding-inline: 0.125em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* => 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: 1fr / 1fr;
|
||
|
|
}
|
||
|
|
|
||
|
|
#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;
|
||
|
|
}
|
||
|
|
</style>
|