Basic Navigation

ui/public/components/Home.js

@@ -1,25 +0,0 @@
-import "./NavBar.js"
-
-class Home extends Shadow {
-    render() {
-        img("_/images/knight.png", "29vw")
-            .position("absolute")
-            .left(50, vw).top(50, vh)
-            .center()
-
-        p("H   Y   P   E   R   I   A")
-            .x(50, vw).y(50, vh)
-            .center()
-            .color("var(--gold)")
-            .fontSize(5, vw)
-
-        NavBar()
-
-        p("A CLASSICAL CHRISTIAN ASSOCIATION")
-            .x(50, vw).y(94, vh)
-            .center()
-            .letterSpacing(0.3, em)
-    }
-}
-
-register(Home)

ui/public/components/NavBar.js

@@ -1,10 +1,41 @@
 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) {
+                        window.navigateTo(normalizeText(this.innerText))
+                    }
+                })
+        
+    }
+
     render() {
         HStack(() => {
-            p("WHY?")
-            p("EVENTS")
-            p("JOIN")
-            p("SIGN IN")
+            this.NavButton("WHY?")
+            this.NavButton("EVENTS")
+            this.NavButton("JOIN")
+            this.NavButton("SIGN IN")
         })
         .x(50, vw).y(4, em)
         .center()
@@ -13,30 +44,6 @@ class NavBar extends Shadow {
         .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
-                }
-
-                target.classList.remove("touched")
-
-                if(target.classList.contains("selected")) {
-                    this.selected = ""
-                    window.navigateTo("/")
-                } else {
-                    this.selected = target.innerText
-                    window.navigateTo("/app/" + target.innerText.toLowerCase())
-                }
-            })
         })
     }
 }