transition from parchment to downloads

ui/components/Home.js

@@ -1,48 +1,22 @@
+import "./NavMenu.js"
+import "./HomePanel.js"
+import "./DownloadsPanel.js"
+
 class Home extends Shadow {
 
-
-
     render() {
         ZStack(() => {
-            input("", "60vw")
-                .backgroundColor("var(--accent3)")
-                .color("var(--accent)")
-                .border("none")
-                .borderTop("1px solid var(--accent)")
-                .borderBottom("1px solid var(--accent)")
-                .outline("0.5px solid black")
-                .borderRadius(7, px)
-                .transition("padding .2s")
-                .padding(0.5, em)
-                .position("absolute")
-                .x(50, vw).y(7, em)
-                .transform("translate(-50%, -50%)")
-                .onInput(() => {
-                    console.log('typing')
-                })
-                .onFocus(function (focusing) {
-                    if(focusing) {
-                        this.style.padding = "1em"
-                        this.style.borderColor = "var(--darkred)"
-                    } else {
-                        this.style.padding = "0.5em"
-                        this.style.borderColor = "var(--accent)"
-                    }
-                })
-            
-            VStack(() => {
-                let json = this.getJSONData()
-                p(json.length + " Entries")
-                .marginBottom(2, em)
 
-                for(let i=0; i<100; i++) {
-                    p(json[i].name)
-                    .marginLeft(0, em)
-                    .marginBottom(0.1, em)
-                }
-            })
-            .paddingLeft(5, em)
-            .paddingTop(10, em)
+            NavMenu()
+
+            switch(window.location.pathname) {
+                case "/":
+                    HomePanel()
+                    break;
+                case "/downloads":
+                    DownloadsPanel()
+                    break;
+            }
         })
         .backgroundColor("var(--main)")
         .display("block")
@@ -52,24 +26,10 @@ class Home extends Shadow {
         .onAppear(() => {
             document.body.style.backgroundColor = "var(--main)"
         })
-    }
-
-    getJSONData() {
-        const script = document.getElementById('jsonData');
-        if (!script) {
-            console.warn('initial-data script not found');
-            return null;
-        }
-
-        try {
-            // script.textContent is the raw JSON string
-            const data = JSON.parse(script.textContent);
-            console.log(data)
-            return data;
-        } catch (err) {
-            console.error('Failed to parse initial-data JSON:', err);
-            return null;
-        }
+        .onNavigate(() => {
+            console.log("navved")
+            this.rerender()
+        })
     }
 }