change logout button based on background

ui/_/code/quill.js

@@ -1,6 +1,18 @@
 /* $ NAVIGATION */
+let oldPushState = history.pushState;
+history.pushState = function pushState() {
+    let ret = oldPushState.apply(this, arguments);
+    window.dispatchEvent(new Event('pushstate'));
+    window.dispatchEvent(new Event('navigate'));
+    return ret;
+};
+
+window.addEventListener('popstate', () => {
+    window.dispatchEvent(new Event('navigate'));
+});
   
 window.navigateTo = function(url) {
+    window.dispatchEvent(new Event('navigate'));
     window.history.pushState({}, '', url);
 }
 
@@ -728,6 +740,16 @@ HTMLElement.prototype.onKeyDown = function(cb) {
     return this;
 };
 
+/* QUIRK 1: 
+In all the other callback functions, the user can choose the scope of "this". It can be either the parent shadow or the element itself.
+This listener only allows for the latter functionality. This is because the navigate event fires on the window.
+Without binding, "this" would refer only to the window. So here we are compromising on one of the two.
+*/
+HTMLElement.prototype.onNavigate = function(cb) {
+    window._storeListener(window, "navigate", cb.bind(this));
+    return this;
+};
+
 HTMLElement.prototype.onEvent = function(name, cb) {
     window._storeListener(window, name, cb);
     return this;
@@ -750,10 +772,10 @@ function _storeListener(target, type, handler, options) {
         JSON.stringify(listener.options) === optionsString
     );
 
-    if (index === -1) {
+    if (index === -1) { // Listener is new
         target.addEventListener(type, handler, options);
         target.__listeners.push({ type, handler, options });
-    } else {
+    } else { // Listener is a duplicate, can be replaced
         const old = target.__listeners[index];
         target.removeEventListener(old.type, old.handler, old.options);
 

ui/site/components/AppWindow.js

@@ -12,7 +12,6 @@ class AppWindow extends Shadow {
 
     render() {
         ZStack(() => {
-            console.log("happening")
             switch(this.app) {
                 case "Forum":
                     Forum()

ui/site/components/Home.js

@@ -66,6 +66,15 @@ class Home extends Shadow {
                             this.style.color = "var(--tan)"
                         }
                     })
+                    .onNavigate(function () {
+                        if(window.location.pathname === "/") {
+                            this.style.border = "1px solid var(--tan)"
+                            this.style.color = "var(--tan)"
+                        } else {
+                            this.style.border = "1px solid var(--accent)"
+                            this.style.color = "var(--accent)"
+                        }
+                    })
         })
 
     }