responsive app menu

ui/_/code/quill.js

@@ -1,3 +1,9 @@
+/* $ NAVIGATION */
+
+window.navigateTo = function(url) {
+    window.history.pushState({}, '', url);
+}
+
 /* $ SELECTOR */
 
 HTMLElement.prototype.$ = function(selector) {
@@ -761,6 +767,5 @@ HTMLElement.prototype.attr = function(attributes) {
     for (const [key, value] of Object.entries(attributes)) {
         this.setAttribute(key, value);
     }
-    console.log(this)
     return this;
 };

ui/site/apps/Market.js

@@ -1,3 +1,7 @@
+css(`
+
+`)
+
 class Market extends Shadow {
 
     render() {
@@ -11,6 +15,7 @@ class Market extends Shadow {
                     .border("1px solid var(--accent)")
                     .outline("none")
                     .color("var(--accent)")
+                    .borderRadius(10, px)
                 button("Search")
             })
             .x(50, vw).y(5, vh)

ui/site/components/AppMenu.js

@@ -3,7 +3,7 @@ css(`
         color: var(--tan);
         transform: translateX(-50%);
         transition: transform .3s;
-        display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 3em;
+        display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2em;
     }
 
     app-menu.minimized {
@@ -37,18 +37,65 @@ css(`
         text-decoration: underline;
         transform: translateY(-10%)
     }
+
+    #divider.minimized {
+        display: none;
+    }
 `)
 
 registerShadow(
     
 class AppMenu extends Shadow {
+    selected;
+
+    constructor(selected) {
+        super()
+        this.selected = selected
+    }
 
     render() {
-        p("Forum")
-        p("Messages")
-        p("Market")
+        VStack(() => {
+            HStack(() => {
+                p("Forum")
+                p("Messages")
+                p("Market")
+            })
+            .justifyContent("center")
+            .gap("1.5em")
+    
+            img("_/images/divider.svg", "40vw")
+                .attr({
+                    "id": "divider",
+                })
+        })
+        .gap("0.5em")
+
+        if(this.selected) {
+            this.styleMinimized()
+        }
     }
 
+    styleMaximized() {
+        $$("app-menu p").forEach((el) => {
+            el.classList.remove("selected")
+        })
+        this.classList.remove("minimized")
+        $("#divider").style.display = ""
+    }
+
+    styleMinimized() {
+        $$("app-menu p").forEach((el) => {
+            if(el.innerText !== this.selected) {
+                el.classList.remove("selected")
+            } else {
+                el.classList.add("selected")
+            }
+        })
+        this.classList.add("minimized")
+        $("#divider").style.display = "none"
+    }
+
+
     connectedCallback() {
         Array.from(this.querySelectorAll("p")).forEach((el) => {
             el.addEventListener("mousedown", (e) => {
@@ -60,22 +107,18 @@ class AppMenu extends Shadow {
             if(!target.matches("app-menu p")) {
                 return
             }
-            $$("app-menu p").forEach((el) => {
-                if(el.innerText !== target.innerText) {
-                    el.classList.remove("selected")
-                }
-            })
 
             target.classList.remove("touched")
+
             if(target.classList.contains("selected")) {
-                target.classList.remove("selected")
-                $("app-menu").classList.remove("minimized")
-                $("#divider").classList.remove("minimized")
+                this.selected = ""
+                this.styleMaximized(target)
+                window.navigateTo("/")
                 $("app-window").close()
             } else {
-                target.classList.add("selected")
-                $("app-menu").classList.add("minimized")
-                $("#divider").classList.add("minimized")
+                this.selected = target.innerText
+                this.styleMinimized(target)
+                window.navigateTo("/app/" + target.innerText.toLowerCase())
                 $("app-window").open(target.innerText)
             }
         })

ui/site/components/AppWindow.js

@@ -5,6 +5,11 @@ import "../apps/Market.js"
 class AppWindow extends Shadow {
     app;
 
+    constructor(app) {
+        super()
+        this.app = app
+    }
+
     render() {
         ZStack(() => {
             console.log("happening")

ui/site/components/Home.js

@@ -3,12 +3,6 @@ import "./AppMenu.js"
 import "./ProfileButton.js"
 import "./InputBox.js"
 import "./Sidebar.js"
-
-css(`
-    #divider.minimized {
-        display: none;
-    }
-`)
     
 class Home extends Shadow {
 
@@ -23,7 +17,24 @@ class Home extends Shadow {
                 .backgroundPosition("48% 65%")
                 .backgroundRepeat("no-repeat")
 
-                AppWindow()
+                switch(window.location.pathname) {
+                    case "/":
+                        AppWindow()
+                        AppMenu()
+                        break
+                    case "/app/forum":
+                        AppWindow("Forum")
+                        AppMenu("Forum")
+                        break;
+                    case "/app/messages":
+                        AppWindow("Messages")
+                        AppMenu("Messages")
+                        break;
+                    case "/app/market":
+                        AppWindow("Market")
+                        AppMenu("Market")
+                        break;
+                }
 
                 ProfileButton()
                     .zIndex(1)
@@ -44,15 +55,6 @@ class Home extends Shadow {
                     .background("var(--tan)")
                     .color("var(--red)")
                     .borderRadius(5, px)
-
-                AppMenu()
-
-                img("_/images/divider.svg", "40vw")
-                    .attr({"id": "divider"})
-                    .position("fixed")
-                    .bottom("2em")
-                    .left("50vw")
-                    .transform("translateX(-50%)")
         })
 
     }

ui/site/index.html

@@ -3,10 +3,10 @@
 <head>
     <title>Hyperia</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" href="_/icons/logo.svg">
-    <link rel="stylesheet" href="_/code/shared.css">
-    <script src="_/code/quill.js"></script>
-    <script type="module" src="index.js"></script>
+    <link rel="icon" href="/_/icons/logo.svg">
+    <link rel="stylesheet" href="/_/code/shared.css">
+    <script src="/_/code/quill.js"></script>
+    <script type="module" src="75820185/index.js"></script>
 </head>
 <body style="margin: 0px">
 </body>

ui/site/pages/messages.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Hyperia</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" href="_/icons/logo.svg">
-    <link rel="stylesheet" href="_/code/shared.css">
-    <script src="_/code/quill.js"></script>
-    <script type="module">
-      import "./components/ProfileButton.js"
-      import "./components/InputBox.js"
-      import "./components/Sidebar.js"
-
-      import ConnectionHandler from "./ws/ConnectionHandler.js"
-      window.ConnectionHandler = new ConnectionHandler()
-    </script>
-  </head>
-  <body>
-    <profile-button style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw"></profile-button>
-    <input-box></input-box>
-    <side-bar></side-bar>
-  </body>
-</html>