init

ui/public/components/SideBar.js

@@ -0,0 +1,46 @@
+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)