Pubilc site basically complete, apps are reasonable but could be better looking

ui/public/components/NavBar.js

@@ -24,7 +24,11 @@ class NavBar extends Shadow {
                 })
                 .onClick(function (done) {
                     if(done) {
-                        window.navigateTo(normalizeText(this.innerText))
+                        if(!isSelected(this)) {
+                            window.navigateTo(normalizeText(this.innerText))
+                        } else {
+                            window.navigateTo("/")
+                        }
                     }
                 })
         
@@ -34,6 +38,7 @@ class NavBar extends Shadow {
         HStack(() => {
             this.NavButton("WHY?")
             this.NavButton("EVENTS")
+            div().width(2.5, em).height(2.5, em)
             this.NavButton("JOIN")
             this.NavButton("SIGN IN")
         })
@@ -43,8 +48,7 @@ class NavBar extends Shadow {
         .justifyContent("center")
         .gap(3, em)
         .paddingRight(2, em)
-        .onNavigate(() => {
-        })
+        .width(50, vw)
     }
 }
 

ui/public/pages/Home.js

@@ -10,6 +10,16 @@ class Home extends Shadow {
         ZStack(() => {
 
             NavBar()
+
+            img("_/icons/logo.svg", "2.5em")
+                .onClick((done) => {
+                    if(!done) return
+                    window.navigateTo("/")
+                })
+                .position("absolute")
+                .left(50, vw).top(4, em)
+                .center()
+                .transform("translate(-2em, -50%)")
     
             switch(window.location.pathname) {
                 case "/":
@@ -24,7 +34,6 @@ class Home extends Shadow {
                         .color("var(--gold)")
                         .fontSize(5, vw)
             
-            
                     p("A CLASSICAL CHRISTIAN ASSOCIATION")
                         .x(50, vw).y(94, vh)
                         .center()

ui/public/pages/SIgnIn.js

@@ -1,6 +1,32 @@
-class SignIn extends Shadow {
-    render() {
+css(`
+    signin- input::placeholder {
+        color: var(--accent)
+    }
+`)
 
+class SignIn extends Shadow {
+
+    inputStyles(el) {
+        console.log(el)
+        return el
+        .border("1px solid var(--accent)")
+    }
+
+    render() {
+        ZStack(() => {
+            form(() => {
+                input("Email")
+                    .attr({name: "email", type: "email"})
+                    .styles(this.inputStyles)
+                input("Password")
+                    .attr({name: "password", type: "password"})
+                    .styles(this.inputStyles)
+                button("Submit")
+            })
+            .attr({action: "/login", method: "POST"})
+            .x(50, vw).y(50, vh)
+            .center()
+        })
     }
 }
 

ui/public/pages/Why.js

@@ -1,6 +1,8 @@
 class Why extends Shadow {
     render() {
-
+        p("The West is Falling. Why Not?")
+        .x(50, vw).y(50, vh)
+        .center()
     }
 }