46 lines
1.2 KiB
JavaScript
46 lines
1.2 KiB
JavaScript
css(`
|
|
side-bar {
|
|
position: fixed;
|
|
top: 0;
|
|
right: -100vw;
|
|
width: 80vw;
|
|
height: 100vh;
|
|
background: var(--tan);
|
|
border-left: 1px solid var(--green);
|
|
transition: right 0.3s ease;
|
|
z-index: 10;
|
|
padding: 5vw;
|
|
}
|
|
|
|
side-bar a {
|
|
font-size: 8vw;
|
|
color: var(--red)
|
|
}
|
|
|
|
side-bar h2 {
|
|
font-size: 6vw
|
|
}
|
|
`)
|
|
|
|
|
|
export default class SideBar extends HTMLElement {
|
|
connectedCallback() {
|
|
this.innerHTML += /* html */`
|
|
<h2>Menu</h2>
|
|
<ul style="list-style: none; padding: 0;">
|
|
<li><a href="/join">Join</a></li>
|
|
<li><a href="/locations">Locations</a></li>
|
|
<li><a href="/donate">Donate</a></li>
|
|
<li><a href="/events">Events</a></li>
|
|
<li><a href="/login">Login</a></li>
|
|
</ul>
|
|
<img src="_/icons/x.svg" style="margin-top: 70vw; width: 10vw; height: 10vw" onclick="">
|
|
`
|
|
this.querySelector("img").addEventListener("click", () => {
|
|
const sidebar = document.querySelector("side-bar");
|
|
sidebar.style.right = "-100vw"
|
|
})
|
|
}
|
|
}
|
|
|
|
customElements.define("side-bar", SideBar) |