Terra Cotta Home Page, Quill Updates

ui/public/components/NavBar.js

@@ -1,150 +1,44 @@
-css(`
-    nav-bar {
-        position: fixed;
-        top: 0px;
-        left: 0px;
-        width: 100vw;
-        z-index: 1;
-        height: 100px;
-    }
-    
-    .title-div {
-        position: absolute;
-        left: 2em;
-        top: 2em;
-        display: flex;
-        align-items: center;
-    }
-    
-    .links-div {
-        position: absolute;
-        right: 3em; 
-        top: 2.75em; 
-        display: flex;
-    }
-    
-    .logo-p {
-        font-size: 2em; 
-        margin: 0 0 0 15px;
-        letter-spacing: 1px;
-        text-align: center;
-    }
-    
-    .nav-hamburger {
-        margin-right: 8vw;
-        display: none;
-        max-height:40px;
-    }
-    
-    .nav-link {
-        font-size: 1em; 
-        margin: 0 0 0 15px;
-        letter-spacing: 1px;
-     }
-    
-    @media only screen and (max-width: 820px) {
-        nav-bar a {
-            text-decoration: none;
-            color: var(--green);
-        }
-        
-        .title-div {
-            position: static
-        }
-        
-        .logo {
-            width: 10vw;
-        }
-        
-        .logo-p {
-            font-size: 8vw; 
-            margin: 0 0 0 1vw;
-        }
-        
-        .nav-hamburger {
-            display: block;
-        }
-        
-        .links-div {
-            display:none;
-        }
-        
-        .outer-nav {
-            position: fixed;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 20vw;
-            background: var(--tan);
-            display: flex;
-            z-index: 1;
-            justify-content: space-between;
-            align-items: center;
-            padding: 0 3vw;
-            max-height:80px;
-        }
-    }
-`)
+class NavBar extends Shadow {
+    render() {
+        HStack(() => {
+            p("WHY?")
+            p("EVENTS")
+            p("JOIN")
+            p("SIGN IN")
+        })
+        .x(50, vw).y(4, em)
+        .center()
+        .fontSize(0.85, em)
+        .justifyContent("center")
+        .gap(3, em)
+        .paddingRight(2, em)
+        .onNavigate(() => {
+            console.log("hi")
+        })
+        .onAppear(() => {
+            Array.from(this.$("p")).forEach((el) => {
+                el.addEventListener("mousedown", (e) => {
+                    el.classList.add("touched")
+                })
+            })
+            window.addEventListener("mouseup", (e) => {
+                let target = e.target
+                if(!target.matches("app-menu p")) {
+                    return
+                }
 
-export default class NavBar extends HTMLElement {
-    connectedCallback() {
-        this.innerHTML += /* html */ `
-            <div class="outer-nav">
-                <div style="display: flex; align-items: center;">
-                    <a draggable="false" href="/" id="homeLink" style="display: flex; align-items: center; text-decoration: none; color: var(--green);">
-                        <div class="title-div">
-                            <img class="logo" width="40" height="40" src="_/icons/logo.svg"/>
-                            <p class="logo-p">Hyperia</p>
-                        </div>
-                    </a>
-                   
-                </div>
-                
-    
-            <div class="links-div">
-                <a draggable="false" href="/about" class="nav-link">About</a>
-                <a draggable="false" href="/join" class="nav-link">Join</a>
-                <a draggable="false" href="/login" class="nav-link">Login</a>
-            </div>
-                
-                <!-- Right side: hamburger -->
-                <img class="nav-hamburger" src="_/icons/hamburger.svg">
-            </div>
-        </div>
-        `;
+                target.classList.remove("touched")
 
-        // Track which anchor was pressed down
-        let activeLink = null;
-
-        // Get all anchor tags inside this element
-        const anchors = this.querySelectorAll('a');
-
-        anchors.forEach(anchor => {
-            anchor.addEventListener('mousedown', (e) => {
-                activeLink = anchor;
-            });
-        });
-
-        // Listen globally for mouseup, to detect release anywhere
-        document.addEventListener('mouseup', (e) => {
-            if (activeLink) {
-                // Navigate to the href of the activeLink
-                window.location.href = activeLink.href;
-                activeLink = null;
-            }
-        });
-
-        const hamburger = this.querySelectorAll("img")[1]
-        const sidebar = document.querySelector("side-bar");
-
-        hamburger.addEventListener("click", () => {
-            if (sidebar.style.right === "0vw") {
-                sidebar.style.right = "-100vw";
-            } else {
-                sidebar.style.right = "0vw";
-            }
-        });
+                if(target.classList.contains("selected")) {
+                    this.selected = ""
+                    window.navigateTo("/")
+                } else {
+                    this.selected = target.innerText
+                    window.navigateTo("/app/" + target.innerText.toLowerCase())
+                }
+            })
+        })
     }
 }
 
-customElements.define("nav-bar", NavBar)
+register(NavBar)