css(`
    side-bar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 16vw;
        border-right: 0.5px solid var(--accent2);
        display: flex;
        flex-direction: column;
        padding-top: 13vh;
    }

    side-bar button {
        color: var(--darkbrown);
        margin: 1.5em;
        background-color: color-mix(in srgb, var(--accent2) 35%, var(--orange) 65%);
        border: 1px solid var(--orange);
        border-radius: 12px;
        padding: 0.5em;
        font-weight: bold;
    }
`)


class Sidebar extends HTMLElement {
    connectedCallback() {
        this.render()
    }

    render() {
        this.innerHTML = /* html */ `
            <span id="title" style="position: absolute; left: 50%; transform: translateX(-50%) " class="link" onclick='window.location.href="/"'>hyperia</span>
            <button>Main</button>
        `
    }
}

customElements.define("side-bar", Sidebar)