52 lines
1.0 KiB
Plaintext
52 lines
1.0 KiB
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: var(--primary-colour, pink);
|
|
--color-transparent: var(--primary-colour-25);
|
|
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>
|