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)