Input box, sidebar, ws connection

ui/site/components/Sidebar.js

@@ -0,0 +1,39 @@
+css(`
+    side-bar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        height: 100vh;
+        width: 16vw;
+        border-right: 0.5px solid var(--periwinkle);
+        display: flex;
+        flex-direction: column;
+        padding-top: 13vh;
+    }
+
+    side-bar button {
+        color: var(--darkbrown);
+        margin: 1.5em;
+        background-color: color-mix(in srgb, var(--periwinkle) 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)