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

54 lines
1003 B
Plaintext

<span :category="category" :link="link" webc:nokeep><slot>█</slot></span>
<script type="module">
class NavLink extends HTMLElement {
connectedCallback() {
// remove whitespace
const span = this.querySelector(':scope span')
if (span) {
span.nextSibling.remove()
}
this.nextSibling.remove()
}
}
customElements.define('nav-link', NavLink)
</script>
<style webc:scoped>
:host {
--color-solid: #1e1e3cff;
--color-transparent: #1e1e3c33;
display: flex;
position: relative;
color: var(--color-transparent);
transition: color ease 0.5s;
}
:host:hover {
color: var(--color-solid);
transition: color ease 0.1s;
cursor: pointer;
}
:host.active {
color: var(--color-solid);
transition: color 1s ease, padding-inline-end 1s ease;
}
:host::after {
content: attr(data-name);
display: block;
max-width: 0px;
overflow: hidden;
transition: max-width 0.5s ease;
}
:host.active::after {
padding-inline-start: 0.225em;
max-width: 10em;
}
</style>