init

ui/public/components/NavBar.js

@@ -0,0 +1,55 @@
+class NavBar extends Shadow {
+    NavButton(text) {
+
+        function normalizeText(text) {
+            return text.toLowerCase().replace(/[\s?]+/g, "");
+        }
+
+        function isSelected(el) {
+            return ("/" + normalizeText(el.innerText)) === window.location.pathname
+        }
+
+        return p(text)
+                .cursor("default")
+                .textUnderlineOffset(0.5, em)
+                .onAppear(function() {
+                    this.style.textDecoration = isSelected(this) ? "underline" : ""
+                })
+                .onHover(function (hovering) {
+                    if(hovering) {
+                        this.style.textDecoration = "underline"
+                    } else if(!isSelected(this)) {
+                        this.style.textDecoration = ""
+                    }
+                })
+                .onClick(function (done) {
+                    if(done) {
+                        if(!isSelected(this)) {
+                            window.navigateTo(normalizeText(this.innerText))
+                        } else {
+                            window.navigateTo("/")
+                        }
+                    }
+                })
+        
+    }
+
+    render() {
+        HStack(() => {
+            this.NavButton("WHY?")
+            this.NavButton("EVENTS")
+            div().width(2.5, em).height(2.5, em)
+            this.NavButton("JOIN")
+            this.NavButton("SIGN IN")
+        })
+        .x(50, vw).y(4, em)
+        .center()
+        .fontSize(0.85, em)
+        .justifyContent("center")
+        .gap(3, em)
+        .paddingRight(2, em)
+        .width(50, vw)
+    }
+}
+
+register(NavBar)